preface

ConstraintLayout is a layout that uses relative positioning to flexibly locate and size widgets. Introduced in Google I/O in 2016, ConstraintLayout was designed to solve the problem of too many layers of complex pages in development — too many layers can increase the time required to draw an interface. Impacts the user experience, positioning and adjusting widgets in a flexible way. Since Android Studio 2.3, layout files have been created as ConstraintLayout by default. However, despite Google’s strong push for this technology, few people used it at the time, but in recent years, it has gradually become popular. (Not pictured here). ConstraintLayout has been updated to 2.0.4. This article will guide you to get familiar with ConstraintLayout.

1. Use of layout

1.1 Position Constraints

ConstraintLayout uses directional constraints to position controls. At least one horizontal and one vertical constraint is required to determine the position of controls

1.1.1 Constraints on the basic direction

For example, we want the top to align with the top of the interface, and the left to align with the left of the interface:

The 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"
    android:background="#DAF3FE"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

The core code is these two lines:

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
Copy the code

What these two lines of code mean is that the start direction of the control is aligned with the start direction of the parent container, the top direction of the control is aligned with the top direction of the parent container, Layout_constraintStart_toStartOf can also be used to layout_constraintLeft_toLeftOf, but the use of start and end for left and right is to consider the customs of other countries. Some countries start on the right. So using start and end is compatible with this case. Constraintstart_tostartof and layout_constraintTop_toTopOf constraints are used to position the control. Direction in which control? Directions. Just keep that in mind. Here are all the constraint properties:

<! -- Basic direction constraint -->
<! -- My which position is in whose which position -->App :layout_constraintTop_toTopOf="" My bottom is aligned with whose bottom is aligned App :layout_constraintLeft_toLeftOf="" My left is aligned with the left of whose app: "" My right is aligned with whose right App :layout_constraintStart_toStartOf="" My end position is aligned with whose end position App: layout_constrainttop_toendof ="" whose top position is my bottom position app:layout_constraintStart_toEndOf="" whose start position is my end position<! -... And so on -->
Copy the code

ConstraintLayout uses these properties to determine the position of the control. It is more frequent, but it is more regular, without any memory stress

1.1.2 Baseline Alignment

Let’s look at a scene:

Layout_constraintBaseline_toBaselineOf, which means that the baseline of the control is aligned with the baseline, is the following:

      
<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"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="20"
        android:textColor="@color/black"
        android:textSize="50sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    
    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Selections"
        android:textColor="@color/black"
        android:textSize="20sp"
        app:layout_constraintBaseline_toBaselineOf="@id/tv1"
        app:layout_constraintStart_toEndOf="@id/tv1" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

With layout_constraintBaseline_toBaselineOf we can align two different size copy baselines

1.1.3 Angle constraints

ConstraintLayout provides properties related to the Angle and location of a control. ConstraintLayout provides properties related to the Angle and location

App :layout_constraintCircle="" Target control ID app:layout_constraintCircleAngle="" Target Angle (0-360) App :layout_constraintCircleRadius="" Distance from target centerCopy the code

Let’s implement the UI shown below. The Jetpack icon is located 45 degrees from the Android icon at a distance of 60dp

      
<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"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

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

    <ImageView
        android:id="@+id/jetpack"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/jetpack"
        app:layout_constraintCircle="@+id/android"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="70dp" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

1.1.4 Percentage offset

Sometimes we need to determine the percentage of the horizontal or vertical position of the control in the parent layout. We can use the following properties:

App :layout_constraintHorizontal_bias="" The value of the horizontal offset ranges from 0 to 1. App :layout_constraintVertical_bias="" The value of the vertical offset ranges from 0 to 1Copy the code

Example: Control A offsets 0.3 (30%) horizontally and 0.8 (80%) vertically on the parent layout note: When using percentage offsets, you need to specify the constraints for the location

      
<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"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <TextView
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.8" />
        
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

1.2 Control inside Margin, Margin, GONE Margin

ConstraintLayout uses margins and margins in the same way as any other layout

<! Android :layout_margin="0dp" Android :layout_marginStart="0dp" Android :layout_marginLeft="0dp" android:layout_marginLeft="0dp" android:layout_marginLeft="0dp" android:layout_marginTop="0dp" android:layout_marginEnd="0dp" android:layout_marginRight="0dp" android:layout_marginBottom="0dp" <! Android :paddingLeft="0dp" Android :paddingTop="0dp" android:paddingLeft="0dp" android:paddingEnd="0dp" android:paddingRight="0dp" android:paddingBottom="0dp"Copy the code

ConstraintLayout In addition to the GONE Margin attribute, the GONE Margin attribute takes effect when the dependent target view is hidden. For example, if B is dependent on A, B will be reduced to A point when B is hidden, and its Margin effect will be disabled. The GONE Margin attribute will take effect when A is set.

<! -- GONE Margin --> app:layout_goneMarginBottom="0dp" app:layout_goneMarginEnd="0dp" app:layout_goneMarginLeft="0dp" app:layout_goneMarginRight="0dp" app:layout_goneMarginStart="0dp" app:layout_goneMarginTop="0dp"Copy the code

Example: GONE Margin does not take effect when the target control is displayed

      
<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"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <TextView
        android:id="@+id/A"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:layout_marginStart="100dp"
        android:layout_marginTop="100dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
        
    <! -- This control sets layout_goneMarginStart=" 100DP "when A is hidden -->
    <TextView
        android:id="@+id/B"
        android:layout_width="60dp"
        android:layout_height="40dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@id/A"
        app:layout_constraintStart_toEndOf="@id/A"
        app:layout_constraintTop_toTopOf="@id/A"
        app:layout_goneMarginStart="100dp" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

GONE Margin of B is in effect when target A is hidden

1.3 Control Size

1.3.1 Size restrictions

ConstraintLayout provides some sizing properties that can be used to limit the maximum and minimum width and height. These properties only apply if the given width or height is wrap_content. For example, to set the minimum or maximum width, the width must be set to WRap_content. This is relatively simple, without the example code, but the properties are as follows:

Android :minWidth="" Android :minHeight="" Android :minHeight="" Android :minHeight="" Android :minHeight="" Sets the maximum height of the viewCopy the code

1.3.2 0 dp (MATCH_CONSTRAINT)

ConstraintLayout can be set to 0dp (MATCH_CONSTRAINT) in addition to the traditional wrap_content, specified size, and match_parent, and the effect of 0dp will vary depending on the type of setting. The properties for setting types are layout_constraintWidth_default and layout_constraintHeight_default, which can be spread, percent, or wrap. The specific properties and examples are as follows:

app:layout_constraintWidth_default="spread|percent|wrap"
app:layout_constraintHeight_default="spread|percent|wrap"
Copy the code

• Spread (default) : Takes up all the space that conforms to the constraint

      
<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"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <TextView
        android:id="@+id/A"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_marginStart="50dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="50dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="spread" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

As you can see, the width of the view ADAPTS to all valid constraint Spaces, leaving a margin of 50dp on the left and right. The effect is: The size of its own view is full of configurable remaining space. Since the left and right constraints are the parent layout, the configurable space of the view is the width of the entire parent layout. Also, since margin is set, the size of margin is set, because spread is the default value. So don’t write app:layout_constraintWidth_default=”spread”.

• Percent: Indicates the percentage 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <TextView
        android:id="@+id/A"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_marginTop="50dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.5" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

Percent mode means that the size of the view is a proportion of the size of the parent layout. The figure above shows that the width of the view is 0.5 of the width of the parent layout. This mode is used with layout_constraintWidth_percent. But if you say layout_constraintWidth_percent, layout_constraintWidth_default=”percent, “you can actually leave it out.

• Wrap: Matches the content size but does not exceed the limit

      
<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"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
    
    <! -- set width to wrap_content -->
    <TextView
        android:id="@+id/A"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:layout_marginStart="100dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="100dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="AAAAAAAAAAAAAAAAAA"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="spread" />
        
    <! -- set width to 0dp wrap mode -->
    <TextView
        android:id="@+id/B"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_marginStart="100dp"
        android:layout_marginTop="150dp"
        android:layout_marginEnd="100dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="BBBBBBBBBBBBBBBBBBBBBBB"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="wrap" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

For control A, the width is set to wrap_content, and the width is set to margin. For control B, the width is set to 0dp wrap, and the width is set to margin. And it does not exceed the margin set value, that is, it does not exceed the constraint limit, that is the difference between the two. Google also provides two properties for enforcing constraints:

<! - when a width or height, the view is set to wrap_content -- > app: layout_constrainedWidth = "true | false" app: layout_constrainedHeight = "true | false"Copy the code

As in the previous example, control A is constrained to show the same effect as control B:

      
<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"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <TextView
        android:id="@+id/A"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:layout_marginStart="100dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="100dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="AAAAAAAAAAAAAAAAAA"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constrainedWidth="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="spread" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

In addition, 0dp has some other unique properties for setting size limits

App :layout_constraintWidth_min="" 0dp; App :layout_constraintWidth_max="" 0dp, maximum width app:layout_constraintHeight_max="" 0dp, maximum heightCopy the code

1.3.3 Ratio

ConstraintLayout allows you to set the width/height ratio in ConstraintLayout. The ratio takes effect only if at least one constraint dimension is set to 0DP. This property can be set in one of two ways: 1. 2. Width: Height, indicating the ratio of the form between width and height

App :layout_constraintDimensionRatio="" Width and height ratioCopy the code

      
<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"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <TextView
        android:id="@+id/A"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

1.4 Chains (chain)

You can also use “Chains” for other things that you can use to balance the positions of several controls in horizontal or vertical Chains. Form a chain requires the control in the chain in the horizontal or vertical direction, end and end constraints each other, so you can form a chain, the horizontal direction of mutual constraints is a horizontal chain, otherwise is a vertical chain, see the following example:

      
<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"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <TextView
        android:id="@+id/A"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@id/B"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/B"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@id/C"
        app:layout_constraintStart_toEndOf="@id/A"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/C"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="C"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/B"
        app:layout_constraintTop_toTopOf="parent" />
    
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

The three controls A, B and C constrain each other from the beginning to the end in the horizontal direction, thus forming A horizontal chain. Their default mode is spread, which evenly divides the remaining space. We can use layout_constraintHorizontal_chainStyle and layout_constraintVertical_chainStyle to set modes for horizontal and vertical chains, respectively. The options for modes are: Spread, packed, spread_inside

• Spread (default) : Evenly divide the remaining space

• Spread_inside: The controls on both sides are close to each other, and the remaining controls divide the remaining space evenly

• Packed: All controls are tightly centered

Chains also support weight configuration, using layout_constraintHorizontal_weight and layout_constraintVertical_weight to set the weight of chain elements

      
<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"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <TextView
        android:id="@+id/A"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@id/B"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/B"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@id/C"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/A"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/C"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="C"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintStart_toEndOf="@id/B"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

2. Auxiliary classes

ConstraintLayout provides a series of helper controls to help developers to solve the nesting problem. These tools are very convenient and I use them very frequently in my daily development work

2.1 Guideline

Guideline is a reference line and the auxiliary positioning can help developers, and it doesn’t actually display in layout, like mathematical geometry of the auxiliary line, use rise very convenient, appearance rates are high, Guideline can also be used to do some percentage demand segmentation, had a very good screen adaptation effect, The Guideline is horizontal or vertical, and the position may be a percentage of the parent position or a distance of the parent position

"Android: orientation =" horizontal | vertical alignment of the auxiliary line app: layout_constraintGuide_percent = "0-1" from the parent the percentage of the width or height (decimal) App :layout_constraintGuide_begin="" The distance from the end of the parent (left or top)Copy the code

      
<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"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

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

    <TextView
        android:id="@+id/A"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/Guideline" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

In the figure above, the Guideline is set at 0.5 (50%) of the parent’s vertical. The top of control A relies on the Guideline, so no matter how the layout changes, the Guideline is always set at 50% of the parent’s vertical and control A is not deviated from its preset position

2.2 Barriers

Just like the Guideline, “Barrier” does not actually appear in the layout. Just like its name, it forms a Barrier and Barrier, and is often used. Explain Barriers using constraintLayout. When we create layouts, we sometimes run into situations where the layout can change based on localization. Here’s a very simple example:

There are three text views: textView1 and textView2 on the left; TextView3 on the right. TextView3 is limited to the end of textView1, which works fine – it positions and sizes textView3 exactly as we need it to.

However, things get more complicated if we need to support multiple languages. If we add a German translation, then we run into a problem, because in the English version, the text in textView1 is longer than the text in textView2, and in German, the text in textView2 is longer than textView1:

The problem here is that textView3 is still relative to textView1, so textView2 is inserted directly into textView3. It looks more obvious in design view (the one with a white background). A more straightforward solution is to use a TableLayout, or wrap textView1 & textView2 in a vertical LinearLayout with Android :layout_width=” WRAP_content “. And then I’m going to have textView3 constrained behind this LinearLayout. But we have a better way: Barriers. Configuration attributes of Barriers are as follows:

<! - used to control the Barrier relative to the position of the given View - > app: barrierDirection = "top | | bottom left | right | start | end" <! > app:constraint_referenced_ids="id,id"Copy the code

The modified 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="@string/warehouse"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:text="@string/hospital"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView1" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="textView2,textView1" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="@string/lorem_ipsum"
        app:layout_constraintStart_toEndOf="@+id/barrier7"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

Effect:

To see the overall effect, switch the language, and you’ll see that the Barrier is automatically placed behind the wider textView, indirectly placing textView3 in the correct position.

The above example is used directly from the ConstraintLayout web site and can be viewed directly by visiting the link.

2.3 Group

ConstraintLayout the Group in ConstraintLayout is designed to solve this problem. In this case, the Group in ConstraintLayout is designed to solve this problem. The function of a Group is to hide or show a set of controls at the same time, and it has the following properties:

App :constraint_referenced_ids="id,id" Specifies the ID of the control added to the groupCopy the code

Example:

      
<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"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
    
    <TextView
        android:id="@+id/A"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:layout_marginTop="56dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.115"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/B"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:layout_marginTop="280dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.758"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/C"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:layout_marginTop="164dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="C"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.437"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="A,B,C" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

A, B, AND C are controlled by the Group. When the visibility of the Group is visible, they are displayed normally; when set to gone, they are hidden:

2.4 Placeholder

Placeholder’s role is to occupy space. It can be moved into the Placeholder by using the app: Content =”” property, or by dynamically calling setContent() to set the content

Example:

      
<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"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <TextView
        android:id="@+id/A"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Placeholder
        android:layout_width="100dp"
        android:layout_height="60dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

So when we set app: Content =”@+id/A” or we call setContent(), control A will be moved to Placeholder, but using app: Content =”” in the layout obviously loses its role.

2.5 Flow (Streaming Virtual Layout)

Flow is a new virtual layout for building chains that can be wound to the next line or even another part of the screen when they run out. This is useful when you place multiple items in a chain, but you are not sure how big the container will be at run time. You can use it to build layouts based on dynamic dimensions in your application, such as screen width when rotated. Flow is a virtual layout. In ConstraintLayout, Virtual layouts are part of the Virtual View Group’s constraints and layouts, but they are not added to the view hierarchy as views. Instead, they simply refer to other views to assist them in their respective layout functions in the layout system.

The following uses animation to show Flow to create multiple chains to fill an entire line with layout elements abundantly:

Let’s look at a specific example:

      
<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"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <TextView
        android:id="@+id/A"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/B"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/C"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="C"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/D"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="D"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/E"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@drawable/tv_bg"
        android:gravity="center"
        android:text="E"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold" />

    <androidx.constraintlayout.helper.widget.Flow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="A,B,C,D,E"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

2.5.1 chain constraint

Constraint_referenced_ids is associated with controls that have no set constraints, unlike normal chains. This arrangement is the default none for Flow. You can use the app:flow_wrapMode=”” property to set the arrangement. We can also use flow_horizontalGap and flow_verticalGap to set the horizontal and vertical spacing of the two views. Let’s add a few more controls to show the three arrangements:

• None (default): All quotedviewForm a chain, centered horizontally, beyond the sides of the screenviewinvisible

• chian: quotedviewForm a chain, the excess will automatically wrap, the same lineviewIt bisects the width.

• aligned: quotedviewIt forms a chain, butviewIt’s going to be in the same row and column.

The following uses animation to show the three effects

When flow_wrapMode is chian or aligned, you can also configure it for different chains. Instead of showing how it works here, the attributes are as follows:

App :flow_horizontalStyle=" Packed | spread | spread_inside" All vertical chain configuration app:flow_firstHorizontalStyle=" Packed | spread | spread_inside" for the first horizontal chain configuration, App :flow_firstVerticalStyle=" Packed | spread | spread_inside" Other bars do not take effect app:flow_lastHorizontalStyle=" Packed | spread | spread_inside" Other bars do not take effect app:flow_lastVerticalStyle=" Packed | spread | spread_inside" Last vertical chain configuration, other bars do not take effectCopy the code

2.5.2 Alignment Constraints

All the views shown above are of the same size, so Flow also provides corresponding attributes to configure the alignment of views of different sizes (flow_wrapMode=”aligned”, I tried it to no effect).

<! --> app:flow_verticalAlign="top | center | baseline" <! > app:flow_verticalAlign="top | center | baseline" <! - start: start alignment, end: end alignment, center, center alignment - > app: flow_horizontalAlign = "start | | end center"Copy the code

When using flow_verticalAlign, the orientation is required to be horizontal, while when using flow_horizontalAlign, the orientation is required to be vertical

Here are the effects:

Horizontal arrangement

• top

<androidx.constraintlayout.helper.widget.Flow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        app:constraint_referenced_ids="A,B,C,D,E,F,G,H,I,J"
        app:flow_verticalAlign="top"
        app:flow_wrapMode="chain"
        app:layout_constraintTop_toTopOf="parent" />
Copy the code

• bottom

<androidx.constraintlayout.helper.widget.Flow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        app:constraint_referenced_ids="A,B,C,D,E,F,G,H,I,J"
        app:flow_verticalAlign="bottom"
        app:flow_wrapMode="chain"
        app:layout_constraintTop_toTopOf="parent" />
Copy the code

• center

<androidx.constraintlayout.helper.widget.Flow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        app:constraint_referenced_ids="A,B,C,D,E,F,G,H,I,J"
        app:flow_verticalAlign="center"
        app:flow_wrapMode="chain"
        app:layout_constraintTop_toTopOf="parent" />
Copy the code

• baseline

<androidx.constraintlayout.helper.widget.Flow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        app:constraint_referenced_ids="A,B,C,D,E,F,G,H,I,J"
        app:flow_verticalAlign="baseline"
        app:flow_wrapMode="chain"
        app:layout_constraintTop_toTopOf="parent" />
Copy the code

It’s arranged vertically and I won’t show you too much here

2.5.3 Quantity Constraints

When the flow_wrapMode attribute is aligned and chian, the maximum number of subviews per row is controlled by the flow_maxElementsWrap attribute. For example, we set flow_maxElementsWrap=4.

2.6 Layer

Layer is derived from ConstraintHelper and is a ConstraintHelper helper. Compared to Flow, Layer is simple to use. It is often used to add background, or to animate together. Code sequence will determine the position of it, if the code in all references to the view of the back, then it will be in all the view at the top, the opposite is the below, if you add background at the top, will be the reference of the view override, add background example shown below, do animation shows example here no longer

      
<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"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <androidx.constraintlayout.helper.widget.Layer
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/common_rect_white_100_10"
        android:padding="10dp"
        app:constraint_referenced_ids="AndroidImg,NameTv" />

    <ImageView
        android:id="@+id/AndroidImg"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:src="@drawable/android"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/NameTv"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:gravity="center"
        android:text="Android"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="@id/AndroidImg"
        app:layout_constraintStart_toStartOf="@id/AndroidImg"
        app:layout_constraintTop_toBottomOf="@id/AndroidImg" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

As you can see, when the Layer code is on top of all the referenced views, the effect is normal, because all the views are on top of the Layer. Let’s take a look at what happens when the Layer code is at the end:

      
<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"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <ImageView
        android:id="@+id/AndroidImg"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:src="@drawable/android"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/NameTv"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:gravity="center"
        android:text="Android"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="@id/AndroidImg"
        app:layout_constraintStart_toStartOf="@id/AndroidImg"
        app:layout_constraintTop_toBottomOf="@id/AndroidImg" />

    <androidx.constraintlayout.helper.widget.Layer
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/common_rect_white_100_10"
        android:padding="10dp"
        app:constraint_referenced_ids="AndroidImg,NameTv" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

And you can see that the Layer has already covered all of the views

2.7 ImageFilterButton & ImageFilterView

ImageFilterButton and ImageFilterView are two controls, and the relationship between them is the same as that between ImageButton and ImageView, so I’m just going to use ImageFilterView here. From the name, their positioning is related to filtering, their general role has two parts, one can be used to make rounded images, the other can be used to overlay image resources for mixed filtering, as shown below:

2.7.1 Pictures with rounded corners

ImageFilterButton and ImageFilterView can use two properties to set the rounded corners of an image resource, roundPercent and Round. RoundPercent accepts values of 0 to 1 decimal. Round = can be set to the exact size of the rounded corners. I found that my AndroidStudio did not have any code hints for these two properties, nor did it have a preview effect, but it worked, maybe it was not optimized well. A hot topic recently, Xiaomi spent 2 million to design a new logo, let’s take an example:

      
<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"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/mi"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:roundPercent="0.7" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

It’s not quite the same as the circular arc in xiaomi’s new logo, but that’s not what we were thinking about either. You can see that we used roundPercent to set the rounded corners to 0.7 (70%), and that’s how easy it is to make a rounded image.

2.7.2 Image filtering

ImageFilterButton and ImageFilterView can not only use SRC to set the image resource, but also use altSrc to set the second image resource. By default, crossFade =0 and altSrc references are invisible, with values between 0 and 1. Here’s an example:

• crossfade=0

• Crossfade = 0.5

• crossfade=1

In addition, the warmth attribute can be used to adjust the color temperature, the brightness attribute is used to adjust the brightness, the saturation attribute is used to adjust the saturation, and the contrast attribute is used to adjust the contrast.

      
<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"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/jetpack"
        app:layout_constraintBottom_toBottomOf="@id/view2"
        app:layout_constraintEnd_toStartOf="@+id/view2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/view2"
        app:warmth="0" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/jetpack"
        app:layout_constraintBottom_toTopOf="@+id/view5"
        app:layout_constraintEnd_toStartOf="@+id/view3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/view1"
        app:layout_constraintTop_toTopOf="parent"
        app:warmth="5" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view3"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/jetpack"
        app:layout_constraintBottom_toBottomOf="@id/view2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toEndOf="@+id/view2"
        app:layout_constraintTop_toTopOf="@id/view2"
        app:warmth="9"
        tools:layout_editor_absoluteY="0dp" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view4"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/jetpack"
        app:brightness="0"
        app:layout_constraintBottom_toBottomOf="@id/view5"
        app:layout_constraintEnd_toStartOf="@+id/view5"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/view5"
        tools:layout_editor_absoluteY="136dp" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view5"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/jetpack"
        app:brightness="5"
        app:layout_constraintBottom_toTopOf="@+id/view8"
        app:layout_constraintEnd_toStartOf="@+id/view6"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/view4"
        app:layout_constraintTop_toBottomOf="@+id/view2" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view6"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/jetpack"
        app:brightness="9"
        app:layout_constraintBottom_toBottomOf="@id/view5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/view5"
        app:layout_constraintTop_toTopOf="@id/view5"
        tools:layout_editor_absoluteY="136dp" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view7"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/jetpack"
        app:layout_constraintBottom_toBottomOf="@id/view8"
        app:layout_constraintEnd_toStartOf="@+id/view8"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/view8"
        app:saturation="0"
        tools:layout_editor_absoluteY="285dp" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view8"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/jetpack"
        app:layout_constraintBottom_toTopOf="@+id/view11"
        app:layout_constraintEnd_toStartOf="@+id/view9"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/view7"
        app:layout_constraintTop_toBottomOf="@+id/view5"
        app:saturation="5" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view9"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/jetpack"
        app:layout_constraintBottom_toBottomOf="@id/view8"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/view8"
        app:layout_constraintTop_toTopOf="@id/view8"
        app:saturation="9"
        tools:layout_editor_absoluteY="296dp" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view10"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/jetpack"
        app:contrast="0"
        app:layout_constraintBottom_toBottomOf="@id/view11"
        app:layout_constraintEnd_toStartOf="@+id/view11"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/view11"
        tools:layout_editor_absoluteY="437dp" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view11"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/jetpack"
        app:contrast="5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/view12"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/view10"
        app:layout_constraintTop_toBottomOf="@+id/view8" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view12"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/jetpack"
        app:contrast="9"
        app:layout_constraintBottom_toBottomOf="@id/view11"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/view11"
        app:layout_constraintTop_toTopOf="@id/view11"
        tools:layout_editor_absoluteY="437dp" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

2.8 MockView

Your product manager will often draw prototypes for you, but this is by no means their own. We have our own prototypes, too. A mature programmer needs to learn to draw a big cake for his product manager.

      
<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"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <androidx.constraintlayout.utils.widget.MockView
        android:id="@+id/Avatar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginStart="80dp"
        android:layout_marginTop="100dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.utils.widget.MockView
        android:id="@+id/Name"
        android:layout_width="100dp"
        android:layout_height="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/Avatar"
        app:layout_constraintTop_toTopOf="@id/Avatar" />

    <androidx.constraintlayout.utils.widget.MockView
        android:id="@+id/Age"
        android:layout_width="100dp"
        android:layout_height="30dp"
        app:layout_constraintBottom_toBottomOf="@id/Avatar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/Avatar" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

Well! There’s an inside smell!

2.9 ConstraintProperties (streaming API)

ConstraintProperties 2.0 provides ConstraintProperties to modify properties using streaming apis

val properties = ConstraintProperties(findViewById(R.id.image))
    properties.translationZ(32f)
          .margin(ConstraintSet.START, 43)
          .apply()
Copy the code

3. MotionLayout

Motion Layout is one of the most anticipated features of Constraint Layout 2.0. It provides a rich animation system to coordinate animations between multiple views. MotionLayout is based on and extended on ConstraintLayout, allowing you to animate between groups of constraints (or ConstraintSets). You can customize the view to move, scroll, zoom, rotate, fade in and out, and even define the custom properties of each animation itself. It can also handle the physical movement effects of gestures and control the speed of animations. Animations built using MotionLayout are traceable and reversible, which means you can switch to any point in the animation and even perform the animation backwards. Android Studio integrates with the Motion Editor, which allows you to create, preview, and edit animations using MotionLayout. This allows you to manipulate the details in detail while coordinating the animations of multiple views. Since I haven’t used it myself and it’s a lot of space, I won’t cover MotionLayout (mostly I don’t).

conclusion

So far, the content of Constraint Layout has been basically introduced. Since there are a lot of content, code examples and pictures, it is not easy to read it all at once. You can click to save it for future browsing. Plus there are a lot of good blog posts about Constraint Layout, but they certainly don’t have all of mine! 😂 If there is any mistake, please contact me and I will correct it as soon as possible.

reference

• Constraintlayout 2.0: Here comes the update you asked for

• Constraint Layout 2.0

• Constraintlayout website