[Android, ConstraintLayout, Chain] 1. ConstraintLayout 체인 설정하기

ConstraintLayout 에서 체인을 설정하는 법에 대해 포스팅 하겠습니다.

ConstraintLayout 1. 체인

ConstraintLayout 2. 가이드라인 

ConstraintLayout 3. 배리어 

레이아웃은 아래와 같이 설정해 주시면 됩니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="@id/btn2"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintEnd_toStartOf="@id/btn3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@+id/btn1"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@+id/btn2"
        app:layout_constraintBottom_toBottomOf="parent"/>

</android.support.constraint.ConstraintLayout>

이 때 체인이 형성 되기 위해서는 각 뷰들이 서로를 바라보고 있어야 합니다.

해당 뷰의 왼쪽은 constrainatStrat, 오른쪽은 constraintEnd 입니다. 

위 값은 글자의 시작점과 끝점으로 한국같은 경우에는 왼쪽이 글자의 시작이고 오른쪽이 글자의 끝이기 때문에 왼쪽과 오른쪽을 나타냅니다.

물론 constraintLeft 와 constraintRight 이 있지만 우선순위가 Start 와 End 가 더 놓습니다. 

btn1 왼쪽 -> parent

btn1 오른쪽 <--> btn2 왼쪽

btn2 오른쪽 <--> btn3 왼쪽

btn3 오른쪽 -> parent

위와 같이 설정하시면

btn1 이 chain head 가 됩니다.

Chain Head 는 연결된 뷰들 중 왼쪽과 위쪽이 우선순위를 갖습니다.

이때 btn1 의 

app:layout_constraintHorizontal_chainStyle=""

값을 변경하여 체인을 수정할 수 있습니다. 변경 할 수 있는 값은 spread, spread_inside, packed 입니다.

다음은 각각을 변경 했을 때의 모습입니다.

app:layout_constraintHorizontal_chainStyle="spread"

app:layout_constraintHorizontal_chainStyle="spread_inside"

app:layout_constraintHorizontal_chainStyle="packed"