ConstraintLayout - Chains

Chains

View가 서로 연결이 되어있을 때 Chain이 생성되게 됩니다.

따라서 View끼리 서로 연결이 되어있을 때 어떻게 표현을 할수 있을지 결정할수 있습니다.

 

[예시]

<View
  android:id="@+id/fv"
  android:layout_width="0dp"
  android:layout_height="0dp"
  android:background="@color/colorPrimary"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintLeft_toLeftOf="parent"
  app:layout_constraintRight_toLeftOf="@+id/sv"
/>
    
<View
  android:id="@+id/sv"
  android:layout_width="0dp"
  android:layout_height="0dp"
  android:background="@color/colorAccent"
  app:layout_constraintLeft_toRightOf="@+id/fv"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintRight_toRightOf="parent"
/>

 

이렇게 할경우 서로 연결이 되어있는것을 확인할수가 있습니다.

다음은 이렇게 화면이 표시됩니다.

 

 

기본적으로 표현을 할때 Style을 정의할수가 있습니다.

Style을 통해서 weight , bias , 정렬 방식등을 정의할수가 있습니다.

 

app:layout_constraintHorizontal_chainStyle="packed|spread|spread_inside"
app:layout_constraintVertical_chainStyle="packed|spread|spread_inside"

[spread]

연결된 뷰들을 여백을 같게 펼칩니다. (Default)

 

 

[packed]

연결된 뷰들이 뭉치게 됩니다. 그리고 여백을 같게 만듭니다. 만약에 여백을 조정하고 싶다면 bias통해서 조정이 가능합니다.

[spread_inside]

연결된 뷰들 중에 가장 끝에 있으면 부모 뷰와 여백이 없는 상태로 펼쳐집니다.

 

bias

추가로 bias을 통해서 여백을 조정할수가 있습니다.

 

[예시]

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                                   xmlns:app="http://schemas.android.com/apk/res-auto"

                                                   android:id="@+id/container"
                                                   android:layout_width="match_parent"
                                                   android:layout_height="match_parent">

    <View
            android:id="@+id/fv"
            android:layout_width="40dp"
            android:layout_height="0dp"
            android:background="@color/colorPrimary"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/sv"
            app:layout_constraintHorizontal_bias="0.8"
            app:layout_constraintHorizontal_chainStyle="packed"

    />
    <View
            android:id="@+id/sv"
            android:layout_width="40dp"
            android:layout_height="0dp"
            android:background="@color/colorAccent"
            app:layout_constraintLeft_toRightOf="@+id/fv"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/tv"
    />

    <View
            android:id="@+id/tv"
            android:layout_width="40dp"
            android:layout_height="0dp"
            android:background="@color/colorPrimaryDark"
            app:layout_constraintLeft_toRightOf="@+id/sv"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent"
    />
</androidx.constraintlayout.widget.ConstraintLayout>

fv View를 0.8 만큼 여백을 주었습니다.

weight

weight을 통해서 비율을 통해서 정할수가 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                                   xmlns:app="http://schemas.android.com/apk/res-auto"

                                                   android:id="@+id/container"
                                                   android:layout_width="match_parent"
                                                   android:layout_height="match_parent">

    <View
            android:id="@+id/fv"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@color/colorPrimary"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/sv"
            app:layout_constraintHorizontal_weight="0.3"
            app:layout_constraintHorizontal_chainStyle="spread"

    />
    <View
            android:id="@+id/sv"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@color/colorAccent"
            app:layout_constraintLeft_toRightOf="@+id/fv"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintHorizontal_weight="0.2"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/tv"
    />

    <View
            android:id="@+id/tv"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@color/colorPrimaryDark"
            app:layout_constraintLeft_toRightOf="@+id/sv"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintHorizontal_weight="0.5"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent"
    />
</androidx.constraintlayout.widget.ConstraintLayout>