Constraint layout introduction

A ConstraintLayout is a android.view.ViewGroup which allows you to position and size widgets in a flexible way

Implementation 'androidx. Constraintlayout: constraintlayout: 2.0.0 -beta3'

Constrained layout, as a layout method promoted by Google, can be described as a collection of thousands of favorites:

  • High performance: the interface can basically be laid out in one layer, without nesting multiple layers of layout.
  • Powerful: percentage layout, set their own width and height ratio, various auxiliary components.
  • Explain, interpret, and drag edit: this is not recommended. Explain, interpret and drag edit

The disadvantage is that after using the constraint layout, you can no longer go back to the previous layout, heavily dependent.

TODO: custom Helper and motionLayout for TODO 2.0 are not yet understood.

Basic layout

2.1 Basic Layout Attributes

From the name, you probably have a rough idea of its alignment (that is, which side of itself is aligned with which side of the target view), but I won’t go into all the details.

ConstraintLayout alignment
app:layout_constraintStart_toStartOf Align left of self with left of target
app:layout_constraintStart_toEndOf Align left of self with right of target
. .

Think of the alignment of the placement of constraints as the tension of high school physics. App :layout_constraintStart_toStartOf: the left side of itself is pulled by the left side of the target view; App :layout_constraintEnd_toEndOf: the right side of itself is pulled by the right side of the target view

If a button is to be centered in the parent layout, its top, bottom, left, and right are pulled by the top, bottom, left, and right of the parent layout:

<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=" I want to center "Android :textSize=" 20SP" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>Copy the code

2.2 Offset bias

Constraint layouts also provide a function to set offsets. For example, now that the center display is boring, lean a little to the left. It can be understood that I want the pull on the left side to be higher, so I can set bias to achieve this.

  • App :layout_constraintHorizontal_bias: horizontal offset, ranging from 0F to 1.0F (0 to the left, 1 to the right)
  • App :layout_constraintVertical_bias: offset in the vertical direction, ranging from 0F to 1.0F (0 means at the top and 1 means at the bottom)
...
app:layout_constraintHorizontal_bias="0.2"
...

Copy the code

2.3 margin

Margin is set in the same way as before, android:layout_marginXXX, except that in order for margin to work, there must be constraint tension in the same direction. So to marginBottom you must have an app:layout_constraintBottom_toXXXOf

Three Size Settings

3.1 Three size setting modes under constraint layout

In constraint layout, MATCH_PARENT is not used, WRAP_CONTENT is retained, and three unique size setting modes of constraint layout can be used: spread, wrap, percent; All three can be set via app:layout_constraintWidth_default or app:layout_constraintHeight_default.

Note: To use constraint layout size Settings, you need to specify the width or height of the setting to be 0dp

3.1.1 Spread: Default

App :layout_constraintXXX_default=”spread”, which is the default, indicating the maximum size under constraints;

If the width of view is 0dp and the left side is aligned to the right of ViewA and the right side is aligned to the left of ViewB, then the left side will be stretched to the right of ViewA and the right side to the left of ViewB.

. <TextView android:id="@+id/viewA" android:layout_width="100dp" android:layout_height="100dp" android:gravity="center" android:textSize="20sp" android:text="ViewA" android:textColor="@android:color/white" android:background="@android:color/holo_red_dark" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/viewB" android:layout_width="100dp" android:layout_height="100dp" android:gravity="center" android:textSize="20sp" android:text="viewB" android:textColor="@android:color/white" android:background="@android:color/black" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button Android :layout_width="0dp" Android :layout_height="100dp" Android :text=" I want to be stretched "Android :textSize="20sp" android:layout_marginStart="30dp" android:layout_marginEnd="30dp" app:layout_constraintStart_toEndOf="@id/viewA" app:layout_constraintEnd_toStartOf="@id/viewB" app:layout_constraintTop_toTopOf="parent" /> ...Copy the code

3.1.2 wrap mode

App :layout_constraintWidth_default=”wrap” : adaptive size, but not exceeding the maximum size under constraints.

As in the previous example, WRAP_CONTENT will exceed the constraint if the content is large, as shown in the figure below:

<Button android:layout_width="wrap_content" Android :layout_height="wrap_content" Android :text=" wrap_content" android:textSize="20sp" app:layout_constraintWidth_default="wrap" app:layout_constraintStart_toEndOf="@id/viewA" app:layout_constraintEnd_toStartOf="@id/viewB" app:layout_constraintTop_toTopOf="parent" />Copy the code

When the wrap mode is specified, the constraint is preserved:

. android:layout_width="0dp" app:layout_constraintWidth_default="wrap" ...Copy the code

In addition, for the traditional WRAP_CONTENT mode, the constraint layout has additional attributes that make it possible to preserve the constraint: app:layout_constrainedWidth=”true” now has the same effect as the wrap mode.

3.1.3 percent mode

App :layout_constraintWidth_default=”percent” : Uses the percentage of the parent layout as its own size. (This feature can be used to solve some common adaptations), use app:layout_constraintWidth_percent to set the scale size, 0F-1.0F

. Android: layout_width = "0 dp" app: layout_constraintWidth_default = "percent" app: layout_constraintWidth_percent = "0.8"...Copy the code

3.1.4 Specifying ratio

App: layout_constraintDimensionRatio: constraint layout can also specify the view itself wide high percentage.

The value can be “width:height” or “width/height”, if the width is twice the height: App: layout_constraintDimensionRatio = “2:1 or” app: layout_constraintDimensionRatio = “2”

For this to work, the corresponding width or height must be set to 0dp. For example, if the width is 0dp and the height is 10dp, app:layout_constraintDimensionRatio=2:1, the width is 20dp.

If the width and height are both 0dp, the final size is set to the maximum size that fits the constraint, while maintaining the set scale. So sometimes the result is not what we want, we can specify the width or height (H,W) which side of the constraint determines the size, which side determines the size by the scale;

For example, if app:layout_constraintDimensionRatio=”W,2:1″, the width is calculated in proportion to the final dimension, while the height is calculated according to the constraint condition; App :layout_constraintDimensionRatio=”H,2:1″ the opposite. You can try it yourself.

3.1.5 Maximum and Minimum Values (Max /min)

This means the same as the attribute name:

  1. app:layout_constraintHeight_min
  2. app:layout_constraintWidth_min
  3. app:layout_constraintHeight_max
  4. app:layout_constraintWidth_max

Four chain layout

Chain layout is another powerful feature commonly used in constrained layout, which can quickly achieve equal layout, etc., but also achieve weight function similar to LinearLayout.

Constraint chains have three modes:

  • Spread: Evenly distributed among views
  • Spread_inside: Spread evenly, except that the head and tail of the constraint chain are attached to the sides
  • Packed: All Views are snugly together and center by default

(GIF is seen on Medium, the original link is not found immediately)

4.1 Building constraint chains

The constraint chain has horizontal and vertical directions.

Constructing multiple views into a horizontal chain requires multiple views to be constrained in pairs horizontally

<ImageView android:id="@+id/img1" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/img1" android:scaleType="centerCrop" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toStartOf="@+id/img2" android:layout_marginTop="20dp"  /> <ImageView android:id="@+id/img2" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/img2" android:scaleType="centerCrop" app:layout_constraintStart_toEndOf="@id/img1" app:layout_constraintTop_toTopOf="@id/img1" app:layout_constraintEnd_toStartOf="@+id/img3" /> <ImageView android:id="@+id/img3" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/img3" android:scaleType="centerCrop" app:layout_constraintStart_toEndOf="@id/img2" app:layout_constraintTop_toTopOf="@id/img1"  app:layout_constraintEnd_toEndOf="parent" />Copy the code

This creates a horizontal chain of constraints. Similarly for the vertical view, keep the view constrained in pairs vertically.

4.2 Change the chain mode

The first view of the chain, img1, is called the header. Set app:layout_constraintHorizontal_chainStyle or APP :layout_constraintVertical_chainStyle to set the horizontal or vertical chain mode respectively.

  1. Spread (default) :
app:layout_constraintVertical_chainStyle="spread"
Copy the code

  1. Spread_inside:

  1. The packed:

4.3 Setting Weights on the Chain

App :layout_constraintHorizontal_weight/app:layout_constraintVertical_weight sets the weights on the horizontal and vertical chains respectively

Note: For this to work, you must specify a size of 0dp

   <ImageView
        android:id="@+id/img1"
        android:layout_width="0dp"
        android:layout_height="100dp"
        app:layout_constraintHorizontal_weight="1"
        ...
        />

    <ImageView
        android:id="@+id/img2"
        android:layout_width="0dp"
        android:layout_height="100dp"
        app:layout_constraintHorizontal_weight="2"
        ...
        />

    <ImageView
        android:id="@+id/img3"
        android:layout_width="0dp"
        android:layout_height="100dp"
        app:layout_constraintHorizontal_weight="2"
       ...
        />
Copy the code

Five circle layout

Constraint layouts also provide a cool circular layout: you can constrain the center of one view relative to the center of another view by Angle and distance.

The actual development has not been used, the realization of similar horological effect is very good.

  • App :layout_constraintCircle: the center of the circle. The value is the ID of a view

  • App: layout_constraintCircleRadius: radius

  • App :layout_constraintCircleAngle: the Angle ranges from 0 to 360, with 0 indicating the top of the circle

<ImageView
        android:id="@+id/img4"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/img3"
        android:scaleType="centerCrop"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

    <ImageView
        android:id="@+id/img5"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/img5"
        android:scaleType="centerCrop"
        app:layout_constraintCircle="@id/img4"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="180dp"
        />
Copy the code

Vi Auxiliary Components

Constraint layouts also provide a set of components that allow for more flexible layouts. For example, the Group can control the visibility of a bunch of views at the same time, and GuideLine can simulate an auxiliary line, etc.

6.1 Group: Controls visibility

A Group is a virtual view in which you can unify and control the visibility of these views by placing viewApp: constraint_referenced_IDS.

<androidx.constraintlayout.widget.Group
        android:id="@+id/mGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="img1,img2"
        />
Copy the code

Group is also inherited from view, directly in the code like ordinary view set visibility, you can control the visibility of IMG1, IMG2.

mGroup.visibility = View.VISIBLE
Copy the code

6.2 Guideline: Auxiliary line

Guideline is equivalent to a virtual auxiliary line, which can be divided into horizontal and vertical lines to help positioning.

So let’s think about a requirement, two views, one left and one right in the middle of the screen, and if you’re in a traditional position, you put two views in a linear layout, and then you center that linear layout. With a constrained layout, you can place a virtual vertical guide line right in the middle of the screen and place two views on either side of that line.

  • android:orientationSet vertical or horizontal
  • app:layout_constraintGuide_percentSet the location by percentage. The value can be 0F-1.0F or 0%-100%
  • app:layout_constraintGuide_beginSet the offset to start/top, dp
  • app:layout_constraintGuide_endSet the offset to end/bottom, dp
<androidx.constraintlayout.widget.Guideline android:id="@+id/guideline" android:layout_width="wrap_content" Android: layout_height = "wrap_content" android: orientation = "vertical" app: layout_constraintGuide_percent = "0.5" / > <ImageView android:id="@+id/img1" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/img1" android:scaleType="centerCrop" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toStartOf="@+id/guideline" android:layout_marginTop="20dp" android:layout_marginEnd="50dp" /> <ImageView android:id="@+id/img2" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/img2" android:scaleType="centerCrop" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toEndOf="@+id/guideline" android:layout_marginTop="20dp" android:layout_marginStart="50dp" />Copy the code

6.3 Barrier: Obtains the range of boundaries

A Barrier can obtain the boundaries of multiple constraint views. You can obtain the left-most and right-most equal boundaries of multiple contained views.

Consider the requirement that we have text1 and Text2 on the left, and a view that must be placed to the right of those two texts

<TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:text="text1"
        android:background="@android:color/black"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="10dp"
        />
    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:text="text2"
        android:background="@android:color/holo_red_dark"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/text1"
        android:layout_marginTop="20dp"
        />

        <ImageView
            android:id="@+id/img1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/img1"
            android:scaleType="centerCrop"
            app:layout_constraintTop_toTopOf="@id/text1"
            app:layout_constraintBottom_toBottomOf="@id/text2"
            app:layout_constraintStart_toEndOf="@id/text1"
            android:layout_marginStart="50dp"
            />
Copy the code

Because IMg1 can have only one stroke point, text1 is used as the constraint point. However, text1 and Text2 are dynamic in width, and occlusion will occur when text2 text is too long.

This is where the barrier comes in. It can dynamically fetch the right-most part of Text1 and text2, so that img1 dependency is changed to the right-most part of the barrier

  • app:barrierDirectionThe value can be top, bottom, left, right, start, or end. The value is used to set which side to obtain. For example, the start/right side is obtained.
  • app:constraint_referenced_idsSet the ID of the view to include
. <androidx.constraintlayout.widget.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:constraint_referenced_ids="text1,text2" app:barrierDirection="end" /> <ImageView android:id="@+id/img1" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/img1" android:scaleType="centerCrop" app:layout_constraintTop_toTopOf="@id/text1" app:layout_constraintBottom_toBottomOf="@id/text2" app:layout_constraintStart_toEndOf="@id/barrier" android:layout_marginStart="50dp" /> ...Copy the code

To be continued…

Constrained Layout 2.0 adds Layer, State, Flow, and other efficient components.