After Vigor updated the Android Studio IDE, I found that each time a new Activity, the layout file created by default this is the following:
<?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=".app.PickFirstActivity">
</android.support.constraint.ConstraintLayout>
ConstraintLayout in the end is what stuff? After previously been used to complete the layout with LinearLayout, so every time a file is automatically created layout, Vigor have to recopy part LinearLayout layout format over. I feel very troublesome, very strange, so the spirit of curiosity, research and children's shoes under ConstraintLayout together.
1 Introduction
ConstraintLayout layout constraint is the ViewGroup, it may be used in the above Api9 Android system, it appears mainly to solve the problem of excessive nested arrangement, a flexible member positioned and controlled to be small. From Android Studio 2.3 from the official template used by default ConstraintLayout .
2. Why ConstraintLayout
Often encountered in the development process some complex UI, the layout of nested too many problems may arise, nesting more, the equipment needed to draw view time and computing power are also more. Simple example:
Assume now that write such a layout, some people may like this:
The first is a vertical LinearLayout, which put two levels of LinearLayout, then put in a horizontal LinearLayout TextView inside. Such a wording of nested layers LinearLayout.
Some people take into account the risks of nested layouts, so use a RelativeLayout to hold all the controls. So the question is, since we use RelativeLayout can solve the problem, why use ConstraintLayout it? Because ConstraintLayout use more flexible than RelativeLayout, better performance! Another point is ConstraintLayout can control the position and size constraints to scale, to better fit different screen size models.
3. How to use ConstraintLayout
3.1 Add dependence
First we need to add a dependency ConstraintLayout in app / build.gradle file, as shown below.
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
3.2 relative positioning
Restraint member is positioned opposite to another location, say the abstract may be a bit, for example:
As shown in Figure, TextView2 on the right side of TextView1, TextView3 below TextView1, this time in the layout file which should be written:
<TextView
android:id="@+id/TextView1"
...
android:text="TextView1" />
<TextView
android:id="@+id/TextView2"
...
app:layout_constraintLeft_toRightOf="@+id/TextView1" />
<TextView
android:id="@+id/TextView3"
...
app:layout_constraintTop_toBottomOf="@+id/TextView1" />
TextView2 used in the above code in the app: layout_constraintLeft_toRightOf = "@ + id / TextView1" this attribute, he meant the left to the right TextView1 TextView2 constraint, as shown below:
Similarly TextView3 TextView1 below, the need to use app: layout_constraintTop_toBottomOf = "@ + id / TextView1", i.e., the upper bound of TextView1 TextView3 to below.
下面来看看相对定位的常用属性：
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
The above properties have a more interesting layout_constraintBaseline_toBaselineOf
Baseline refers to the text baseline, for example:
As shown, two TextView highly inconsistent, but they also want text alignment, this time can be used layout_constraintBaseline_toBaselineOf, code is as follows:
<TextView
android:id="@+id/TextView1"
.../>
<TextView
android:id="@+id/TextView2"
...
app:layout_constraintLeft_toRightOf="@+id/TextView1"
app:layout_constraintBaseline_toBaselineOf="@+id/TextView1"/>
Results are as follows:
ConstraintLayout relative positioning with RelativeLayout usage is quite similar, with a map below summarizes the relative positioning:
Angular positioning 3.3
Angular positioning means that can be used at an angle and a distance constraint centers of the two spaces. for example:
<TextView
android:id="@+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/TextView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintCircle="@+id/TextView1"
app:layout_constraintCircleAngle="120"
app:layout_constraintCircleRadius="150dp" />
In the example above TextView2 uses three attributes:
App: layout_constraintCircle = "@ + ID / TextView1"
App: layout_constraintCircleAngle = "120" (angle)
App: layout_constraintCircleRadius = "150dp" (distance)
refers to the center of TextView2 in TextView1 It centers 120 degrees, distance 150dp, the following effects:
3.4 Margins
- 3.4.1 Common margin
ConstraintLayout margin following common attributes:
Android: layout_marginStart
Android: layout_marginEnd
Android: layout_marginLeft
Android: layout_marginTop
Android: layout_marginRight
Android: layout_marginBottom
It does not seem to make any difference with the other layout, but in fact controls ConstraintLayout inside to achieve margin, you must first constraint position the control in ConstraintLayout where, for example:
<android.support.constraint.ConstraintLayout
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_marginLeft="10dp"
android:layout_marginTop="10dp" />
</android.support.constraint.ConstraintLayout>
If another layout, the TextView1 position should have a margin of 10dp from the left and above the border, but in ConstraintLayout years, is not effective because TextView1 position in the layout where no constraints. The correct wording is as follows:
<android.support.constraint.ConstraintLayout
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_marginLeft="10dp"
android:layout_marginTop="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
The TextView1 the left and upper bound to the parent of the left and top, this margin will take effect, the effect is as follows:
When using margin to pay attention to two things:
control must be bound in the layout in a relative position of the
margin can be greater than or equal to 0
- 3.4.2 goneMargin
goneMargin main controls for restricting the visibility of the margin is set to a value used when gone, the following properties:
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
For example:
Suppose the left to the right TextView1 TextView2 constraints and to set a TextView2 app: layout_goneMarginLeft = "10dp", code is as follows:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/TextView1"
.../>
<TextView
android:id="@+id/TextView2"
...
app:layout_constraintLeft_toRightOf="@+id/TextView1"
app:layout_goneMarginLeft="10dp"
/>
</android.support.constraint.ConstraintLayout>
Results are as follows, TextView2 the right TextView1, and no margins.
This time visibility to the TextView1 gone, the effect is as follows:
After TextView1 disappear, TextView2 there is a margin left 10dp distance.
3.5 and centrally offset
In RelativeLayout, the layout of the controls in the middle of the layout_centerInParent method is set to true, but the wording in ConstraintLayout are:
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
Means the left and right upper and lower control layout constraints vertically and horizontally, so that the control can be in the middle of the layout. Similarly RelativeLayout corresponds to the horizontal center layout_centerHorizontal about ConstraintLayout constraints about control for the parent; layout_centerVertical RelativeLayout centered vertically in the vertical corresponding to the control's parent ConstraintLayout constrained vertically.
Since ConstraintLayout been bound in a centered position relative to the control, it is possible to use the margin, as follows:
<TextView
android:id="@+id/TextView1"
...
android:layout_marginLeft="100dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
Results are as follows:
After the above TextView1 used layout_marginLeft horizontal center = "100dp" 100dp shifted rightward. In addition to such an offset outside, ConstraintLayout is also provided another attribute offset:
layout_constraintHorizontal_bias horizontal offset
layout_constraintVertical_bias vertical offset
for example:
<TextView
android:id="@+id/TextView1"
...
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
Results are as follows:
If we were to achieve the horizontal offset, the layout_constraintHorizontal_bias TextView1 to assign a value in the range of 0-1, if the values 0, then the left side of the layout of most, if value of 1, the rightmost TextView1 TextView1 in the layout, If the assignment is 0.5 if, the level of the middle, if 0.3 if assigned, is more inclined to the left.
Similarly vertical offset.
3.6 size constraints
Controls size can be specified in four different ways:
-
Using the specified size
-
Use wrap_content, so that control their own computing size
when the height or width of the control is wrap_content, you can use the following attributes to control the maximum and minimum height or width:
Android: minWidth minimum width
android: minHeight minimum height
android: maxWidth maximum width
android: maxHeight maximum height of
attention! When ConstraintLayout is 1.1 or less, the use of these attributes plus mandatory constraints, as follows:
App: constrainedWidth = "to true"
App: constrainedHeight = "to true" -
Use 0dp (MATCH_CONSTRAINT)
official match_parent not recommended for use in ConstraintLayout may be provided 0dp (MATCH_CONSTRAINT) complex constraint match_parent place, for example:
<TextView
android:id="@+id/TextView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:visibility="visible" />
Width to 0dp, the left and right both sides of parent constraint, and sets the left margin to 50dp, the following effects:
- Aspect ratio
when the width or height of at least one dimension is set to 0dp, by setting the aspect ratio layout_constraintDimensionRatio property, for example:
<TextView
android:id="@+id/TextView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
Width to 0dp, the aspect ratio to 1: 1, this time is a square TextView1 effect is as follows:
In addition, the set value when the aspect ratio, can also be added in front of W or H, respectively, specified width or height restrictions. For example:
App: layout_constraintDimensionRatio = "H, 2: 3" refers to a high: width = 2: 3
App: layout_constraintDimensionRatio = "W is, 2: 3" refers Width: Height = 2: 3
3.7 Chain
If two or more controls constrained together by means of the following figure, it can be considered that they are (lateral chain graph, the longitudinal empathy) strand.
He expressed Code:
<TextView
android:id="@+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/TextView2" />
<TextView
android:id="@+id/TextView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/TextView1"
app:layout_constraintRight_toLeftOf="@+id/TextView3"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="@+id/TextView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/TextView2"
app:layout_constraintRight_toRightOf="parent" />
3 TextView mutual restraint, two ends respectively TextView parent constraints become a chain effect is as follows:
The first control chain is a chain of head of this chain, we can set layout_constraintHorizontal_chainStyle header in the chain to change the style of the entire chain. chains provides three patterns, namely:
CHAIN_SPREAD - Expand element (default);
CHAIN_SPREAD_INSIDE - deployment element, but close to the two ends of the chain of parent;
CHAIN_PACKED - a chain of elements to be packaged together.
as the picture shows:
The above example creates a style chain, in addition to the style chain, can also create a weight chain.
Can be used in the above noted 3 are the wrap_content TextView width, if we set the width of all 0dp, this time may be provided in each of the right lateral layout_constraintHorizontal_weight TextView heavy chain to create a weight (constraintVertical longitudinal), as shown in FIG. :
<TextView
android:id="@+id/TextView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/TextView2"
app:layout_constraintHorizontal_weight="2" />
<TextView
android:id="@+id/TextView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/TextView1"
app:layout_constraintRight_toLeftOf="@+id/TextView3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_weight="3" />
<TextView
android:id="@+id/TextView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/TextView2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_weight="4" />
Results are as follows:
4. aid
4.1 Optimizer
When we use MATCH_CONSTRAINT, ConstraintLayout controls will be carried out 2 measurements, ConstraintLayout can be set in 1.1 layout_optimizationLevel optimized values can be set are:
none: no optimization
standard: optimization only direct constraints and barriers constraint (default)
Direct: optimization of directly binding
barrier: barrier constrained optimization
chain: the chain constrained optimization
dimensions: size measurement optimization
4.2 Barrier
Suppose there are three controls the ABC, AB C on the right, but AB width is not fixed, this time constraint, whether C or B on the right side of the right side A is not right. When this happens you can use Barrier to resolve. Barrier can create a barrier at one side of a plurality of controls, as follows:
This time constraint C as long as the right Barrier on it, the code is as follows:
<TextView
android:id="@+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/TextView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@+id/TextView1" />
<android.support.constraint.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="right"
app:constraint_referenced_ids="TextView1,TextView2" />
<TextView
android:id="@+id/TextView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/barrier" />
app: barrierDirection for the location where the barrier, can be set with a value of: bottom, End, left, right, Start, Top
App: constraint_referenced_ids barrier as a reference control, may be provided a plurality (with "," separated)
4.3 Group
Group plurality of controls can be grouped together, easy to hide or show a set of controls, for example:
<TextView
android:id="@+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/TextView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/TextView1" />
<TextView
android:id="@+id/TextView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@id/TextView2" />
There are three of the TextView side by side, with the Group TextView3 TextView1 and grouped, and then set the visibility of the set of controls as follows:
<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="TextView1,TextView3" />
Results are as follows:
4.4 Placeholder
Placeholder refers placeholders. Placeholder in setContent may be used in () is provided another control id, so that the control moves to the position of the placeholder. for example:
<android.support.constraint.Placeholder
android:id="@+id/placeholder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:content="@+id/textview"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#cccccc"
android:padding="16dp"
android:text="TextView"
android:textColor="#000000"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
新建一个Placeholder约束在屏幕的左上角，新建一个TextView约束在屏幕的右上角，在Placeholder中设置 app:content="@+id/textview"，这时TextView会跑到屏幕的左上角。效果如下：
4.5 Guideline
Guildline像辅助线一样，在预览的时候帮助你完成布局（不会显示在界面上）。
Guildline的主要属性：
android:orientation 垂直vertical，水平horizontal
layout_constraintGuide_begin 开始位置
layout_constraintGuide_end 结束位置
layout_constraintGuide_percent 距离顶部的百分比(orientation = horizontal时则为距离左边)
举个例子：
<android.support.constraint.Guideline
android:id="@+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="50dp" />
<android.support.constraint.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
guideline1为水平辅助线，开始位置是距离顶部50dp，guideline2位垂直辅助线，开始位置为屏幕宽的0.5(中点位置)，效果如下：
