[Android] The most complete analysis of ConstraintLayout constraint layout

1. Overview of ConstraintLayout

ConstraintLayoutIt is Android官方a new layout method that can flexibly control the position and size of sub-controls introduced at Google's I/O conference in 2016. It is also the most powerful layout among the current Android layouts. In the latest version Android Studio中, the default root element for creating layout files is ConstraintLayoutgone.

Advantages of ConstraintLayout

ConstraintLayoutThe reason why it has become the mainstream layout in the current Android development, in addition to the official recommendation to use ConstraintLayout, has the following advantages

1. Powerful, ConstraintLayout can almost achieve other layouts所有的功能

2. Can reduce the nesting of layout levels, there are性能的优势

3. The enhancement of visual operation, most of the interface can 可视化编辑be completed through the area with ConstraintLayout

2. ConstraintLayout Basics

2.1 Basic Operation

The default layout method in Android Studio is constraint layout. Adding controls in constraint layout is very simple, just drag the control from the left Palettearea to the middle interface editing area.

In the constraint layout, click any control, and a circle will appear in the four directions of the control, up, down, left, and right, and the circle represents the constraints that can be added.

When you move the mouse to the circle, press and hold the left mouse button, then move the mouse to any edge of the parent layout, up, down, left, and right, and then release the mouse to add constraints to the direction. After adding the constraints, the circle will change from a hollow circle to a solid one. Circle, and the control will also move to the edge of the direction that the parent layout adds constraints.

When constraints are added to both the top and bottom directions of a control, the control will be centered in the vertical direction. Similarly, if constraints are added to the left and right directions of a control, the control will be centered in the horizontal direction.

If you want to remove the constraint for a control, after selecting the control, Layoutclick the symbol in the direction in the upper right corner area to ×remove the constraint in the direction.

You can also drag the Layout区域sum to control the ratio of constraints on the left and right and up and down directions. The smaller the value, the further left and top the control will be.水平条垂直条

After adding a constraint to a certain direction of the control, the control will be close to the edge of the parent layout of the direction constraint by default. You can set the distance between the direction and the edge of the parent layout in the Layout area of ​​the control.

2.2 Add constraints between controls

In constraint layout, in addition to adding constraints to the edge of the parent layout for a control, you can also add the constraints of a control to another control. The method of adding constraints is the same as adding the parent layout. When adding constraints to the left side of a control to the left side of another control, the left edge of the control will be flush with the left edge of the other control. Add constraints to the bottom edge of one control to the top edge of another control, and the control will stick to the top edge of another control

If you add constraints to the left and right sides of a control to the two sides of another control, and the sizes of the two controls are different, then the central axes of the two controls will be aligned.

2.3 Constraint layout xml code implementation

Although it is relatively simple to use the visual area to write the layout, it is faster to fine-tune the xml code for some layouts. To master the constraint layout proficiently, learning to write the constraint layout with the xml code is also a necessary skill.

Add constraints to the parent layout

• app:layout_constraintBottom_toBottomOf="parent"Bottom constraint
• app:layout_constraintEnd_toEndOf="parent"right constraint
• app:layout_constraintStart_toStartOf="parent"left constraint
• app:layout_constraintTop_toTopOf="parent"Top Constraint
  Here, Strat and End can be replaced by Left and Right.
  
  Add constraints to other controls
• app:layout_constraintBottom_toTopOf="@+id/button3"Bottom adds constraints to top of other controls
• app:layout_constraintEnd_toEndOf="@+id/button3"Add constraints to the right of other controls on the right
• app:layout_constraintStart_toStartOf="@+id/button3"Add constraints to the left of other controls on the left
  

3. Advanced ConstraintLayout

3.1 Chains

Attributes in LinearLayoutthe layout weightcan realize the proportional allocation of child controls to the controls of the parent layout, and the same function can be achieved through the Chains chain in ConstraintLayout, and the function of the Chains chain is more powerful than the attributes in LinearLayoutthe layout .weight

Chains链The basic usage of is as follows: select multiple controls, right-click Chains-> Create Horizontal Chainsto evenly distribute the remaining space of the parent layout.

Chains链There are three allocation methods for the remaining space of the parent control, namely Spread, spread inside, and packed. The default value is that Spread will include the first control and the last control on both sides

spread inside.

spread insideThe value indicates that all controls are next to each other, and the remaining space of the parent control is evenly distributed on both sides of the first control and the last control

3.2 Size constraints

In other layouts, the size unit of the control has three values wrap_content: dp fixed value and match_parentthree values. The control in the constraint layout can also be set MATCH_CONSTRAINT(0dp). The meaning of this value represents the constraint size, that is, the size of the control is determined by the constraints on its left and right sides. control.

give a chestnut

For example, the homepage of many apps is composed of 底部bannerand 顶部fragment, and the height of the fragment is usually not fixed. If you use other layouts, the height of the fragment is difficult to adjust. At this time, you can dynamically adjust the size and height of the fragment, and MATCH_CONSTRAINT(0dp)set the height of the fragment on the top. The height is 0dp, and a constraint is added to its top and bottom. At this time, its height is from the top of the parent layout to the top of the bottom control.

<?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=".MainActivity">

    <TextView
        android:id="@+id/textView4"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@color/purple_200"
        android:text="底部banner"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/teal_200"
        android:gravity="center"
        android:text="顶部fragment"
        app:layout_constraintBottom_toTopOf="@+id/textView4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

3.3 Percentage layout

ConstraintLayout also supports the size of the control to be set as a percentage of the parent layout size

• app:layout_constraintWidth_percent The width accounts for the percentage of the parent layout

• app:layout_constraintHeight_percent height as a percentage of the parent layout

tips:只有宽度和高度尺寸为0dp百分比属性才会生效

3.4 radio properties

The banner image of some apps is usually set according to a certain ratio, such as 16:9, 1:1, etc. If the width of other layout images is set to match_parent, the height of the image needs to be dynamically calculated according to the ratio, which is very troublesome. radioIt is easy to achieve such requirements through attributes in constraint layout .

Set the width and match_parentheight of the picture as the constraint size 0dp, and then add an layout_constraintDimensionRatioattribute, the value of the attribute can be set h,16:9where h represents the ratio of the aspect ratio, or can be set to set the value w,9:16, and w represents the ratio of the aspect ratio.

3.5 Circular positioning

ConstraintLayout also supports 圆型定位constraining the center of a control to the center of another control at a certain angle and distance, which is equivalent to placing a control on a circle.

Circular positioning is mainly controlled by the following three attribute values

• layout_constraintCircle: Refers to the id of another control.

• layout_constraintCircleRadius: The distance to the center of another control.

• layout_constraintCircleAngle: The angle of the control (clockwise, 0 - 360 degrees).
  

Four, ConstraintLayout advanced articles

4.1 Guideline

GuidelineIt is a tool class in the ConstraintLayout layout. Its function is equivalent to an auxiliary line. It is invisible by default and can be used for辅助布局

• layout_constraintGuide_percent: Set the position of the auxiliary line according to the proportion
• layout_constraintGuide_begin: Set the position of the auxiliary line according to the value

The position of the Guideline auxiliary line can be set either by percentage or by value.

4.2 Group

Group can set the visibility value for a group of controls at the same time Visible、Invisible或者Gone.
Its use method is as follows: Right-click to add a Group in the layout, then drag a group of controls into the Group, and adjust the visibility of a group of controls by controlling the properties of the Group.

4.3 Barrier

Barrier, like Guideline, is invisible by itself, and the user assists in layout.

If there is such a requirement, there are two Button1 and Button2, and one TextView3 in the page, and now TextView3 needs to be placed on the right side of Button1 or Button2 to align the wider controls in Button1 and Button2.

If the left constraint of TextView3 is added to Button1, when Button2 is wider, TextView3 will be blocked. When Barrier is not used, it is necessary to add another layer of layout to put Button1 and Button2 in the layout to achieve this requirement.

Use the solution of Barrier:
1. First, right-click in the editing area to add a vertical Barrier, and drag Button1 and Button2 into the Barrier. 2: Set the property

of the Barrier to , which indicates that other controls are aligned to the right of the barrier control. controlbarrierDerectionrightright

3. Add the constraint on the left side of textview3 to Barrier

The test results are as follows