Constraint Layout(2) 체인

체인 CHAINS

뷰 A와  B가 있다고 할 때,  A와 B가 "서로" 연결되어 있을 경우 이것을 체인 관계 상태라고 한다 

여러 개의 뷰를 연결할 수도 있으며, 체인상태의 뷰는 하나의 헤드(HEAD)를 가지게 되는데

Vertical방향으로 연결할 경우 연결된 뷰의 최상단에 위치한 뷰, 

Horizontal 방향으로 연결할 경우 가장 왼쪽에 있는 뷰가 헤드가 된다

    <Button //HEAD, 좌우로 연결된 horizontal 체인에서 가장 왼쪽에 있다
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button9"
        app:layout_constraintHorizontal_bias="0.42" />
 
    <Button
        android:id="@+id/button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        app:layout_constraintRight_toLeftOf="@+id/button10"
        app:layout_constraintLeft_toRightOf="@+id/button8"
        app:layout_constraintTop_toTopOf="@+id/button8" />
 
    <Button
        android:id="@+id/button10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/button9"
        app:layout_constraintTop_toTopOf="@+id/button9" />

코드를 보면 button8  <=> button9 <=> button10 이 서로  layout_constraintXx_toYyOf 로 상호 연결되어 있으며, 따라서 button8,9,10은 체인 상태이다

app:layout_constraintVertical_chainStyle="packed"

위의 코드를 헤드에 추가하면 해당 체인의 스타일이 변경된다

이 때, 변경할 수 있는 스타일은

CHAIN_SPREAD(default) 같은 간격으로 퍼트리기

CHAIN_SPREAD_INSIDE 안쪽으로만 같은 간격으로 퍼트리기

CHAIN_PACKED 한데 묶기

이렇게 3가지를 가지고 있다

추가로 

WEIGHTED_CHAIN : CHAIN_SPREAD 상태에서 Vertical 방향에서 height, Horizontal 방향에서 width를 0dp 줄 경우, 해당 뷰를 match_constraint 속성으로 취급하는데, 이 때 체인 방향의 layout_width, 또는 layout_height에 0dp를 준 후, 아래와 같이 weight를 설정해주면 weight비율로 간격이 설정된다

app:layout_constraintHorizontal_weight="1"

PACKED_CHAIN_WITH_BIAS:CHAIN_PACKED 상태에서 

app:layout_constraintHorizontal_bias="0.33"

위와 같이 bias 설정값을 넣어주면 패킹된 체인의 위치를 변경할 수 있다

이와 관련된 설명을 이미지로 보자면 아래와 같다

이미지 출처: https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html