ConstraintLayout profile
An efficient layout to deal with complex multi-layer nesting or complex dependencies, solve the relative layout due to the hidden target control of the layout chaos and forced nesting layout problem, solve the weight percentage layout of the LinearLayout, and provide a special layout, such as circular layout, special stacked placement. The goal of learning this layout is to achieve a complex layout that is not nested. This series of learning experience, first explain the basic usage, and then step by step to the realization of advanced actual combat UI effect, pit road experience, etc.
The lower version uses the Compile keyword. Higher versions of Android Studio are shown below
implementation 'com. Android. Support. The constraint, the constraint - layout: 1.1.0'
Copy the codeAs shown in the figure below, the number of methods is not a threat to the package size of the whole project. It can be safely eaten and tastes a little sweet.
directory
- Basic Attributes
- Relative to put
- Center the level and center the weight
- Margin spacing failure
- Target dependent constraint object invisibility
- Circular layout
- Wide high constraint
- Guideline
- Chain layout
- Layout grouping – Controls visibility
Basic Attributes
You should be familiar with RelativeLayout, which has many properties like belowOf and rightOf for relative positioning of controls. So let’s start by explaining how this basic attribute is relative to ConstraintLayout.
| The property name | Introduction to the |
|---|---|
| layout_constraintLeft_toLeftOf | The left side of the current control A depends on the left side of the target constraint object B. The simple point is that A is aligned left to B |
| layout_constraintLeft_toRightOf | The left side of the current control A depends on the right side of the target constraint object B. The simple point is that A is aligned to the left side of B |
| layout_constraintRight_toLeftOf | Currently A is aligned to the right of B, and the following attributes are similar to… |
| layout_constraintRight_toRightOf | |
| layout_constraintTop_toTopOf | |
| layout_constraintTop_toBottomOf | |
| layout_constraintBottom_toTopOf | |
| layout_constraintBottom_toBottomOf | |
| layout_constraintBaseline_toBaselineOf | Text baseline alignment |
| layout_constraintStart_toEndOf | The start edge of the current control A is aligned with the end of the target constraint object B |
| layout_constraintStart_toStartOf | The start edge of the current control A is aligned with the start edge of the target constraint object B, similar below |
| layout_constraintEnd_toStartOf | |
| layout_constraintEnd_toEndOf |
As mentioned above, the common base properties are these, so let’s start with the relative layout approximation properties. The purpose of understanding the above attributes is to divide the current control into four directions: up, down, left and right. In different cases, according to the UI diagram, the relative constraint declaration.
Common Features
1. Place them opposite each other
The next two controls Button1 are in the upper right corner of the parent layout, and button2 is declared only below Button1. As with relative layout, Android coordinates default to center in the upper left corner, so instead of declaring the horizontal constraint, Button2 defaults to the left.
<? xml version="1.0" encoding="utf-8"? > <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<Button
android:id="@+id/button1"
android:layout_width="150dp"
android:layout_height="50dp"
android:text="I'm in the upper right corner."
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="@+id/button2"
android:layout_width="150dp"
android:layout_height="50dp"
android:text="I'm under him."
app:layout_constraintTop_toBottomOf="@id/button1"/>
</android.support.constraint.ConstraintLayout>
Copy the code2. Center level and weight
Now let’s start to use more advanced, how to center horizontally. With ConstraintLayout in the image below, the Button control acts like silly putty and is stretched when controlled by multiple constraints. For example, the left side of the view should be close to the left side of the parent layout, and the right side of the view should be close to the right side of the parent layout, so that the view will start to be stretched to both sides in the middle. This is like you are torn between daughter-in-law and in-laws, both sides want you to say, haha. However, people are selfish, and they want to take sides with one party, or one party is always at a disadvantage, so the concept of bias appears. As shown in the figure below, although it is horizontally centered, Button2 is obviously biased to a certain side. The larger the weight value of 0-1 is, the closer it is to the right. Of course, if you want to play well, set it to 0.5 without favouritism. Here is the realization of horizontal center, as for the vertical center and the parent layout is similar, imitate the gourd, their own practice. The red TextView shows how to tile to fill the width, with 0DP (match_constraint) representing matchParent.
<? 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/button1"
android:layout_width="150dp"
android:layout_height="50dp"
android:text="Horizontal center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<Button
android:id="@+id/button2"
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_marginTop="60dp"
android:text="Horizontally centered and tilted to one side."
app:layout_constraintHorizontal_bias="0.6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="10dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="Horizontal fill"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/button2"/>
</android.support.constraint.ConstraintLayout>
Copy the code
3. Margin spacing failure
Note that in ConstraintLayout, I want the Button2 layout not to block the demo Button1, so setting Android :layout_marginTop=”60dp” doesn’t work. As shown below, the control still blocks Button1 without changing position.
<Button
android:id="@+id/button2"
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_marginTop="60dp"
android:text="Horizontally centered and tilted to one side."
app:layout_constraintHorizontal_bias="0.6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
Copy the code
From the above experience, we found that without declaring the target object of the constraint on one side (such as parent in this case), setting the margin of the corresponding edge does not work. For example, I button1 has left constraint object, then set 300dp left spacing, effective!
<Button
android:id="@+id/button1"
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_marginLeft="300dp"
android:text="Horizontal center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
Copy the code
4. Target dependence constraint object invisibility
In a UI implementation, there are many controls that are only displayed in certain scenarios, but the layout must be written in. Then, when displayed, it will occupy the position of the current general control, which needs to be adjusted to move to the left or right. This kind of target stealth, usually through the two controls LinearLayout nesting and other ways to achieve, is very difficult to do. Here is the goneMargin method for coping with invisibility.
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
Copy the codeI want button1 to be on top, button2 and button3 to be underneath it relative to button1, and button3 to be underneath button2 when button2 is displayed. This is where you need to lay it out.
<? 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">
<Button
android:id="@+id/button1"
android:layout_width="150dp"
android:layout_height="50dp"
android:text="You follow me."
app:layout_constraintLeft_toLeftOf="parent"
/>
<Button
android:id="@+id/button2"
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_marginTop="100dp"
android:text="I'm 2. I'm under him."
android:visibility="visible"
app:layout_constraintTop_toBottomOf="@id/button1"/>
<Button
android:id="@+id/button3"
android:layout_width="150dp"
android:layout_height="50dp"
android:text="I'm 3. I'm under him."
app:layout_constraintTop_toBottomOf="@id/button2"
/>
</android.support.constraint.ConstraintLayout>
Copy the code
Next, I set Android :visibility=”gone” and hide button2, and something amazing happens. After button2 disappears, button2’s marginTop100dp also disappears. Button3 still maintains the dependency constraint of button2 on Button1.
So what if I want to keep 100dp as before, and set button3’s marginTop to 100DP, no, it will look like the image below.
At this point, goneMargin is displayed, as shown below.
<? 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">
<Button
android:id="@+id/button1"
android:layout_width="150dp"
android:layout_height="50dp"
android:text="You follow me."
app:layout_constraintLeft_toLeftOf="parent"
/>
<Button
android:id="@+id/button2"
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_marginTop="100dp"
android:text="I'm 2. I'm under him."
android:visibility="visible"
app:layout_constraintTop_toBottomOf="@id/button1"/>
<Button
android:id="@+id/button3"
android:layout_width="150dp"
android:layout_height="50dp"
app:layout_goneMarginTop="100dp"
android:text="I'm 3. I'm under him."
app:layout_constraintTop_toBottomOf="@id/button2"
/>
</android.support.constraint.ConstraintLayout>
Copy the code
OK, everything worked out exactly as we wanted it to, perfect. If I don’t need to keep so much spacing after button2 disappears, I can change app:layout_goneMarginTop. This is often needed in actual business scenarios. After the top layout disappears, it has a different spacing from the top spacing, and goneMargin will play a big role. Dynamically differentiated layouts without having to do things in your own code.
5. Circular layout
Create a custom layout group with stars around the layout. No, no, no. We have a new true love to save us. Circular layout method to help you achieve a variety of hanging and blasting design renderings. In addition, it can also achieve the top right corner logo effect.
Layout_constraintCircleRadius: Distance from the center of the dependent object layout_constraintCircleAngle: The Angle at which the control should be placed (degrees, 0 to 360)Copy the code
Show you fuck code.
<? 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">
<Button
android:id="@+id/button1"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="Vertical center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="@+id/button2"
android:layout_width="50dp"
android:layout_height="50dp"
android:text="A"
app:layout_constraintCircle="@+id/button1"
app:layout_constraintCircleAngle="45"
app:layout_constraintCircleRadius="70dp"/>
<Button
android:id="@+id/button3"
android:layout_width="50dp"
android:layout_height="50dp"
android:text="B"
app:layout_constraintCircle="@+id/button1"
app:layout_constraintCircleAngle="90"
app:layout_constraintCircleRadius="70dp"/>
<Button
android:id="@+id/button4"
android:layout_width="50dp"
android:layout_height="50dp"
android:text="C"
app:layout_constraintCircle="@+id/button1"
app:layout_constraintCircleAngle="135"
app:layout_constraintCircleRadius="70dp"/>
</android.support.constraint.ConstraintLayout>
Copy the code
In the figure above, we have realized that A is placed in the 45° direction and close to the center point 70dp of the object dependent on the constraint. B is similar to C, which is placed 45° apart from A, and A star circling effect is achieved. Think about how to achieve before, is not tears… The organization has come to the rescue, send tea to Google, send latiao!
6. Width and height constraints
Many times we need to set the maximum width and height, or the minimum width or height. So in ConstraintLayout, we’re going to deal with a variety of constraints.
| attribute | Introduction to the |
|---|---|
| Layout_constraintWidth_min and layout_constraintHeight_min | Set the minimum width and height |
| Layout_constraintWidth_max and layout_constraintHeight_max | Set the maximum width and height |
| Layout_constraintWidth_percent and layout_constraintHeight_percent | Set layout_width and layout_height to MATCH_CONSTRAINT (0dp) |
In addition to the above attributes, the first control declared the maximum width, but did not apply to WRAP_CONTENT because the width and height constraints were invalid for WRAP_CONTENT. But the second control app:layout_constrainedWidth=”true” is limited to 200dp.
/ / property app: layout_constrainedWidth ="true|false"App: layout_constrainedHeight ="true|false"<? 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">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="My width is restricted, but it doesn't work."
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintWidth_max="200dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="100dp"
android:maxWidth="100dp"
android:text="The width limit is working, the width limit is working the width limit is working."
app:layout_constrainedWidth="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/button1"
app:layout_constraintWidth_max="200dp"/>
</android.support.constraint.ConstraintLayout>
Copy the code
In addition, you can set the ratio of width to height, such as 16:9. The text below shows that “111” control is 16:9 effect, “H,16:9” represents the constraint height, and keep the ratio of width to height 16:9; When the width is 0dp, the left and right dependency constraints are set to parent, so the width is known to fill the screen. Use the given width to calculate height = width times 16/9. I also have a lot of questions about this part, and I have not fully understood it. After understanding it, I will give a detailed explanation on ratio. The following sentence was posted by someone else.
In this case the system sets the largest dimensions the satisfies all constraints and maintains the aspect ratio specified.
<? 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:id="@+id/tv1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorAccent"
android:text="1111111"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="@+id/tv2"
android:layout_width="100dp"
android:layout_height="0dp"
android:background="#cccccc"
android:gravity="center"
android:text="22222"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="W,1:4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:layout_width="0dp"
android:layout_height="100dp"
android:background="@color/colorPrimary"
android:text="4444444"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="W,1:4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:layout_width="0dp"
android:layout_height="30dp"
android:background="@color/colorPrimary"
android:text="55555"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="H,1:4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:layout_width="100dp"
android:layout_height="0dp"
android:background="@color/colorPrimary"
android:text="333333"
app:layout_constraintHeight_percent="0.3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</android.support.constraint.ConstraintLayout>
Copy the code
7. Guideline
Sometimes UI effects break the interface into several areas, and area A dynamically adjusts its position according to the width of area B. Or sometimes, some controls as a whole are centered in the same vertical direction (the controls are in the same X-coordinate), but the previous relative layout simply sets the vertical center to be overlaid. In the image below, the controls 1 and 2 should both be vertically centered, so use the Guideline to happily solve these problems. Where app:layout_constraintGuide_percent=”0.5″ means 50% vertical position.
<? 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">
<android.support.constraint.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:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorAccent"
android:text="1111"
app:layout_constraintBottom_toTopOf="@id/guideline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorPrimary"
android:text="2222"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/guideline"/>
</android.support.constraint.ConstraintLayout>
Copy the code8. Chain layout
Chain AB is created when AB controls establish dependent constraints on each other, such as A declaring the right and B’s left constraints, and B declaring the same, forming A loop. Like the image below on the official website
Focus on the weight chain, which is similar to the weight of a linearlayout, but much more powerful. The in-chain controller set to 0DP (MATCH_CONSTRAINT) splits the remaining available controls, depending on the weight value, into different sizes. As shown in the figure below, Button1 and Button2 set 0DP, since Button1 set a spacing of 80DP, dividing the remaining space is on the right side of this area. As the specific weight is not set, the two are equally divided. But button3, BUTTon4 and BUTTon5 are different. The width of 50DP is set for BUTTon5 but the weight is not set. But the weight values of 1 and 2 are set for 3 and BUTTon4 respectively, so the size of BUTTon4 is twice that of BUTTon3.
<? 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"
>
<Button
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="80dp"
android:text="Button1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/button2"/>
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button2"
app:layout_constraintLeft_toRightOf="@+id/button1"
app:layout_constraintRight_toRightOf="parent"/>
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/button4"/>
<Button
android:id="@+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintLeft_toRightOf="@+id/button3"
app:layout_constraintRight_toLeftOf="@+id/button5"
/>
<Button
android:id="@+id/button5"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="Button5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/button4"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
Copy the code9. Layout grouping – Control visibility
Use constraint_referenced_ids to Group controls in the layout, and declare the same Group of controls in app:constraint_referenced_ids. The group class inherits ConstraintHelper, and finally inherits view. The array of ids we set with the referenced_IDS property is eventually stored in it, and the updatePreLayout method iterates through the Settings visible or invisible, etc. For example, in the figure below, INVISIBLE is set in the group where BUTTon1 belongs, and button2 remains bound with Button1. The two buttons placed in the lower left corner were hidden because the group was set to GONE. Note that once set to a group control, the child control’s visibility property does not take effect. The group Settings are hidden and visible. By default, the group is displayed.
<? 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">
<android.support.constraint.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
app:constraint_referenced_ids="button1"/>
<android.support.constraint.Group
android:id="@+id/group2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:constraint_referenced_ids="button3,button4"/>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="80dp"
android:text="Button1"
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/button2"/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"
app:layout_constraintLeft_toRightOf="@+id/button1"
app:layout_constraintRight_toRightOf="parent"/>
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
/>
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/button3"
/>
</android.support.constraint.ConstraintLayout>
Copy the codeThe group, like the space control, is empty, with no action drawn and no performance burden. The same goes for Guideline,
public void onDraw(Canvas canvas) {
}
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (this.mUseViewMeasure) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
} else{ this.setMeasuredDimension(0, 0); }}Copy the code10. Barrier
If A controls are to be to the right of both B and C, and B and C are not of the same length, then the layout does not determine which of these controls is best to write to the right. Instead, A layer is nested to the right of the parent layout of B and C, which is bad, so the Barrier is used for this particular layout.
<? 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">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="80dp"
android:text="Button1-111111111111"
app:layout_constraintLeft_toLeftOf="parent"
/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="80dp"
android:text="Button2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button1"/>
<android.support.constraint.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="button1,button2"/>
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Button3"
app:layout_constraintLeft_toRightOf="@id/barrier"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
Copy the code
The following is an example of a UI effect in practice for reference only. The entire layout has only one layer, avoiding the problem of nested overchecking. “Zhang SAN”, the following circle picture and the text prompt “I’m out of school” are all required to be centered vertically as a whole. If the conventional layout needs to center these three together in a container, there must be nesting, but the constrained layout does not need to do so. When the following circle picture disappears, I will automatically rely on the text prompt displayed on the right side of the square picture on the left, aligned with a three left, the traditional layout also needs to nest the text and circle picture on my school, so plus the nesting above, resulting in more than 2 layers of nesting.
<? 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="67dp"
>
<ImageView
android:id="@+id/sdv_chat_dialog_header"
android:layout_width="44dp"
android:layout_height="44dp"
android:layout_marginLeft="16dp"
android:background="@null"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:src="@drawable/ic_launcher_background"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="@+id/rrv_remind_unread"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="34dp"
android:gravity="center"
android:includeFontPadding="false"
android:textColor="#ff4444"
app:layout_constraintLeft_toLeftOf="@id/sdv_chat_dialog_header"
app:layout_constraintTop_toTopOf="@id/sdv_chat_dialog_header"
tools:text="9"/>
<android.support.constraint.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="sdv_chat_dialog_header"/>
<android.support.constraint.Guideline
android:id="@+id/guideline_horizontal_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"
/>
<TextView
android:id="@+id/tv_chat_dialog_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="11dp"
android:includeFontPadding="false"
android:singleLine="true"
android:textColor="# 000000"
android:textSize="17sp"
app:layout_constraintBottom_toTopOf="@id/guideline_horizontal_center"
app:layout_constraintLeft_toRightOf="@id/barrier"
tools:text="Zhang"/>
<TextView
android:id="@+id/tv_chat_dialog_update_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:includeFontPadding="false"
android:textSize="12sp"
app:layout_constraintBaseline_toBaselineOf="@id/tv_chat_dialog_name"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="18:05"/>
<ImageView
android:id="@+id/iv_chat_watch_sync"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="11dp"
android:layout_marginRight="5dp"
android:layout_marginTop="2dp"
android:background="@mipmap/ic_synchronization"
android:visibility="visible"
app:layout_constraintLeft_toRightOf="@id/barrier"
app:layout_constraintTop_toBottomOf="@id/guideline_horizontal_center"
/>
<TextView
android:id="@+id/tv_chat_dialog_last_msg_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:includeFontPadding="false"
android:singleLine="true"
android:textColor="# 000000"
android:textSize="13sp"
app:layout_constraintLeft_toRightOf="@id/iv_chat_watch_sync"
app:layout_constraintRight_toLeftOf="@id/tv_chat_dialog_update_time"
app:layout_constraintTop_toBottomOf="@id/guideline_horizontal_center"
app:layout_goneMarginLeft="11dp"
tools:text="I'm out of school, I'm out of school, I'm out of school, I'm out of school, I'm out of school, I'm out of school, I'm out of school, I'm out of school. 8888888."/>
<View
android:id="@+id/view_divider"
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_marginLeft="72dp"
android:background="#cccccc"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
</android.support.constraint.ConstraintLayout>
Copy the codeAt the end
Constrained layouts do not have to be a complete replacement for traditional layouts; what is appropriate is best. The best way to code is to make full use of the features of various layouts to meet the UI effect. At this point, some of the common uses are in place, but what’s left is the actual running-in API, and some of the more advanced uses we’ll talk about next time. ConstraintSet, for example, dynamically changing constraints in code, doing layout animations. The code doesn’t have to be posted. It’s all up there. You can copy it and modify it to get familiar with the API.