[안드로이드 스튜디오 강좌 #8]제약 레이아웃(Constraint Layout)-2 XML 코드

[안드로이드 스튜디오 강좌 #7] 레이아웃 기초 익히기 (제약 레이아웃(Constraint Layout)) 1 디자인 화면

에 이어서 진행합니다.

 

! 목표

가이드라인을 추가 했었던 XML 코드를 살펴보며 XML 코드를 공부해보자

 

1. XML 원본에 추가된 속성 확인하기

실제로는 뷰를 중첩하거나 복잡해지면 보기 어렵기 때문에 XML 원본 코드를 수정하면서 개발된다.

가이드라인을 추가했던 xml 파일의 코드를 살펴보며 공부해보자

빨간색으로 표시된 버튼을 누르면 코드를 볼 수 있다.

코드 전문 사진

코드 설명

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
		xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

-<?xml version="1.0" encoding="utf-8"?>

처음부터 XML 파일에 일반적으로 추가하는 정보이며, 파일이 XML 형식인 것을 나타낸다

 

 

-<androidx.constraintlayout.widget.ConstraintLayout

그 다음은 태그가 화면 전체를 감싸고 있는 레이아웃이며 Component Tree의 계층도에서 가장 위에 있는 최상위 레이아웃이다.

androidx.constraintlayout.widget.ConstraintLayout

(패키지이름).(태그이름)

패키지 이름은 기본 안드로이드 API에 포함되어 있으면 그 위젯이나 레이아웃의 이름만 입력하면 된다. 하지만 외부 라이브러리를 불러온 것이라면 패키지 이름까지 입력해야한다.

ConstraintLayout의 경우 외부 라이브러리이기 때문에 앞에 패키지 이름까지 함께 기록되었다.

 

 

-xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

태그의 속성을 보면 xmlns:로 시작하는 속성들이 있다.

xmlns의 뒤에 붙은 단어들은 이제 접두어처럼 사용될 수 있다.

(처음에만 xmlns:android를 선언해주면 후에 android: 만 사용할 수 있다.)

 

 

*참고*

-xmlns:android : 안드로이드 기본 SDK에 포함되어 있는 속성을 사용

-xmlns:app : 프로젝트에서 사용하는 외부 라이브러리에 있는 속성을 사용 (app은 다른 단어로 대체 가능)

-xmlns:tools : 안드로이드 스튜디오의 디자이너 도구와 같이 화면에 보여줄 때 사용된다. 안드로이드 스튜디오 내에서만 적용 된다.

 

 

 

 

이제 가이드라인과 버튼 부분의 XML 코드를 살펴보자

<androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_end="311dp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Button"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent" />

...생략...

</androidx.constraintlayout.widget.ConstraintLayout>

 

-androidx.constraintlayout.widget.Guideline

외부 라이브리인 androidx.constraintlayout.widget.을 함께 붙여준다.

 

-android:id="@+id/guideline": 뷰를 구분하는 구분자 역할을 함

1. XML 레이아웃 파일 안에서 뷰를 구분할 때
2. XML 레이아웃 파일에서 정의한 뷰를 자바 소스 파일에서 찾을 때 사용한다.

    

-android:layout_width="wrap_content"

 android:layout_height="wrap_content"

레이아웃의 높이와 너비를 설정해주는 속성이다.

 

 

-android:orientation="vertical"

가로, 세로 중 어느 방향으로 가이드라인을 지정할지에 관한 속성이다.

가이드라인(Guideline)의 필수 속성이다.

 

 

-app:layout_constraintGuide_end="311dp"

가이드라인을 부모 레이아웃에서 얼마나 떨어트려 배치할지 지정하는 속성이다.

*참고*

layout_constraintGuide_begin : 세로인 경우 왼쪽/가로인 경우 위쪽부터의 거리 지정

layout_constraintGuide_end : 세로인 경우 오른쪽/가로인 경우 아래쪽부터의 거리 지정

layout_constraintGuide_percent : layout_constraintGuide_begin 대신 지정하며 % 단위로 거리 지정

 

 

-android:layout_marginTop="16dp"

버튼의 위쪽을 얼마나 띄울지 나타내주는 속성이다.

margin(Top, Bottom, Left, Right)으로 사용할 수 있으며,

margin만 사용하는 경우 뷰의 위, 아래, 왼쪽, 오른쪽을 얼마나 띄울지 한꺼번에 지정이 된다.

 

 

-app:layout_constraintStart_toStartOf="@+id/guideline"

app:layout_constraint[소스뷰의 연결점]_[타깃 뷰의 연결점] = '[타깃 뷰의 id]"

버튼의 Start 부분에서 가이드라인의 Start 부분에 연결됐기 때문에

app:layout_constraintStart_toStartOf를 써주면 된다.

 

소스뷰의 연결점은 Top, Bottom, Left(=Start), Right(=End)

타깃뷰의 연결점은 toTopOf, toBottomOf, toLeftOf, toRightOf 중에서 사용하면 된다.

 

ex) 쉽게 말하자면,

연결을 하는 뷰는 소스 뷰/연결 당하는 뷰는 타겟 뷰

사진에서는 소스뷰의 윗쪽에서 타깃뷰의 아랫쪽으로 연결하므로

layout_constraintTop_toBottomOf = '@+id/source_view"이다.

 

 

-app:layout_constraintTop_toTopOf="parent"

parent 레이아웃과 연결되어 제약을 생성

 

 

 

2. 크기를 표시하는 단위와 마진

-px (픽셀) : 화면 픽셀의 수

-dp, dip (밀도 독립적 픽셀) : 160dpi 화면을 기준으로 한 픽셀

해상도에 비례하는 비슷한 크기로 보이게 할 때 사용한다.

(160dpi 화면에서는 1dp단위가 1픽셀이지만, 320dpi에서는 2픽셀이 될 것)

-sp, sip (축척 독립적 파일) : 텍스트 크기를 지정할 때 사용하는 단위

글꼴을 기준으로 하는 텍스트 크기를 나타내고 뷰 크기에는 사용 되지 않음

글자를 표시하는 텍스트뷰나 버튼의 텍스트 크기에는 사용이 권장됨

(단말기 글꼴 크기에 맞춰 자동적으로 글자 크기가 변경되기 때문)

-em(텍스트 크기) : 글꼴과 상관없이 동일한 텍스트 크기 표시

-in (인치)

-mm (밀리미터)

 

 

*참고*

뷰의 폭과 높이에는 match_parent와 wrap_content 값을 지정하는 것이 좋음

(해상도나 화면 크기가 달라도 전체 화면을 기준으로 뷰를 배치하기 때문에)

뷰에는 dp, 글자 크기에는 sp 단위를 사용하는 것이 좋음

 

 

 

지금까지 자동으로 만들어지는 레이아웃인 제약 레이아웃에 대해 살펴보았다.

다음에는 안드로이드 스튜디오의 여러 레이아웃 종류에 대해서 더 살펴볼 것이다.

 

 

 

 

## 이 글은 허락을 받아 Do it 안드로이드 앱 프로그래밍을 참고해서 작성되었습니다.

공부를 하며 개인용으로 정리하는 것이기 때문에 틀린 부분이 있을 수도 있습니다.

도서에는 더 자세하고 알기 쉽게 설명이 되어 있어 도서를 참고하면서 공부하는 것을 추천드립니다.

도서 정보 : http://www.yes24.com/Product/Goods/15789466

Do it! 안드로이드 앱 프로그래밍

유투브 강의 : https://www.youtube.com/watch?v=nN4xnEcnjE8