ConstraintLayout이란 무엇인가?
간단히 말해, ConstraintLayout(제약 레이아웃)은 RelativeLayout의 발전된 형태입니다. 각 뷰를 다른 뷰나 부모 컨테이너에 '제약(constraint)'으로 연결하여 배치하기 때문에 중첩된 자식 뷰 계층 구조를 크게 줄일 수 있으며, 그 결과 화면 렌더링 성능이 향상됩니다.
ConstraintLayout의 주요 크기 속성
ConstraintLayout에서 뷰의 크기를 결정하는 대표적인 속성은 다음과 같습니다.
1. Wrap Content
뷰가 담고 있는 콘텐츠(텍스트, 이미지 등)의 크기에 맞춰 뷰의 크기를 자동으로 감싸줍니다.
2. Any Size (0dp)
match_parent와 매우 유사하게 동작하지만, 차이점이라면 부모 전체가 아닌 설정된 제약 조건 범위 안에서 남은 공간을 꽉 채우도록 확장됩니다. ConstraintLayout에서는 match_parent 대신 0dp와 제약 조건을 함께 사용하는 것이 권장됩니다.
3. Fixed Size
표준 높이와 너비처럼 고정된 크기(dp 단위)를 직접 지정할 수 있습니다.
속성이 적용된 버튼의 코드 살펴보기
위 예제에서는 세 가지 속성이 모두 적용된 버튼을 확인했습니다. 이제 실제 XML 코드 수준에서 어떻게 작성되는지 살펴보겠습니다.
<Button android:layout_width="wrap_content" android:layout_height="53dp" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:layout_marginEnd="8dp" android:layout_marginBottom="8dp" android:text="Button" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.391" app:layout_constraintStart_toStartOf="@+id/data1" app:layout_constraintTop_toTopOf="parent" />
위 코드에서는 layout_marginStart, layout_marginTop, layout_marginEnd, layout_marginBottom을 선언하여 뷰 주변의 표준 여백 거리를 지정했습니다. 또한 layout_constraint* 속성들을 통해 버튼이 부모와 다른 뷰(data1)에 어떻게 연결되는지 정의하고 있습니다.
Bias(바이어스) 속성 이해하기
ConstraintLayout에는 가로(horizontal) bias와 세로(vertical) bias, 두 종류의 바이어스가 있습니다. 바이어스는 양쪽 제약 사이에서 뷰가 치우친 위치에 배치되도록 조절하는 값으로, 0(시작 방향)에서 1(끝 방향) 사이의 값을 가집니다. 기본값은 0.5로, 양쪽에 균등하게 배치됩니다. LinearLayout의 gravity처럼 뷰를 가로 또는 세로 방향으로 배치하는 역할을 한다고 생각하면 이해하기 쉽습니다.
디자인 편집기에서의 제약 관리
레이아웃 편집기에서 뷰를 클릭하면 해당 뷰에 연결된 모든 제약 관계(계층 구조)가 시각적으로 표시됩니다. 또한 뷰를 클릭하면 나타나는 "X" 모양 아이콘 버튼을 통해 다른 뷰 또는 부모 뷰와의 제약 연결을 손쉽게 삭제할 수 있습니다.
실습: 안드로이드에서 ConstraintLayout 사용하기
다음 예제는 안드로이드에서 ConstraintLayout을 사용하는 방법을 단계별로 보여줍니다.
1단계 − Android Studio에서 새 프로젝트를 생성합니다. File ⇒ New Project 메뉴로 이동한 후, 새 프로젝트 생성에 필요한 모든 세부 정보를 입력합니다.
2단계 − res/layout/activity_main.xml 파일에 아래 코드를 추가합니다.
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="https://schemas.android.com/apk/res-auto" xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent" android:id="@+id/layout" android:gravity="center" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/data" android:layout_width="wrap_content" android:gravity="center" android:textSize="30sp" android:text="www.tutorialspoint.com" android:layout_height="wrap_content" /> <TextView android:id="@+id/data1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginTop="80dp" android:layout_marginEnd="8dp" android:gravity="center" android:text="www.tutorialspoint.com" android:textSize="30sp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:layout_width="wrap_content" android:layout_height="53dp" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:layout_marginEnd="8dp" android:layout_marginBottom="8dp" android:text="Button" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.43" app:layout_constraintStart_toStartOf="@+id/data1" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>
위 XML에서 첫 번째 TextView는 부모 상단에 배치되고, 두 번째 TextView는 부모의 좌우 제약을 받아 가운데 정렬되며, Button은 data1 TextView와 부모에 동시에 제약을 걸어 bias 값(0.43)만큼 치우친 위치에 배치됩니다.
애플리케이션 실행하기
이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 모바일 기기가 컴퓨터에 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바에서 실행(Run) 아이콘 
을 클릭합니다. 옵션 목록에서 본인의 모바일 기기를 선택하면, 연결된 기기 화면에 아래와 같은 결과가 표시됩니다.
