ConstraintLayout is similar to a RelativeLayout in that all views are laid out according to the relationship between the sibling view and the parent layout, but with more flexibility than a RelativeLayout for creating large, complex layouts.

The official tutorial address: developer. The android. Google. Cn/training/co…

First, basic use

1.1 Adding to a Project

  1. In the build.gradle file at the root of your project declare:

        repositories {
        google()
    }
    
Copy the code

  2. Add the library as a dependency to your project’s build.gradle file, as shown in the following example

    dependencies {
    implementation "Androidx. Constraintlayout: constraintlayout: 2.0.4."
    // To use constraintlayout in compose
    implementation "Androidx. Constraintlayout: constraintlayout - compose: 1.0.0 - alpha07"
}
Copy the code

1.2 Basic Usage

Constraints are as follows:

For example, the following simple layout has a button in the upper left corner of the screen

The corresponding layout code is as follows:


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

  <Button
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="test"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

Where parent represents the parent layout.

Note: in the layout of a binding unless wide high set to match_parent, or any other scenarios need to be set on the (| |) && (l | | right) constraints, can appear otherwise the compiler error warning.

Second, the layout is centered

Horizontally centered:

Set constraintLeft and constraintRight, centered on the view of the left and right constraints.


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

  <Button
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="test"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

Vertically centered:

Set constraintTop and constraintBottom, centered according to the view of the constraint.

  <Button
    android:id="@+id/btn"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="test"/>
Copy the code

Center sets the offset scale

Set layout_constraintVertical_bias and layout_constraintHorizontal_bias

Layout_constraintVertical_bias: indicates a vertical offset. The value ranges from 0 to 1, where 0 indicates the top and 1 indicates the bottom

Layout_constraintHorizontal_bias: indicates the horizontal offset. The value ranges from 0 to 1. 0 indicates the leftmost offset and 1 indicates the rightmost offset

3. Chain control linear group

Set layout_constraintHorizontal_chainStyle or layout_constraintVertical_chainStyle to control a set of controls in a chained manner, for example:

1 Spread: Evenly distributed views. This property is default

2 Packed: Views are Packed together

3 Spread inside: The first and last views are fixed at both ends of the chain

4 Weighted: Weighted layout, layout_width = 0dp, layout_constraintHorizontal_weight Sets the weight

A chain is a set of views that are linked to each other by bidirectional position constraints, that is, the views in the chain above can be distributed vertically or horizontally. The chainStyle is set by the first view of the chain.


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

  <Button
    android:id="@+id/btn1"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@id/btn2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="btn1"/>

  <Button
    android:id="@+id/btn2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@id/btn1"
    app:layout_constraintRight_toLeftOf="@id/btn3"
    app:layout_constraintTop_toTopOf="@id/btn1"
    android:text="btn2"/>

  <Button
    android:id="@+id/btn3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@id/btn2"
    app:layout_constraintTop_toTopOf="@id/btn1"
    app:layout_constraintRight_toRightOf="parent"
    android:text="btn3"
    />

  <Button
    android:id="@+id/btn4"
    android:layout_marginTop="64dp"
    app:layout_constraintTop_toBottomOf="@id/btn1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@id/btn5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="btn4"
    app:layout_constraintHorizontal_chainStyle="packed"/>

  <Button
    android:id="@+id/btn5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@id/btn4"
    app:layout_constraintRight_toLeftOf="@id/btn6"
    app:layout_constraintTop_toTopOf="@id/btn4"
    android:text="btn5"/>

  <Button
    android:id="@+id/btn6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@id/btn5"
    app:layout_constraintTop_toTopOf="@id/btn4"
    app:layout_constraintRight_toRightOf="parent"
    android:text="btn6"/>

  <Button
    android:id="@+id/btn7"
    android:layout_marginTop="64dp"
    app:layout_constraintTop_toBottomOf="@id/btn4"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@id/btn8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="btn7"
    app:layout_constraintHorizontal_chainStyle="spread_inside"/>

  <Button
    android:id="@+id/btn8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@id/btn7"
    app:layout_constraintRight_toLeftOf="@id/btn9"
    app:layout_constraintTop_toTopOf="@id/btn7"
    android:text="btn8"/>

  <Button
    android:id="@+id/btn9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@id/btn8"
    app:layout_constraintTop_toTopOf="@id/btn7"
    app:layout_constraintRight_toRightOf="parent"
    android:text="btn9"/>

  <Button
    android:id="@+id/btn10"
    android:layout_marginTop="64dp"
    app:layout_constraintTop_toBottomOf="@id/btn7"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@id/btn11"
    android:layout_width="0dp"
    app:layout_constraintHorizontal_weight="1"
    android:layout_height="wrap_content"
    android:text="btn10"
    app:layout_constraintHorizontal_chainStyle="spread_inside"/>

  <Button
    android:id="@+id/btn11"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintHorizontal_weight="2"
    app:layout_constraintLeft_toRightOf="@id/btn10"
    app:layout_constraintRight_toLeftOf="@id/btn12"
    app:layout_constraintTop_toTopOf="@id/btn10"
    android:text="btn11"/>

  <Button
    android:id="@+id/btn12"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintHorizontal_weight="2"
    app:layout_constraintLeft_toRightOf="@id/btn11"
    app:layout_constraintTop_toTopOf="@id/btn10"
    app:layout_constraintRight_toRightOf="parent"
    android:text="btn12"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

Four, guide line constraints

Vertical or horizontal bootlines can be added to constrain the view and cannot be seen by the application user. Guide lines can be positioned in the layout based on dp units or percentages relative to the edge of the layout.

  <androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintGuide_percent="0.5"/>

  <Button
    android:id="@+id/btn1"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_width="wrap_content"
    app:layout_constraintLeft_toRightOf="@id/guideline"
    android:layout_height="wrap_content"
    android:text="btn1"/>
Copy the code

Orientation is set to vertical or horizontal orientation. Layout_constraintGuide_percent supports percentile orientation, ranging from 0 to 1.

Since the percentage of layout_margin cannot be set, we can use Guideline instead.

Five, to achieve the effect of coverage layout

In the figure above, this overlay is achieved through the layout sequence, which is below the BTN1 control in the BTN2 control layout.

Because ConstraintLayout cannot have a negative margin, you can override the top half of the control with guides and other AIDS.

<androidx.constraintlayout.widget.Guideline
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.5"
    android:id="@+id/space"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

  <Button
    android:background="@color/colorAccent"
    android:layout_marginTop="32dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn1"
    android:text="btn1"
    app:layout_constraintTop_toBottomOf="@id/space"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"/>

  <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn2"
    android:text="btn2"
    android:layout_marginStart="64dp"
    android:background="@color/reset_totp_indicator_color"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/space"/>

Copy the code

6. Percentage layout

Layout_constraintHeight_percent and layout_constraintWidth_percent support setting the width and height of the control by percentage. The value ranges from 0 to 1.

  <Button
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:text="btn1"
    app:layout_constraintHeight_percent="0.3"
    app:layout_constraintWidth_percent="0.5"
    android:background="@color/reset_totp_indicator_color"/>
Copy the code

Layout_width and layout_height must be set to 0DP to take effect.

7. Constraint failure problem

Constraints are invalid when setting wrAP_content and then setting constraints, for example:

 <TextView
    android:text="sdfsfdsdfsdfssdfsdfsdfdsfdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/tv_username"
    android:textColor="@color/find_pass_text_color"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@id/btn1"
    android:maxLines="1"
    android:ellipsize="end"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintHorizontal_bias="0"
    />

  <Button
    android:id="@+id/btn1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:text="btn1"
    app:layout_constraintHeight_percent="0.3"
    app:layout_constraintWidth_percent="0.5"
    android:background="@color/colorAccent"/>
Copy the code

Although the constraint app:layout_constraintRight_toLeftOf=”@id/btn1″ is set, it does not take effect.

Set layout_constrainedWidth to true and the effect is as follows:

  <TextView
    android:text="sdfsfdsdfsdfssdfsdfsdfdsfdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/tv_username"
    android:textColor="@color/find_pass_text_color"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@id/btn1"
    android:maxLines="1"
    android:ellipsize="end"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintHorizontal_bias="0"
    app:layout_constrainedWidth="true"
    />

  <Button
    android:id="@+id/btn1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:text="btn1"
    app:layout_constraintHeight_percent="0.3"
    app:layout_constraintWidth_percent="0.5"
    android:background="@color/colorAccent"/>
Copy the code

8. Set the maximum and minimum view sizes

Sometimes, when you fit different screens, you don’t want the size to stretch out indefinitely as the screen gets bigger, so layout_constraintWidth_max, layout_constraintHeight_max, Layout_constraintWidth_min, layout_constraintHeight_min Sets the maximum or minimum width.

Layout_constraintWidth_percent is required for the layout_constraintWidth_percent layout to take effect.

  <Button
    android:id="@+id/btn1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    android:text="btn1"
    android:background="@color/colorAccent"
    app:layout_constraintWidth_percent="0.85"
    />
Copy the code

Set the maximum width to 200dp. After modification, the following information is displayed:

  <Button
    android:id="@+id/btn1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    android:text="btn1"
    android:background="@color/colorAccent"
    app:layout_constraintWidth_percent="0.85"
    app:layout_constraintWidth_max="200dp"
    />
Copy the code