ConstraintLayout, is reading just one paragraph really enough?

1. Introduction

Recently poisoned very deep, often stroll around the nuggets, see a lot of excellent articles, thank the nuggets. At the same time also see a lot of headlines, look at XXXX, one is enough. Technology is constantly updated and iterated. One article is never enough. It is recommended to review the website again to see the information filtered out by the author or the latest updates. That’s why I put a link to the website at the end of the post, if there is one.

2. ConstraintLayout

ConstraintLayout is recommended by Google as a Viewgroup that can flexibly adjust the position and size of views. Before creating layouts, the default root element was LinearLayout. Now it is ConstraintLayout. ConstraintLayout can be supported as a support library up to API 9, and the ConstraintLayout API and functionality are constantly being enriched. ConstraintLayout is effective in complex layouts, reducing the layout hierarchy, improving performance, and providing more flexibility.

App components in Graldle have the following dependencies by default:

// Implementation may be different versions'com. Android. Support. The constraint, the constraint - layout: 1.1.3Copy the code

I can’t wait to see what ConstraintLayout can do with layouts.

2.1 Relative Positioning

So this is kind of like a RelativeLayout, the position of a View relative to another View.

<? xml version="1.0" encoding="utf-8"? > <android.support.constraint.ConstraintLayout ... > <TextView ... android:text="Hello"
            android:id="@+id/tvHello"/>

    <TextView
            ...
            android:text="World"
            app:layout_constraintLeft_toRightOf="@+id/tvHello"/>

    <TextView
            ...
            android:text="GitCode"
            app:layout_constraintTop_toBottomOf="@id/tvHello"/>
</android.support.constraint.ConstraintLayout>
Copy the code

In the case of TextView World layout_constraintLeft_toRightOf, constraintLeft represents the left side of TextView World itself. A View has four sides, Therefore, the top, right and bottom of TextView correspond to constraintTop, constraintRight, and constraintBottom respectively. ToRightOf is located to the right of another View. For example, it is located to the right of Hello, so there are toLeftOf, toRghtOf, toBottomOf, which are respectively located to the left, right, and bottom of View Hello. ConstraintXXX represents the edge of a View’s own constraint, toXXXOf represents the edge of another View, and XXX can be Left, Top, Right, or Bottom, corresponding to Left, Top, Right, and Bottom respectively. Layout_constraintStart_toEndOf is similar.

In addition, it should be noted that the position of the view can be relative to the view and parent on the same level. When the view is relative to the parent, toLeftOf, toTopOf, toRghtOf and toBottomOf respectively indicate that the view is located at the upper left and lower right edge of the parent. The red box represents the parent View.

layout_constraintBaseline_toBaselineOf

<TextView
   ...
    android:text="Hello"
    android:id="@+id/tvHello"/>

<TextView
    ...
    android:text="World"
    app:layout_constraintBaseline_toBaselineOf="@id/tvHello"
    app:layout_constraintLeft_toRightOf="@+id/tvHello"/>
Copy the code

And that’s what the interface wants, much more convenient than Relativelayout.

2.2 margin

Margins are not very different from normal use, but you need to determine the position of the view before they take effect. Such as:

<TextView
        ...
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"/>
Copy the code

TextView’s layout_marginTop and layout_marginLeft properties will work in other viewgroups, but not in ConstraintLayout because the TextView’s location has not been determined yet. The following code will take effect.

<TextView
        ...
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
         />
Copy the code

Common attributes are as follows:

• android:layout_marginStart
• android:layout_marginEnd
• android:layout_marginLeft
• android:layout_marginTop
• android:layout_marginRight
• android:layout_marginBottom

GONE Margin

Sometimes, there is a requirement that the left margin of GitCode with World is 0 when the World is visible, and the left margin of GitCode is a specific value when the World is not.

World is visible, and the left margin of GitCode is 0

• layout_goneMarginStart
• layout_goneMarginEnd
• layout_goneMarginLeft
• layout_goneMarginTop
• layout_goneMarginRight
• layout_goneMarginBottom

Centering positioning and bias

With a RelativeLayout center, you typically use the following three properties:

• Layout_centerInParent Center center
• Layout_centerHorizontal is centered horizontally
• Layout_centerVertical Indicates the vertical center

ConstraintLayout, on the other hand, uses left, right, top and bottom to constrain the center.

• Horizontal center layout_constraintLeft_toLeftOf & layout_constraintRight_toRightOf
• Vertical center layout_constraintTop_toTopOf & layout_constraintBottom_toBottomOf
• Middle center Horizontal center & vertical center

<TextView
    ...
    android:text="Hello"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"/>
Copy the code

Effect:

That’s easy, use margin. No, no, no. Here are two other properties that are similar to the weight of LinearLayout (of course, ConstraintLayout can also use the weight property), but much simpler.

• Layout_constraintHorizontal_bias Horizontal bias
• Layout_constraintVertical_bias Indicates the vertical bias

The values of the two attributes range from 0 to 1. In the horizontal offset, 0 is the leftmost and 1 is the rightmost; In the vertical offset, 0 is the top and 1 is the bottom; 0.5 indicates the middle.

<TextView
    ...
    android:text="Hello"
    app:layout_constraintHorizontal_bias="0.8"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"/>
Copy the code

Effect:

Added in 1.1

Circular positioning refers to the position of the center of a View relative to the center of another View. Post a picture of the official website.

• Layout_constraintCircle: id of another view, A view above
• Layout_constraintCircleRadius: radius, the radius in the figure above
• Layout_constraintCircleAngle: Angle from 0 to 360 You can also see from the graph that the Angle is 0 at 12 o ‘clock, clockwise.

Eat a chestnut:

<TextView
    ...
    android:text="Hello"
    android:id="@+id/tvHello"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"/>

<TextView
    android:text="World"
    app:layout_constraintCircle="@id/tvHello"
    app:layout_constraintCircleRadius="180dp"
    app:layout_constraintCircleAngle="135"/>
Copy the code

Effect picture: Hello center, World 135 Angle

2.4 Size Constraints

ConstraintLayout Maximum and minimum sizes

ConstraintLayout when the width and height of ConstraintLayout is set to WRAP_CONTENT, you can set its maximum and minimum sizes by following the instructions.

• Android :minWidth Minimum width
• Android :minHeight Minimum height
• Android :maxWidth Maximum width
• Android :maxHeight Maximum height

Control size constraints in ConstraintLayout

Controls in ConstraintLayout can set their size constraints in three ways.

• Specify a specific value. Such as 123 dp
• Using valueWRAP_CONTENT, content self-adaptation.
• To 0 dp, namelyMATCH_CONSTRAINTTo expand the available space.

The first and second are no different from normal use. The third recalculates the size of the control based on the constraints. In ConstraintLayout, MATCH_PARENT is not recommended, but MATCH_CONSTRAINT(0dp) is recommended, and their behavior is similar.

Have a chestnut:

 <TextView
        android:text="Hello"
        android:id="@+id/tvHello"
        android:gravity="center"
        android:padding="20dp"
        app:layout_constraintTop_toTopOf="parent"
        android:textColor="@color/colorWhite"
        android:background="@color/colorPrimary"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="0dp"
        android:layout_marginRight="20dp"
        android:layout_height="wrap_content"/>
Copy the code

Set layout_width to 0dp; Layout_height to wrap_content; Layout_marginRight is 20dp, left-right aligned with parent.

Effect:

Prior to 1.1, the control size was set to WRAP_CONTENT, and the control was controlled by the component text size by default; other constraints were not applied. You can set whether to take effect with the following properties.

• App: layout_constrainedWidth = “true | false”
• App: layout_constrainedHeight = “true | false”

When the control is set to MATCH_CONSTRAINT, the size of the control expands all available space, and after version 1.1, you can change the behavior of the control with the following properties.

• Layout_constraintWidth_min Minimum width
• Layout_constraintHeight_min Minimum height
• Layout_constraintWidth_max Maximum width
• Layout_constraintHeight_max Maximum height
• Layout_constraintWidth_percent Percentage of the width to parent
• Layout_constraintHeight_percent Percentage of the height to the parent

Eat a chestnut:

<TextView
        android:text="Hello"
        android:id="@+id/tvHello"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintWidth_percent="0.5"
        app:layout_constraintWidth_default="percent"
        android:layout_width="0dp"
        android:layout_height="wrap_content"/>
Copy the code

Set android:layout_width to MATCH_CONSTRAINT, which is 0dp; Set app:layout_constraintWidth_default to Percent; Set app:layout_constraintWidth_percent to 0.5, indicating 50% of the parent. The value ranges from 0 to 1.

Effect:

Proportional constraints

Control aspect ratio, the requirement is that at least one width or height set to 0DP, and then set the attribute layout_constraintDimensionRatio.

<TextView
    android:text="Hello"
    app:layout_constraintDimensionRatio="Three"
    android:layout_width="0dp"
    android:layout_height="100dp"
    />
Copy the code

Here the aspect ratio is set to 3:1 and the height to 100dp, so the width will be 300dp.

W
H

<Button android:layout_width="0dp" android:layout_height="0dp"
    app:layout_constraintDimensionRatio="H,16:9"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>
Copy the code

2.5 chain

Chains provide a set of similar behaviors in horizontal or vertical directions. The picture can be understood as a horizontal chain. One thing to understand here is that only the left edge constraint of A and parent, the right edge constraint of B and parent, and the right edge constraint of A and the left edge constraint of B can be used in A chain. The same is true for multiple elements, left-most, right-most and parent constraints, and edges between elements are bound to each other. Otherwise the chain will never work.

• Layout_constraintHorizontal_chainStyle Horizontal chain
• Layout_constraintVertical_chainStyle Vertical chain

The default value of both can be

• CHAIN_SPREAD Spread style (default)
• Weighted chain in CHAIN_SPREAD style, some controls have MATCH_CONSTRAINT set, so they will expand the available space.
• CHAIN_SPREAD_INSIDE expands the style, but not the ends
• CHAIN_PACKEDGroup style, controls group together. By shifting bias, the position of the Packed element can be changed.
  

  

  From the actual development, so the application is quite extensive. Provide a code reference, to avoid taking the road:

<? xml version="1.0" encoding="utf-8"? > <android.support.constraint.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:text="Hello"
            android:id="@+id/tvHello"
            android:gravity="center"
            android:padding="20dp"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/tvWorld"
            android:textColor="@color/colorWhite"
            android:background="@color/colorPrimaryDark"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    <TextView
            android:text="World"
            android:gravity="center"
            android:padding="20dp"
            android:id="@+id/tvWorld"
            app:layout_constraintLeft_toRightOf="@id/tvHello"
            app:layout_constraintRight_toRightOf="parent"
            android:textColor="@color/colorWhite"
            android:background="@color/colorPrimary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    
</android.support.constraint.ConstraintLayout>
Copy the code

Effect:

By default, the remaining free space in the chain is evenly allocated to each element, but it is sometimes possible to specify the size of the allocated space through the weight attribute layout_constraintVertical_weight.

After 1.1, when margins are used in chains, they are added, that is, if the right margin of Hello is 5 and the left margin of World is 20, the margin between them is 25. In a chain, margins are subtracted from the remaining space, which is then used to position the elements.

2.6 the optimizer

After 1.1, the optimizer was exposed to determine where the control should be optimized by using the app:layout_optimizationLevel.

• None: no optimization is performed
• Standard: The default mode. Only direct and barrier constraints are optimized
• Direct: Optimizes the direct constraint
• Barrier: Optimizes the barrier constraints
• Chain: Optimizing chain Constraints (experimental properties)
• Dimensions: Optimized size (experimental properties) to reduce the number of measurements

3. The tools

The Guideline is 3.1.

The guide is not actually displayed on the interface, but is used as a reference for ConstraintLayout layout view.

Set Guideline orientation to indicate whether the Guideline is horizontal or vertical. The corresponding values are vertical and horizontal. You can locate the Guideline in three ways.

• Layout_constraintGuide_begin specifies a specific distance from the left or top
• Layout_constraintGuide_end specifies a specific distance from the right or bottom
• Layout_constraintGuide_percent Specifies the specific distance as a percentage of width or height

Throw a chestnut:

<android.support.constraint.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.support.constraint.Guideline
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/guideline"
            android:orientation="vertical"
            app:layout_constraintGuide_begin="10dp"/>

    <Button android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button"
            app:layout_constraintLeft_toLeftOf="@+id/guideline"
            android:layout_marginTop="16dp"
            app:layout_constraintTop_toTopOf="parent"/>

    <Button android:text="Button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button2"
            app:layout_constraintLeft_toLeftOf="@+id/guideline"
            android:layout_marginTop="16dp"
            app:layout_constraintTop_toBottomOf="@id/button"/>
</android.support.constraint.ConstraintLayout>
Copy the code

The Guideline is set to a vertical 10dp from the beginning. As shown in the figure below, you need to move the mouse over the button to display it.

3.2 Barriers

A Barrier is a bit like Guideline, but the Barrier is repositioned based on changes in the size of all referenced controls. In a classic login interface, for example, the EditText on the right always wants to be close to the longest edge of all the textViews left and right. If one of the two TextViews gets longer, the EditText position changes with that, which is a lot more flexible than using a RelativeLayout.

<android.support.constraint.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">

    <android.support.constraint.Barrier
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="right"
            android:id="@+id/barrier"
            app:constraint_referenced_ids="tvPhone,tvPassword"
            />

    <TextView android:layout_width="wrap_content"
              android:text="Cell phone number"
              android:id="@+id/tvPhone"
              android:gravity="center_vertical|left"
              android:padding="10dp"
              android:layout_height="50dp"/>

    <TextView android:layout_width="wrap_content"
              android:text="Password"
              android:padding="10dp"
              android:gravity="center_vertical|left"
              android:id="@+id/tvPassword"
              app:layout_constraintTop_toBottomOf="@id/tvPhone"
              android:layout_height="wrap_content"/>

    <EditText android:layout_width="wrap_content"
              android:hint="Enter your mobile phone number"
              android:id="@+id/etPassword"
              app:layout_constraintLeft_toLeftOf="@id/barrier"
              android:layout_height="wrap_content"/>

    <EditText android:layout_width="wrap_content"
              android:hint="Enter password"
              app:layout_constraintTop_toBottomOf="@id/etPassword"
              app:layout_constraintLeft_toLeftOf="@id/barrier"
              android:layout_height="wrap_content"/>


</android.support.constraint.ConstraintLayout>
Copy the code

App :barrierDirection Specifies the alignment position of the referenced control. The available values are: Constraint_referenced_ids is the control referenced, such as tvPhone,tvPasswrod.

3.3 Group

Use to control the visibility of a set of views. If the view is controlled by multiple groups, the visibility defined by the last Group dominates.

Eat tasty chestnuts: The Group is visible by default.

visible

<android.support.constraint.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">

    <android.support.constraint.Group
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/group"
            android:visibility="gone"
            app:constraint_referenced_ids="tvPhone,tvPassword"
            />

    <TextView android:layout_width="wrap_content"
              android:text="Cell phone number"
              android:id="@+id/tvPhone"
              android:gravity="center_vertical|left"
              android:padding="10dp"
              android:layout_height="50dp"/>

    <TextView android:layout_width="wrap_content"
              android:text="Password"
              android:padding="10dp"
              android:gravity="center_vertical|left"
              android:id="@+id/tvPassword"
              app:layout_constraintLeft_toRightOf="@id/tvPhone"
              app:layout_constraintTop_toBottomOf="@id/tvPhone"
              android:layout_height="wrap_content"/>

    <TextView android:layout_width="wrap_content"
              android:text="GitCode"
              android:padding="10dp"
              android:gravity="center_vertical|left"
              app:layout_constraintLeft_toRightOf="@id/tvPassword"
              android:layout_height="wrap_content"/>

</android.support.constraint.ConstraintLayout>
Copy the code

The effect is this, tvPhone,tvPassword are hidden.

3.4 Placeholder

A Placeholder for a view. When the Placeholder content property is specified as the ID of another view, the view will move to the Placeholder position.

So in our code, we’re going to position the TextView in the middle of the screen, and as we set the ID to the Placeholder property, we’re going to move the TextView to where the Placeholder is, and we’re going to do the same thing.

<android.support.constraint.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">

    <android.support.constraint.Placeholder
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:content="@id/tvGitCode"
              />
    
    <TextView android:layout_width="wrap_content"
              android:text="GitCode"
              android:id="@+id/tvGitCode"
              android:padding="10dp"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              android:gravity="center_vertical|left"
              android:layout_height="wrap_content"/>

</android.support.constraint.ConstraintLayout>
Copy the code

3.5 other

In 2.0, such as increased ConstraintProperties ConstraintLayout, ConstraintsChangedListener, interested can look at our website.

For more information, see our website

4. To summarize

Before writing this article, I didn’t know how to use ConstraintLayout. After writing this article, I have already started to use ConstraintLayout, which satisfies the effect I want in the actual development. It can effectively reduce the layout hierarchy and improve performance. Have you used ConstraintLayout?

Welcom to visit my github

Jetpack: How to elegantly update Views data as it changes