Understand the usage of constraintlayout in a paper

ConstraintLayoutThe RelativeLayout performance is better and the layout is more flexible. It's recommended in the latest Google Android Development documentation, here's a ConstraintLayout look at the specific usage.

0x00 relative position (Relative positioning)

This is relatively simple, see figure explanation, assume that control B is placed on the right side of control A, you can use the layout_constraintLeft_toRightOf property.

<button android:id= "@+id/buttona" .../><button android:id= "@+id/buttonb     " ... app:layout_constraintleft_torightof= "@+id/buttona"/>

Look at figure 2 to see what the Control Constraint property represents.

Constraint properties similar to relative positions are:

• 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

0x01 margin (Margins)

This attribute is understandable, see figure 3

You can set the margin of a control relative to another control by using the following properties:

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

The property value must be greater than or equal to 0.

Then take a look at an RelativeLayout attribute that doesn't:

0x02 Margins when connected to a GONE widget

When a relative control is hidden, you ConstraintLayout can also set a different margin:

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

The specific chestnuts will be covered below.

0x03 centering positioning and bias

Centering and setting deviations

<android.support.constraint.constraintlayout ><button android:id= "@+id/button" ... app:layout_ constraintleft_toleftof= "Parent" app:layout_constraintright_torightof= "parent"/>                                     </ Android.support.constraint.constraintlayout>

You can also set the Bias property to indicate that the child control is prone to the position of the parent control, and you can use the property:

• layout_constraintHorizontal_bias
• layout_constraintVertical_bias

Assume that setting control A is 30% relative to the parent control's lateral deviation:

<android.support.constraint.constraintlayout ...>             <button android:id= "@+id/button"                 ... app:layout_constrainthorizontal_bias= "0.3"                 app:layout_constraintleft_toleftof= "parent"                 App:layout_ constraintright_torightof= "Parent"/></android.support.constraint.constraintlayout>

0x04 arc positioning (Circular positioning)

This property was added in version 1.1.

The properties you can use are:

• layout_constraintCircle: The ID of the relative control
• layout_constraintCircleRadius: The distance relative to the center of the control, which is the radius of the circle
• layout_constraintCircleAngle: Relative angle (from 0 to 360 degrees)

For example, Figure 6 code example

<button android:id= "@+id/buttona" .../><button android:id= "@+id/buttonb" ... app:layout_constraintcircle= " @+id/buttona "app:layout_constraintcircleradius=" 100DP "app:layout_constraintcircleangle="/>

0x05 Visibility Behavior

In general, when you set a GONE property, the control does not appear in the layout, and the B control has no effect on the margin property of the a control.

But constraintlayout Special handling is possible for controls that have been set gone property. When a control is set gone , a control is equivalent to becoming a point , the B control remains in effect relative to the constraint on a . In the code example in Figure 7, the A control is set to gone when the B control's margin property is still useful.

<android.support.constraint.constraintlayout ...>    <button        android:id= "@+id/buttonA"        Android:layout_width= "Wrap_content"        android:layout_height= "wrap_content"        android:text= "button A"        Android:visibility= "Gone"        app:layout_constraintleft_toleftof= "parent"/><!--when the A control is set to gone, The margin property of the B control is working, that is, the left margin or 30dp-->    <button        android:id= "@+id/buttonb"        android:layout_width= "wrap _content "        android:layout_height=" wrap_content "        android:layout_margin=" 30DP "        android:text=" Button B "        app:layout_constraintleft_torightof=" @+id/buttona "/></ Android.support.constraint.constraintlayout>

　　

Sometimes, however,a B control does not want to work with properties of a hidden control . You can use the properties mentioned above 0x02 goneMargin .

<android.support.constraint.constraintlayout ...>    <button        android:id= "@+id/buttonA"        Android:layout_width= "Wrap_content"        android:layout_height= "wrap_content"        android:text= "button A"        Android:visibility= "Gone"        app:layout_constraintleft_toleftof= "parent"/><!--when the A control is set to gone, If you want the left margin of the B control to be 0DP, you can set the Layout_gonemarginleft property--    <button        android:id= "@+id/buttonb"        android: Layout_width= "Wrap_content"        android:layout_height= "wrap_content"        android:layout_margin= "30DP        " android:text= "button B"        app:layout_gonemarginleft= "0DP"        app:layout_constraintleft_torightof= "@+id/ Buttona "/></android.support.constraint.constraintlayout>

　　

0X06 dimension constraint (Dimensions constraints)

Set minimum or maximum dimensions

You can use the following properties:

• android:minWidth
• android:minHeight
• android:maxWidth
• android:maxHeight

ConstraintLayout wrap_content The above properties can work when the width height is set to.

Set a percent layout

When ConstraintLayout the width or height of a sub-layout is set to 0DP, you can set percentages for width or height, such as setting the width of a button to 30% of the screen width, so you can do this:

<android.support.constraint.constraintlayout ...>    <!--button The Width property is set to 0DP, and then you need to specify Layout_constraintwidth _default, and layout_constraintwidth_percent two properties--    <button        android:id= "@+id/buttonb"        android: Layout_width= "0DP"        android:layout_height= "wrap_content"        android:text= "button B"        app:layout_ constraintleft_toleftof= "Parent"        app:layout_constraintwidth_default= "percent"        app:layout_ Constraintwidth_percent= "0.3"/></android.support.constraint.constraintlayout>

　　

To set the width percent layout:

1. layout_widthor layout_height set to 0DP
2. Set layout_constraintWidth_default="percent" orlayout_constraintHeight_default="percent"
3. Pass layout_constraintWidth_percent or layout_constraintHeight_percent specify a percentage

Set the width to height ratio

When layout_width or layout_height set to 0DP, you can also layout_constraintDimensionRatio set the aspect ratio by setting the height. The value represented width:height by the scale.

<button android:layout_width= "wrap_content" android:layout_height= "0DP" app:layout_constraintdimensionratio= " 1:1 "/>

　　

When layout_width layout_height set to 0DP, the app:layout_constraintDimensionRatio ratio of the width to height is specified. The width height of the control is then set to a width that is relative to the size of the parent layout.

<android.support.constraint.constraintlayout ...>    <button        android:layout_width= "0DP"        android:layout_height= "0DP"        app:layout_constraintbottom_tobottomof= "parent"        App:layout_ constraintdimensionratio= "H,16:9"        app:layout_constrainttop_totopof= "parent"/></ Android.support.constraint.constraintlayout>

h,16:9The implication is that h:w=16:9 you can also set the w,9:16 effect to be the same.

0x07 Chains

A chain constraint can be formed when controls on a horizontal or a axis are constrained to each other.

In Figure 9, the A control and the B control are bound to each other, which is a simple chained constraint.

Chain Head

Chain Style

You can pass layout_constraintHorizontal_chainStyle or layout_constraintVertical_chainStyle set the style of a chained control. This property is a bit like LinearLayout the attributes in the weight split layout.

• CHAIN_SPREAD
• Weighted Chain
• CHAIN_SPREAD_INSIDE
• CHAIN_PACKED

Set weights

• layout_constraintHorizontal_weight
• layout_constraintVertical_weight

0x08 References

Https://developer.android.com/reference/android/support/constraint/ConstraintLayout

Understand the usage of constraintlayout in a paper