[Android] 레이아웃 기초

📌 제약 조건 이해하기

안드로이드 기본 레이아웃은 제약 레이아웃(Constraint Layout)이다. 제약 레이아웃이란 뷰의 위치를 결정할 때 제약 조건을 사용하는 레이아웃이다.

• 제약 조건(Constraint) : 뷰가 레이아웃 안의 다른 요소와 어떻게 연결되는지 알려주는 것. 뷰의 연결점(Anchor Point)과 대상(Target) 연결.
• 부모 레이아웃(Parent LAyout) : 예를 들면, 버튼의 입장에서 자신을 감싸고 있는 레이아웃.

다음은 제약 조건을 적용한 모습이다. 버튼 상/하/좌/우에 있는 동그란 연결점(핸들)을 마우스로 잡아끌어 부모 레이아웃과 연결했다. 여기서 부모 레이아웃이 연결 타깃이 된 것이다. 이렇게 연결점과 타깃을 연결했다면 연결점이 파란색으로 바뀌며 연결선이 생긴다. 여기서 기억해야할 점은 레이아웃 안에서 버튼의 위치를 결정하려면 적어도 왼쪽과 위쪽에 연결되어 있어야 한다는 점이다. 즉, 꼭 필요한 제약 조건은 두 개면 된다. 

✔ 타깃이 될 수 있는 것

• 같은 부모 레이아웃 안에 들어 있는 다른 뷰의 연결점
• 부모 레이아웃의 연결점
• 가이드라인

✔ 연결점이 될 수 있는 것

• 위쪽(Top), 아래쪽(Bottom), 왼쪽(Left/Start), 오른쪽(Right/End)
• 가로축의 가운데(CenterX), 세로축의 가운데(CenterY)
• 베이스라인(텍스트를 보여주는 뷰인 경우에만 적용)

오른쪽 속성창에 다음과 같이 Constraint Widget을 볼 수 있다. 연결선의 적혀있는 마진(Margin)을 조절하여 거리를 지정할 수 있다.

• 마진(Margin) : 연결점과 타깃과의 거리. 숫자를 입력하거나 객체를 직접 움직여서 조절할 수 있음. 

📌 화면 가운데에 뷰 배치하기

디자인 화면 상단에 있는 자석 모양의 아이콘(Autoconnection)을 활성화 시키면 버튼을 가운데에 놨을 때, 다음과 같이 버튼의 모든 연결점이 자동으로 연결된다.

만약 정확히 한가운데가 아니라 어느 한 쪽으로 치우치게 만들고 싶다면 어떻게 해야할까? 오른쪽 속성창에서 세로 방향 바이어스(Vertical Bias)와 가로 방향 바이어스(Horizontal Bias)를 조절하면 된다. 즉, 화면을 비율로 나눈 후 어느 곳에 위치 시킬지 결정하는 값이다.

속성 창을 더 자세히 살펴보자면, 이 사각형 안쪽에 있는 >> 모양의 선은 뷰의 layout_width와 layout_height가 어떻게 설정되었는지 표시하는 선이다. 다음과 같이 총 세 가지의 경우가 있다.

✔ 부모 여유 공간 채우기 : layout_width의 값은 match_constraint나 0dp로 설정, 구불구불한 선으로 표시

✔ 뷰의 내용물 채우기 : layout_width의 값은 wrap_content로 설정, 중앙을 향하는 화살표(>>)로 표시

✔ 고정 크기 : layout_width와 layout_height의 값은 지정한 값으로 설정, 직선으로 표시

📌 가이드라인 사용하기

• 가이드라인(Guideline) : 여러 개의 뷰를 일정한 기준 선에 정렬할 때 사용. 화면에 추가할 수 있는 요소이지만, 그 크기가 0이고 화면에서 보이지 않아 실제 화면의 구성 요소는 아님.
• 가이드라인은 디자인 화면 위쪽에서 [Guidelines] 아이콘을 눌러 추가한다.

Vertical Guideline을 누르면 다음과 같이 세로줄의 가이드라인이 생기고, 점선을 움직여 위치를 조절할 수 있다.

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

실제 앱을 만들 때는 디자이너 도구뿐만아니라 XML 원본 코드를 이용하여 더 세세하게 수정한다. [Code]를 눌러 원본 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"
    tools:context=".MainActivity">

가장 위쪽의 줄은 이 파일이 XML 형식으로 된 것임을 알려주는 줄이다.

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

그 다음 입력된 태그가 화면 전체를 감싸고 있는 레이아웃이고, 앞에 패키지 이름이 붙어있는 것을 볼 수 있다. ConstraintLayout이 외부 라이브러리로 분류되어 있기 때문에 앞에 패키지 이름도 함께 기록한 것이다. 또, 다음과 같은 xmlns:android 속성은 XML 레이아웃 파일이라면 한 번씩 넣어줘야하는 속성으로, 하나의 파일에 한 번만 사용되면 된다. 이  xmlns뒤에 있는 android라는 이름이 나머지 속성을 접두어로 쓰인다.

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

✔ xmlns뒤에 있는 접두어의 의미

접두어	의미
xmlns:android	안드로이드 기본 SDK에 포함되어있는 속성을 사용한다.
xmlns:app	프로젝트에서 사용하는 외부 라이브러리에 포함하는 속성을 사용한다.(app이라는 단어는 다른 것으로 대체 가능)
xmlns:tools	안드로이드 스튜디오의 디자이너 도구 등에서 화면을 보여줄 때 사용한다. 앱이 실행될 때는 적용되지 않고 안드로이드 스튜디오에서만 적용된다.

✔ android:id 속성

• 뷰를 구분하는 구분자 역할을 한다.
• 용도
  • XML 레이아웃 파일 안에서 뷰를 구분할 때
  • XML 레이아웃 파일에서 정의한 뷰를 자바 소스에서 찾을 때
• 제약 레이아웃에서하나의 뷰를 다른 뷰와 연결할 때 사용하는 XML 속성의 이름 규칙에서 사용된다.

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

• id 속성 값 정의하는 방법

@+id/아이디 값

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

앱을 만들 때 왜 거리 단위로 dp를 사용하는지 궁금증이 들 수 있다. px은 해상도에 따라 그 크기가 다르게 보이지만 dp나 sp와 같은 단위를 사용하면 해상도가 다른 단말에서도 뷰의 크기를 비슷하게 보이도록 만들 수 있다. 다음은 사용 가능한 단위와 그 의미이다.

단위	단위 표현	설명
px	픽셀	화면의 픽셀 수
dp 또는 dip	밀도 독립적 픽셀(density independent pixel)	160dpi 화면을 기준으로 한 픽셀
sp 또는 sip	축척 독립적 픽셀(scale independent pixel)	텍스트 크기를 지정할 때 사용하는 단위. 가변 글꼴을 기준으로 한 픽셀로 dp와 유사하나 글꼴의 설정에 따라 1sp당 픽셀 수가 달라짐.
in	인치	1인치로 된 물리적 길이
mm	밀리미터	1밀리미터로 된 물리적 길이
em	텍스트 크기	글꼴과 상관없이 동일한 텍스트 킅기 표시