10.[Andorid]ConstraintLayout (Chains)

Chains

View A와 B가 있다고 할 때,  A와 B가 서로 연결되어 있을 경우 이것을 체인으로 연결된 것으로 간주합니다.

여러 개의 뷰를 연결할 수도 있습니다.

체인에는 하나의 헤드(HEAD)가 존재합니다.

Vertical방향으로 연결할 경우 최상단에 위치한 View가 헤드가 되고

Horizontal 방향으로 연결할 경우 가장 왼쪽에 있는 View가 헤드가 됩니다.

 

layout_constraintHorizontal_chainStyle이나 layout_constraintVertical_chainStyle으로 체인의 스타일을

지정할 수 있습니다 default값은 CHAIN_SPREAD입니다.

chainStyle은 chain의 헤드에만 적용을 시켜주면 됩니다.

CHAIN_SPREAD	요소가 펼쳐집니다. (default 값)
CHAIN_SPREAD_INSIDE	CHAIN_SPREAD와 유사 하지만 체인의 끝쪽에는 여백이 주어지지 않습니다.
CHAIN_PACKED	체인의 요소가 함께 포장됩니다

<TextView
        android:id="@+id/tv_text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#F00"
        android:text="text1"
        android:textSize="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/tv_text2"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0F0"
        android:text="text2"
        android:textSize="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/tv_text3"
        app:layout_constraintStart_toEndOf="@id/tv_text1"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_text3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00F"
        android:text="text3"
        android:textSize="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/tv_text2"
        app:layout_constraintTop_toTopOf="parent" />

SPREAD

 

app:layout_constraintHorizontal_chainStyle="spread_inside"

spread_inside

app:layout_constraintHorizontal_chainStyle="packed"

packed

marginStart를 줬을때 spread / spread_inside / packed

 

chain이 연결된 상태에서 margin을 주면 spread와 packed는 연결된 chain이 다 같이 움직이지만

spread_inside는 margin을 준 방향만 영향을 받는다.