ConstraintLayout(2)

constraint(제약조건)

Chain은 뷰간의 상호 참조 연결을 할 때, 뷰들을 어떤 방식으로 연결 시킬시켜 표현할지를 결정한다. 수평기준 가장 왼쪽 있는 View 또는 수직 기준으로 가장 상단에 있는 View가 기준(Head)이 된다.

 

이미지 출저 : 찰스의 안드로이드

chain 스타일은 여러 형태가 존재 할 수 있는데 layout_constraintHorizontal_chianStyle 또는 layout_constraintVertical_chainStyle을 연결된 뷰들의 head에만 적어주면 된다. 기본 chain스타일은 CHAIN_SPREAD이다.

 

Example

Spread Chain

View들을 골고루 펼쳐 여백을 같게 한다(기본값)

 

이미지 출처 : 찰스의 안드로이드

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread"
        android:text="button_1"/>
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toLeftOf="@id/button3"
        app:layout_constraintLeft_toRightOf="@id/button1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="button_2"/>
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="button_3"/>

Packed chain

View들이 똘똘 뭉치게 되고 부모뷰로부터의 여백을 같게 합니다. 여백을 조정하고 싶다면 bias조정을 통해 한쪽으로 치우치게 만들 수 있다.

 

이미지 출처 : 찰스의 안드로이드

    <Button
        android:id="@+id/button11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@id/button21"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"
        android:text="button_11"/>
    <Button
        android:id="@+id/button21"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toLeftOf="@id/button31"
        app:layout_constraintLeft_toRightOf="@id/button11"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="button_21"/>
    <Button
        android:id="@+id/button31"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@id/button21"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="button_31"/>

Spread Inside Chain

Spread와 비슷하지만 가장 외곽에 있는 뷰들은 부모 뷰와 여백이 없는 상태로 골고루 펼쳐진다.

 

이미지 출처 : 찰스의 안드로이드

    <Button
        android:id="@+id/button12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@id/button22"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        android:text="button_12"/>
    <Button
        android:id="@+id/button22"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toLeftOf="@id/button32"
        app:layout_constraintLeft_toRightOf="@id/button12"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="button_22"/>
    <Button
        android:id="@+id/button32"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@id/button22"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="button_32"/>

Weighted Chain

app:layout_constraintHorizontal_weight(또는 app:layout_constraintVertical_weight) 속성으로 비율을 지정

 

이미지 출처 : 찰스의 안드로이드

    <Button
        android:id="@+id/button13"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@id/button23"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="1"
        android:text="button_13"/>

    <Button
        android:id="@+id/button23"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="button_23"
        android:layout_marginLeft="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toRightOf="@id/button13"
        app:layout_constraintTop_toTopOf="parent"/>

References

• https://github.com/android/views-widgets-samples
• https://www.charlezz.com/?p=669
• https://www.charlezz.com/?p=691