ConstraintLayout의 개념과 기본 사용법

2018 DroidKnights에 참가하여 지금은 Constraint layout 시대라는 주제로 진행하였던 발표내용을 참고하여 작성하였습니다.

ConstraintLayout이란?

복잡한 레이아웃을 단순한 계층구조를 이용하여 표현할 수 있는 ViewGroup

형제 View들과의 관계를 정의해서 레이아웃을 구성하여, RelativeLayout과 비슷하지만 더 유연하고 다양하고 강력한 기능을 제공한다.

• RelativeLayout에서 불가능했던 자식 뷰간의 상호관계 정의가 가능
• LinearLayout을 써야만 했던 뷰 비율 조정도 간단하게 가능
• 뷰 계층을 간단하게 구성하여 유지보수, 성능 향상

ConstraintLayout에서 자식 뷰의 위치를 잡는 기준

<Button android:id="@+id/buttonA"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="button_A"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintRight_toLeftOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"/>

다른 뷰나 부모 레이아웃과의 정렬 조건 / 연결 관계를 나타냄

layout_constraint[기준1]_to[기준2]of="[viewId|parent]"

[기준1]의 방향을 [기준2]의 방향 위치에 정렬

※ Top/Bottom/Left/Right를 모두 선언해야 하는 것은 아니지만 체인등 다른 기능 사용시 예상 못한 동작이 발생할 수 있어 4방향 모두 선언하는 것을 권장

● 뷰 크기

match_parent는 사용하지 않는 것을 권장

match_parent가 아닌 match_constraint (0dp로 선언 -> match_constraint라고 읽음)

match_constraint 는 가능한 영역을 모두 채운다.

<Button
    android:layout_width="150dp"
    android:layout_height="0dp"
    android:text="button"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

● 뷰 크기 - 가로/세로 비율 지정

dimensionRatio : 뷰의 가로/세로 비율 결정 

app:layout_constraintDimensionRatio="1" → 가로/세로 = 1/1

app:layout_constraintDimensionRatio="1:1" → 가로:세로 = 1:1

적어도 한 방향은 match_constraint 여야 한다.

두 방향 모두 match_constraint 일 경우, 비율에 맞춰 constraint 내에서 가장 큰 크기로 설정

<Button
    android:layout_width="100dp"
    android:layout_height="0dp"
    android:text="button"
    app:layout_constraintDimensionRatio="1"
.../>

<Button
    android:layout_width="100dp"
    android:layout_height="0dp"
    android:text="button"
    app:layout_constraintDimensionRatio="2"
.../>

● 뷰 크기 - 최소/최대

최소/최대 크기 지정 : app:layout_constraintWidth_[min|max]="size" 

android:minWidth와 다른점

wrap_content => android:[min|max]width 적용

match_constraint => app:layout_constraintWidth_[min|max] 적용 

● 뷰 위치 지정 - bias

bias: (constraint 영역 크기 - 뷰 크기) 를 분배하는 비율 

app:layout_constraintHorizontal_bias="0~1"

※ 0: 왼쪽에 붙이기 / 1: 오른쪽에 붙이기 / 0.5: 중간에 위치 (기본값)

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="button1"
    app:layout_constraintHorizontal_bias="0"
    ... />
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="button2"
    app:layout_constraintHorizontal_bias="1"
    ... />

● 뷰 위치 지정 - guideline

가로 또는 세로 축 방향을 가진 가상의 뷰

부모 뷰의 특정 위치를 기준점으로 삼을 때 사용

축, 위치 값을 속성으로 가짐

축: android:orientation="[vertical|horizontal]"

위치:

app:layout_constraintGuide_begin: 시작 지점으로 부터의 거리

app:layout_constraintGuide_end: 끝 지점으로 부터의 거리

app:layout_constraintGuide_percent: 시작 지점으로 부터의 % 위치

<android.support.constraint.Guideline
    android:id="@+id/gd_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_begin="100dp" />

<android.support.constraint.Guideline
    android:id="@+id/gd_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_end="50dp" />

<android.support.constraint.Guideline
    android:id="@+id/gd_bottom"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.8" />
<Button
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="button1"
    app:layout_constraintBottom_toTopOf="@id/gd_bottom"
    app:layout_constraintLeft_toRightOf="@id/gd_left"
    app:layout_constraintRight_toLeftOf="@id/gd_right"
    app:layout_constraintTop_toTopOf="parent" />

참고자료: https://www.slideshare.net/kingori/constraint-layout-94663983