Android Base Layout Constraintlayout

Google I/O 2016 on the release of Constraintlayout, it is said to be very powerful, then a probe!

Gradle Configuration

      ‘com.android.support.constraint:constraint-layout:1.0.0-beta2‘  

• 1

• 1

Reading premise: Familiar with four basic layout

First, Position control

• 8 Border control Properties
  Note: The leftmost side represents the leftmost left of the movement, and the left side represents the left edge of the view.

 app:layout_constraintleft_toleftof app:layout_ Constraintleft_torightof my leftmost position in the other person's right below the meaning resembles app:layout_ Constraintright_torightof app:layout_constraintright_toleftof Span class= "Hljs-tag" >app:layout_constrainttop_totopof app:layout_constrainttop_tobottomof app: Layout_constraintbottom_tobottomof app:layout_constraintBottom _totopof                

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

Don't understand it's okay, look at the example.

* 例如：

 <!--, A on the left, a C on the right, if I want to create a new b between a C, as follows---<button app:layout_constraintleft_torightof=" @+id/bt_a " app:layout_constraintright_toleftof= "@+id/bt_c" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:text= "B"/> <!-- Literally: 1. My leftmost position, on the right-hand side of Button A and <!--literally: 1. My rightmost position, on the left side of Button C-->  

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

As in, the leftmost and rightmost positions have been determined, B appears in the middle of a and C, but if I don't want to do it in the middle (for example, I want to make a right point)

• 2 Offset Properties are introduced here

    layout_constraintHorizontal_bias（水平方向偏移）（范围0-1）    layout_constraintVertical_bias（垂直方向偏移）（范围0-1）  

• 1
• 2

• 1
• 2

How do you understand that? I only send a diagram to not talk, look at the picture
The horizontal offset of B is 0

    app:layout_constraintHorizontal_bias="0"

• 1

• 1

The horizontal offset of B is 0.5

    app:layout_constraintHorizontal_bias="0.5"

• 1

• 1

The horizontal offset of B is 0.7

    app:layout_constraintHorizontal_bias="0.7"

• 1

• 1

The horizontal offset of B is 1

    app:layout_constraintHorizontal_bias="1"    

• 1

• 1

Summary: (Do you understand?) Do not understand, please continue to look at the picture),
1. The leftmost, rightmost, topmost, and bottom position of the view can be fixed by 8 boundary constraint attributes.
2. By setting the Offset property, you can control the view to move in the boundary range, the leftmost side is 0, the rightmost is 1, the middle is the 0.5
3. When the boundary constraint attribute is set, view automatically appears in the middle, that is, the default offset property is 0.5

Second, size control

• Two layout size control properties are introduced first

    //水平方向上比重，类似线性布局    layout_constraintVertical_weight  //垂直方向上比重，类似线性布局

• 1
• 2

• 1
• 2

Below I will use constraintlayout to imitate a horizontal linear layout example

Full Layout file:

    <?xml version= "1.0" encoding= "Utf-8"?><Android.support.constraint.ConstraintLayoutXmlns: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:ignore="Missingconstraints" ><!--a border control property has left and right--<ButtonAndroid:id="@+id/bt_a"Android:layout_width="0DP"android:layout_height="Wrap_content"android:text=Aapp:layout_constrainthorizontal_weight="1"app:layout_constraintleft_toleftof="Parent"app:layout_constraintright_toleftof="@id/bt_b"/><!--B Border control properties also have left and right--<ButtonAndroid:id="@+id/bt_b"Android:layout_width="0DP"android:layout_height="Wrap_content"android:text=Bapp:layout_constrainthorizontal_weight="1"app:layout_constraintleft_torightof="@id/bt_a"app:layout_constraintright_toleftof= "@id/bt_c"/> <!--C Border control property only right--<button android:id= "@+id/bt_c" android: Layout_width= "0DP" android:layout_height=  "wrap_content" android:text= "C" Span class= "Hljs-attribute" >app:layout_constrainthorizontal_weight= "1" app:layout_constraintright_torightof=" parent "/> </ANDROID.SUPPORT.CONSTRAINT.CONSTRAINTLAYOUT>   

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21st
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21st
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34

The effect is as follows (c is significantly smaller, indicating that the C specific gravity setting has no effect)

Conclusion:
1. Achieve horizontal linear layout, all view must set the left and right border control properties, and control each other
2. To achieve the specific gravity size control, must be set layout_width= "0DP"

Layout (can read basically that you have mastered the specific gravity control)

    <?xml version= "1.0" encoding= "Utf-8"?><Android.support.constraint.ConstraintLayoutXmlns: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:ignore="Missingconstraints" ><TextViewAndroid:background="#0f0"Android:id="@+id/bt_a"Android:layout_width="0DP"android:layout_height="0DP"android:text=Aapp:layout_constraintbottom_totopof="@id/bt_b"app:layout_constrainthorizontal_weight="1"app:layout_constraintleft_toleftof="Parent"app:layout_constraintright_toleftof="@id/bt_b"app:layout_constrainttop_totopof="Parent"app:layout_constraintvertical_weight="1"/><TextViewAndroid:background="#0f0"Android:id="@+id/bt_b"Android:layout_width="0DP"android:layout_height="0DP"android:text=Bapp:layout_constraintbottom_totopof="@id/bt_c"app:layout_constrainthorizontal_weight="1"app:layout_constraintleft_torightof="@id/bt_a"app:layout_constraintright_toleftof="@id/bt_c"app:layout_constrainttop_tobottomof="@id/bt_a"app:layout_constraintvertical_weight="1"/><TextViewAndroid:background="#0f0"Android:id="@+id/bt_c"Android:layout_width="0DP"android:layout_height= "0DP"  Android:text= "C" app:layout_constraintbottom_tobottomof=< Span class= "Hljs-value" > "parent" app:layout_constrainthorizontal_weight= "1" app:layout_constraintleft_torightof= "@id /bt_b "app:layout_constraintright_torightof=" parent "app:layout_constrainttop_tobottomof= "@id/bt_b" app:layout_constraintvertical_weight=" 1 "/>  </ANDROID.SUPPORT.CONSTRAINT.CONSTRAINTLAYOUT>     

1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• Ten
• one
• 2
• (
• )
• +
• +
• /
• 0
• +
• all
• +
• +
• +
• -
• 29
• +
• +
• all
• +
• +
• PNS
• up
i>39
• *
• all
• +
• -

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21st
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44

As follows:

Third, position control supplement

Absolute coordinates : the upper-left corner of the parent layout defaults to (0,0), which is the coordinate relative to the upper-left corner of the parent layout

    layout_editor_absoluteX 绝对坐标x    layout_editor_absoluteY 绝对坐标y

• 1
• 2

• 1
• 2

when the left bounds control attribute is set, the x absolute coordinates fail, using the underlying layout (Layout_marginleft override)
When the upper bounds control attribute is set, the y absolute coordinates fail, using the base layout (Layout_margintop override)

Therefore, the absolute coordinates: Bad fit, also not good control. Poor reviews.

A separate sheet is attached
Android Studio Super Smart Control setup diagram, as follows

Top

4

Step

0

• Previous Android Share time date conversion Tool class DateTime
• Next Android share Log tool class

Related articles recommended

• Android new features introduced, Constraintlayout fully resolved
• • Application scenarios and summaries of activity styles, status bar transparency, screen brightness issues
• Constraintlayout's Introductory usage
• Android constraintlayout constrained layout detailed
• • Timeless and new, my new book "The second line of code" has been published!

• Android Picture loading frame Most fully parsed (i), the basic usage of glide
• Android Network Programming-download pictures from the network and save them to the memory card
• • Learn about using Android Constraintlayout
• Android Constraintlayout detailed
• • Explore Android Constraintlayout layouts

Guess you're looking for

Android Base Layout Constraintlayout