Android constraintlayout uses chains to control linear groups
A chain is a set of views that are linked to each other by bidirectional position constraints. Views in the chain can be distributed vertically or horizontally.
The "head" view of the chain: the leftmost view in the horizontal chain and the topmost view in the vertical chain.
The "tail" view of the chain: the right most (end) side view in the horizontal chain and the bottom most view in the vertical chain.
To form a chain, the head and tail must be set. Take the horizontal chain as an example
Four textviews are arranged horizontally and evenly. Layout simply refers to each other as references.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="20dp"
android:background="#fff">
<TextView
android:id="@+id/tv1"
style="@style/ConSampleText"
android:layout_marginEnd="8dp"
android:background="#009688"
android:gravity="center"
android:text="R"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="@+id/tv2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv2"
style="@style/ConSampleText"
android:background="#009688"
android:gravity="center"
android:text="u"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="@+id/tv3"
app:layout_constraintStart_toEndOf="@+id/tv1"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv3"
style="@style/ConSampleText"
android:background="#009688"
android:gravity="center"
android:text="s"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="@+id/tv4"
app:layout_constraintStart_toEndOf="@+id/tv2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv4"
style="@style/ConSampleText"
android:background="#009688"
android:gravity="center"
android:text="t"
android:textColor="#ffffff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/tv3"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
style.xml
<style name="ConSampleText">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:padding">4dp</item>
<item name="android:textColor">#fff</item>
<item name="android:background">#3F51B5</item>
</style>
If you need the spread inside style, you need to set the "header" sub view: app: layout_ constraintHorizontal_ chainStyle="spread_inside"
<!-- ... -->
<TextView
android:id="@+id/tv1"
style="@style/ConSampleText"
android:background="#009688"
android:gravity="center"
android:text="R"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="@+id/tv22"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- ... -->
You can set sub views to allocate the remaining space in proportion. You need to set the width to 0dp first. And set app: layout_ constraintHorizontal_ Weight attribute.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="20dp"
android:background="#fff">
<TextView
android:id="@+id/tv1"
style="@style/ConSampleText"
android:layout_width="0dp"
app:layout_constraintHorizontal_weight="2"
android:background="#4CAF50"
android:gravity="center"
android:text="R"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="@+id/tv2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv2"
style="@style/ConSampleText"
android:layout_width="0dp"
android:background="#009688"
app:layout_constraintHorizontal_weight="1"
android:gravity="center"
android:text="u"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="@+id/tv3"
app:layout_constraintStart_toEndOf="@+id/tv1"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv3"
style="@style/ConSampleText"
android:background="#4CAF50"
android:gravity="center"
android:text="s"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="@+id/tv4"
app:layout_constraintStart_toEndOf="@+id/tv2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv4"
style="@style/ConSampleText"
android:background="#009688"
android:gravity="center"
android:text="t"
android:textColor="#ffffff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/tv3"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The first subview sets app: layout_ constraintHorizontal_ chainStyle="packed"
<!-- ... -->
<TextView
android:id="@+id/tv1"
style="@style/ConSampleText"
android:background="#009688"
android:gravity="center"
android:text="R"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="@+id/tv22"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- ... -->
There are many ways to divide the screen equally. For example, add a guideline to set the scale. Here we use chain to divide the screen or parent layout horizontally. Whether it is divided equally, 3 equally or 5 equally, the way is similar. Take 5 equal points as an example.
Segmented view, width set to 0dp, layout_ constraintHorizontal_ Set the weight to the same, such as 1.
Pay attention to setting app: layout for header view_ constraintHorizontal_ Chainstyle = "spread" and app: Layout_ constraintStart_ toStartOf="parent"； Pay attention to setting app: layout for the tail view_ constraintEnd_ toEndOf="parent"。
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="290dp"
android:layout_marginTop="8dp"
android:background="#ffffff">
<RelativeLayout
android:id="@+id/dc_start"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintEnd_toStartOf="@id/dc_2"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="center"
android:src="@drawable/pic_hj1" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/dc_2"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintEnd_toStartOf="@id/dc_3"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="@id/dc_start">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="center"
android:src="@drawable/pic_hj2" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/dc_3"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintEnd_toStartOf="@id/dc_4"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="@id/dc_2">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="center"
android:src="@drawable/pic_hj3" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/dc_4"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintEnd_toStartOf="@id/dc_tail"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="@id/dc_3">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="center"
android:src="@drawable/pic_hj4" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/dc_tail"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="@+id/dc_4">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="center"
android:src="@drawable/pic_hj5" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
The following are other considerations when using chains: