What is a ConstraintLayout

ConstraintLayout, also known as ConstraintLayout, is Google’s favorite layout that supports all the features of a RelativeLayout and is even more powerful. The biggest advantage is that the layout nesting level is greatly reduced and the interface drawing speed is improved. But know that every coin has two sides. The other side of power is complexity.

Based on the sample

1. Locate a single control relative to the parent control

rendering

code

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Centered text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

• Code description:

1. App :layout_constraintBottom_toBottomOf aligns the bottom of the current control with the bottom of the target control.
2. App :layout_constraintLeft_toLeftOf sets the alignment between the left side of the current control and the left side of the target control.
3. App :layout_constraintRight_toRightOf, aligns the right side of the current control with the right side of the target control.
4. App :layout_constraintTop_toTopOf, aligns the top of the current control with the top of the target control.

• Preview layout view

Each solid dot and spring connected to the dot in the figure above corresponds to each of the above properties: the left corresponds to:app:layout_constraintLeft_toLeftOf; Corresponding to the right:app:layout_constraintRight_toRightOf; Corresponding to:app:layout_constraintTop_toTopOfThe following corresponds:app:layout_constraintBottom_toBottomOf

2. Align sibling controls with sibling controls

Set one side of the control and the target control (sibling control) alignment, such as left alignment, right alignment.

rendering

code

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/centerButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Center button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Left button"
        app:layout_constraintBottom_toBottomOf="@id/centerButton"
        app:layout_constraintRight_toLeftOf="@id/centerButton" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Right button"
        app:layout_constraintBottom_toBottomOf="@id/centerButton"
        app:layout_constraintLeft_toRightOf="@id/centerButton" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button up"
        app:layout_constraintBottom_toTopOf="@id/centerButton"
        app:layout_constraintLeft_toLeftOf="@id/centerButton" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bottom button"
        app:layout_constraintLeft_toLeftOf="@id/centerButton"
        app:layout_constraintTop_toBottomOf="@id/centerButton" />
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

• Code description:

1. App :layout_constraintRight_toLeftOf, aligns the right side of the current control with the left side of the target control (parent means parent control).
2. App :layout_constraintLeft_toRightOf sets the alignment between the left of the current control and the right of the target control.
3. App :layout_constraintBottom_toTopOf sets the alignment between the bottom of the current control and the top of the target control.
4. App :layout_constraintTop_toBottomOf sets the alignment between the top of the current control and the bottom of the target control.

• Preview layout view

The two solid dots on each control correspond to two constraint properties set in the control.

Basic sample complete source code

Gitee.com/hspbc/Const…

Common Attributes

More properties and actual effects can be experienced in the development tool.

About me

Xiamen university computer professional | huawei eight years senior engineer Ten years software development experience, 5 years experience in teaching programming training Currently engaged in the teaching of programming, software development, software class graduation design guidance. All programming materials and open source projects can be found at juejin.cn/post/700279…