Constraint layout ConstraintLayout basic use

foreword

Constraint Layout ConstraintLayout, as the layout layout file officially recommended by Google, is a ViewGroup similar to LinearLayout and Relativelayout.
The emergence of constraint layout is mainly to make the layout design more flat, optimize the layout nesting problem, and be able to adjust and control the sub-Views more flexibly.

Constraint Layout supports the use of API 9 and above on the Android system.

1. Package import

To use ConstraintLayout, you need to import the corresponding package, and build.gradleintroduce the following content in the file:

    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

2. Basic use

Constraint layout already supports a lot of functions, mainly including the following parts:

relative positioning
Angle positioning
visibility behavior
size limit
the chain
virtualization helper object
optimizer

Below we will explain the above contents one by one.

1. Relative positioning

Relative positioning is used to control the positional relationship of sub-Views inside ConstraintLayout. It is similar to relative layout Relativelayout. It can start from a View and gradually locate the relative positional relationship of other sub-Views. The main setting attributes it contains mainly include There are four aspects: up, down, left, and right. The attribute names are as follows:

layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

It is easy to confuse this attribute. You can simply think that the previous direction is the direction edge of the current sub-View, and the latter direction refers to the direction edge of the View. Taking layout_constraintBottom_toTopOf as an example, what you set is the bottom (bottom) of the current View At the top of the reference View (top).

The above attributes include one layout_constraintBaseline_toBaselineOf, which refers to the center reference line, which can make the center reference lines of two side-by-side Views at the same level. The reference line is as follows:

Relative positioning 1.jpg

center positioning

If the starting point of the current control you set refers to the two Views and your current control size cannot completely fill the gap between the two reference controls, the currently set control will be stretched by the reference View in both directions, so that Your current control has a centering effect, the example is as follows:
we set the left and right of the current button to point to the parent,

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

The actual effect is as follows:

Center Positioning 1.jpg

biased positioning

If you need to achieve a bias effect, so that the current control is no longer centered but more biased to the left and right, you can biasachieve it by defining additional properties. This property is used to set the percentage value on the left and top. The smaller the value, the closer the current control will be to the left or top. If the center is not set, the default is 0.5.

bias can bias the constraint to one side, the default is 0.5
layout_constraintVertical_bias //vertical (0: top, 1: bottom)
layout_constraintHorizontal_bias//horizontal (0: leftmost, 1: rightmost)

For example, if we want to be
30% more to the left, we can set

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.3"

The effect is as follows:

2. Angle positioning

In addition to the basic relative positioning mentioned above, the constraint layout also supports angular relative positioning. The specific direction is to use the positive semi-axis of the Y axis as the starting line of rotation, and rotate clockwise to calculate the angle. The example picture is as follows:
Angle positioning.png

The main parameters of angle positioning mainly include three items: positioning origin View, rotation angle, and distance, which are processed by the following three items:

<!--定位原点View-->
app:layout_constraintCircle="@id/tv_testA"
<!--旋转角度-->
app:layout_constraintCircleAngle="120"
<!--距离-->
app:layout_constraintCircleRadius="120dp"

3. Visibility behavior

When the constraint layout is set to Gone to hide the current control, the current control is parsed into a point, and the constraints for other controls still exist, but the margin setting of the hidden View itself will be ignored. The specific example is as follows:
Visibility Behavior.png

When View A is set to be invisible, its constraints on View B still exist, but the left margin of View A itself will also be hidden at the same time.

goneMargin

You can use the property to set a different margin value when the visibility of the position constraint target View.GONEis . As shown in the figure above, if View B is set , when View A is set to , the distance from View B to the left margin is 10dp.goneMargin
app:layout_goneMarginLeft="10dp"View.GONE

4. Size restrictions

——— Size constraints

When the size of the constraint layout is set wrap_contentto , you can set its maximum size and minimum size, and the setting parameters are as follows:

android:minWidth 设置布局的最小宽度
android:minHeight 设置布局的最小高度
android:maxWidth 设置布局的最大宽度
android:maxHeight 设置布局的最大高度

Use 0dp, equivalent to **MATCH_CONSTRAINT**, the default behavior is to make the resulting size occupy all available space, which can be replaced match_parent.

percentage dimension

When the size is set to MATCH_CONSTRAINT , percentage settings can be used, and the properties are as follows:

app:layout_constraintWidth_default="percent"
app:layout_constraintHeight_default="percent"

Then set the layout_constraintWidth_percentand layout_constraintHeight_percentproperty to a value between 0 and 1 to make the percentage of the current control.

The example is as follows, we set the width percentage of the current control to 0.33, and the height percentage to 0.5, the code is as follows:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".constraintlayout.TestConstraintLayoutActivity">

    <TextView
        android:id="@+id/tv_testA"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/black"
        android:padding="10dp"
        android:text="test text"
        app:layout_constraintVertical_bias="0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.33" />


</androidx.constraintlayout.widget.ConstraintLayout>

The effect is as follows:
Constraint layout percentage.jpg

aspect ratio setting

When at least one dimension of the width or height is set to 0dp, app:layout_constraintDimensionRatio="m:n"the aspect ratio of the current control can be set through the property.
In the property default , m is the width and n is the height. You can also specify m as height or width, you need to add H or W. like:

app:layout_constraintDimensionRatio="H,2:3"指的是 高:宽=2:3
app:layout_constraintDimensionRatio="W,2:3"指的是 宽:高=2:3

The example effect is as follows:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".constraintlayout.TestConstraintLayoutActivity">

    <TextView
        android:id="@+id/tv_testA"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/black"
        android:padding="10dp"
        android:layout_marginTop="@dimen/dp_52"
        android:text="test text"
        app:layout_constraintDimensionRatio="1:2"
        app:layout_constraintVertical_bias="0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent="0.2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

aspect ratio.jpg

3. Chain

The chain is also a group behavior usage in the constraint layout, and the chain group can be operated on one axis.
As shown below:

When a group of components are linked together by bidirectional connections, they can be considered as a chain, where the first element is called the head of the chain. code show as below:

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/TextView2" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView1"
        app:layout_constraintRight_toLeftOf="@+id/TextView3"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView2"
        app:layout_constraintRight_toRightOf="parent" />

After setting the chain header, we can add attributes to the chain header to adjust the style of the entire chain. There are three styles in total:

CHAIN_SPREAD -- elements will be spread (default style)

Weighted Chain - In CHAIN_SPREAD mode, if certain widgets are set to MATCH_CONSTRAINT, they will split the available space, using layout_constraintHorizontal_weightand layout_constraintVertical_weightto control the weight of each element individually.

CHAIN_SPREAD_INSIDE -- similar, but the endpoints of the chain are not spread out
CHAIN_PACKED - elements of the chain will be packed together. The horizontal or vertical offset properties of child elements will affect the positioning of the wrapped element

The example effect is as follows:
Chain style.jpg

3. Auxiliary tools

1. Barrier

Barrier can set a dividing line for us so that we can adjust the layout.
For example, we have 3 controls, where testB is below testA, and testC is on the right of A and B. If the lengths of A and B are not fixed at this time, then the constraint dependency of C is incorrect whether it is A or B. , which may cause occlusion.

Using Barrier can solve this problem. Barrier can generate a dividing line based on the right side of A and B, so that the C constraint depends on this dividing line. The sample code is as follows:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".constraintlayout.TestConstraintLayoutActivity">

    <TextView
        android:id="@+id/tv_testA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dp_52"
        android:background="@color/colorAccent"
        android:padding="10dp"
        android:text="testA"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_testB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dp_52"
        android:background="@color/colorAccent"
        android:paddingHorizontal="@dimen/dp_30"
        android:paddingVertical="@dimen/dp_10"
        android:text="testB"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_testA" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="tv_testA,tv_testB" />

    <TextView
        android:id="@+id/tv_testC"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/dp_20"
        android:layout_marginTop="@dimen/dp_24"
        android:background="@color/colorAccent"
        android:padding="10dp"
        android:text="testC"
        app:layout_constraintLeft_toRightOf="@id/barrier1"
        app:layout_constraintTop_toTopOf="@id/tv_testA" />

</androidx.constraintlayout.widget.ConstraintLayout>

app:barrierDirection is the location of the barrier, you can set up, down, left, and right directions respectively.
app:constraint_referenced_ids is the control referenced by the barrier, multiple settings can be set (separated by ",")

Effect:

The dividing line is not actually displayed, it is only used for constraint dependencies.

2. Group

Group can group multiple controls into one group, which is convenient for hiding or displaying the statistics of the controls in the current group. Its usage is similar to that of a barrier, which is to set attributes. The example is as follows, hide constraint_referenced_idsand tv_testAtogether tv_testB:

    <androidx.constraintlayout.widget.Group
        android:visibility="gone"
        app:constraint_referenced_ids="tv_testB,tv_testA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

reference documents

Official Documentation for Constraint Layout