ConstraintLayout布局的基本使用

Android基础之布局ConstraintLayout

Google I/O 2016 上发布了 ConstraintLayout，据说很强大，那就一探究竟吧！

gradle配置

[html] view plain copy

1. <code class=" hljs bash" style="box-sizing: border-box; margin: 0px auto; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size:undefined; padding: 0px; color: inherit; background-color: transparent; border-radius: 0px; white-space: pre-wrap;">      compile 'com.android.support.constraint:constraint-layout:1.0.0-beta2'  </code>  

阅读前提：熟悉四大基础布局

一、位置控制 8个边界控制属性 
注：最左边表示可移动的最左边，左边表示View的左边边界

[html] view plain copy

1. <code class=" hljs css" style="box-sizing: border-box; margin: 0px auto; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size:undefined; padding: 0px; color: inherit; background-color: transparent; border-radius: 0px; white-space: pre-wrap;">    app:layout_constraintLeft_toLeftOf   
2.     app:layout_constraintLeft_toRightOf 我最左边的位置 在别人的右边 下面的意思类似  
3.     app:layout_constraintRight_toRightOf   
4.     app:layout_constraintRight_toLeftOf  
5.     app:layout_constraintTop_toTopOf   
6.     app:layout_constraintTop_toBottomOf  
7.     app:layout_constraintBottom_toBottomOf  
8.     app:layout_constraintBottom_toTopOf</code>  

不明白没关系，看例子。

[html] view plain copy

1. <code style="box-sizing: border-box; margin: 0px auto; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size:undefined; padding: 0px; color: inherit; background-color: transparent; border-radius: 0px; white-space: pre-wrap;">* 例如：  
2. </code>  

[html] view plain copy

1. <code class=" hljs xml" style="box-sizing: border-box; margin: 0px auto; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size:undefined; padding: 0px; color: inherit; background-color: transparent; border-radius: 0px; white-space: pre-wrap;">    <!--如图，左边一个A，右边一个C，我如果想新建一个B在A C之间，如下-->  
2.      <Button  
3.         app:layout_constraintLeft_toRightOf="@+id/bt_a"  
4.         app:layout_constraintRight_toLeftOf="@+id/bt_c"  
5.         android:layout_width="wrap_content"  
6.         android:layout_height="wrap_content"  
7.         android:text="B"/>  
8.     <!--字面理解：1.我最左边的位置，在button A的右边-->  
9.     <!--字面理解：1.我最右边的位置，在button C的左边--></code>  

如上图中，最左边和最右边的位置已经确定，B出现在A和C中间，但是如果我不想在中间怎么办（比如说我想靠右一点）

这里引入2个偏移属性

[html] view plain copy

1. <code class=" hljs " style="box-sizing: border-box; margin: 0px auto; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size:undefined; padding: 0px; color: inherit; background-color: transparent; border-radius: 0px; white-space: pre-wrap;">    layout_constraintHorizontal_bias（水平方向偏移）（范围0-1）  
2.     layout_constraintVertical_bias（垂直方向偏移）（范围0-1）  </code>  

怎么理解？我只发图不说话，看图 
如图：B的水平偏移为0 

[html] view plain copy

1. <code class=" hljs bash" style="box-sizing: border-box; margin: 0px auto; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size:undefined; padding: 0px; color: inherit; background-color: transparent; border-radius: 0px; white-space: pre-wrap;">    app:layout_constraintHorizontal_bias="0"</code>  

如图：B的水平偏移为0.5 

[html] view plain copy

1. <code class=" hljs bash" style="box-sizing: border-box; margin: 0px auto; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size:undefined; padding: 0px; color: inherit; background-color: transparent; border-radius: 0px; white-space: pre-wrap;">    app:layout_constraintHorizontal_bias="0.5"</code>  

如图：B的水平偏移为0.7 

[html] view plain copy

1. <code class=" hljs bash" style="box-sizing: border-box; margin: 0px auto; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size:undefined; padding: 0px; color: inherit; background-color: transparent; border-radius: 0px; white-space: pre-wrap;">    app:layout_constraintHorizontal_bias="0.7"</code>  

如图：B的水平偏移为1 

[html] view plain copy

1. <code class=" hljs bash" style="box-sizing: border-box; margin: 0px auto; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size:undefined; padding: 0px; color: inherit; background-color: transparent; border-radius: 0px; white-space: pre-wrap;">    app:layout_constraintHorizontal_bias="1"    </code>  

总结：（明白了吗？不明白请继续看图）， 
1.通过8个边界约束属性可以固定View的最左边、最右边、最上面、最下面的位置 
2.通过设置偏移属性，可以控制View在边界范围移动，最左边是0，最右边是1，中间是0.5 
3.当设置了边界约束属性后，View会自动出现在中间，也就是说，默认的偏移属性是0.5

二、大小控制 先介绍两个布局大小控制属性

[html] view plain copy

1. <code class=" hljs cs" style="box-sizing: border-box; margin: 0px auto; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size:undefined; padding: 0px; color: inherit; background-color: transparent; border-radius: 0px; white-space: pre-wrap;">    layout_constraintHorizontal_weight //水平方向上比重，类似线性布局  
2.     layout_constraintVertical_weight  //垂直方向上比重，类似线性布局</code>  

下面我将用ConstraintLayout来模仿一个水平方向的线性布局的例子

完整布局文件：

[html] view plain copy

1. <code class=" hljs xml" style="box-sizing: border-box; margin: 0px auto; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size:undefined; padding: 0px; color: inherit; background-color: transparent; border-radius: 0px; white-space: pre-wrap;">    <?xml version="1.0" encoding="utf-8"?>  
2.     <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.         xmlns:app="http://schemas.android.com/apk/res-auto"  
4.         xmlns:tools="http://schemas.android.com/tools"  
5.         android:layout_width="match_parent"  
6.         android:layout_height="match_parent"  
7.         tools:ignore="MissingConstraints">  
8.         <!--A边界控制属性 有 左 和 右-->  
9.         <Button  
10.             android:id="@+id/bt_a"  
11.             android:layout_width="0dp"  
12.             android:layout_height="wrap_content"  
13.             android:text="A"  
14.             app:layout_constraintHorizontal_weight="1"  
15.             app:layout_constraintLeft_toLeftOf="parent"  
16.             app:layout_constraintRight_toLeftOf="@id/bt_b"/>  
17.         <!--B边界控制属性 也有 左 和 右-->  
18.         <Button  
19.             android:id="@+id/bt_b"  
20.             android:layout_width="0dp"  
21.             android:layout_height="wrap_content"  
22.             android:text="B"  
23.             app:layout_constraintHorizontal_weight="1"  
24.             app:layout_constraintLeft_toRightOf="@id/bt_a"  
25.             app:layout_constraintRight_toLeftOf="@id/bt_c"/>  
26.         <!--C边界控制属性 只有右-->  
27.         <Button  
28.             android:id="@+id/bt_c"  
29.             android:layout_width="0dp"  
30.             android:layout_height="wrap_content"  
31.             android:text="C"  
32.             app:layout_constraintHorizontal_weight="1"  
33.             app:layout_constraintRight_toRightOf="parent"/>  
34.     </android.support.constraint.ConstraintLayout></code>  

效果如下(效果图中C明显比较小，说明C 比重设置没有效果) 

结论： 
1.实现水平方向线性布局，所有的View都必须设置左右边界控制属性，而且相互控制 
2.实现比重大小控制，必须设置layout_width=”0dp”

如图布局（能看懂基本上说明你已经掌握了比重控制）

[html] view plain copy

1. <code class=" hljs xml" style="box-sizing: border-box; margin: 0px auto; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size:undefined; padding: 0px; color: inherit; background-color: transparent; border-radius: 0px; white-space: pre-wrap;">    <?xml version="1.0" encoding="utf-8"?>  
2.     <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.         xmlns:app="http://schemas.android.com/apk/res-auto"  
4.         xmlns:tools="http://schemas.android.com/tools"  
5.         android:layout_width="match_parent"  
6.         android:layout_height="match_parent"  
7.         tools:ignore="MissingConstraints">  
8.         <TextView  
9.             android:background="#0f0"  
10.             android:id="@+id/bt_a"  
11.             android:layout_width="0dp"  
12.             android:layout_height="0dp"  
13.             android:text="A"  
14.             app:layout_constraintBottom_toTopOf="@id/bt_b"  
15.             app:layout_constraintHorizontal_weight="1"  
16.             app:layout_constraintLeft_toLeftOf="parent"  
17.             app:layout_constraintRight_toLeftOf="@id/bt_b"  
18.             app:layout_constraintTop_toTopOf="parent"  
19.             app:layout_constraintVertical_weight="1"/>  
20.         <TextView  
21.             android:background="#0f0"  
22.             android:id="@+id/bt_b"  
23.             android:layout_width="0dp"  
24.             android:layout_height="0dp"  
25.             android:text="B"  
26.             app:layout_constraintBottom_toTopOf="@id/bt_c"  
27.             app:layout_constraintHorizontal_weight="1"  
28.             app:layout_constraintLeft_toRightOf="@id/bt_a"  
29.             app:layout_constraintRight_toLeftOf="@id/bt_c"  
30.             app:layout_constraintTop_toBottomOf="@id/bt_a"  
31.             app:layout_constraintVertical_weight="1"/>  
32.         <TextView  
33.             android:background="#0f0"  
34.             android:id="@+id/bt_c"  
35.             android:layout_width="0dp"  
36.             android:layout_height="0dp"  
37.             android:text="C"  
38.             app:layout_constraintBottom_toBottomOf="parent"  
39.             app:layout_constraintHorizontal_weight="1"  
40.             app:layout_constraintLeft_toRightOf="@id/bt_b"  
41.             app:layout_constraintRight_toRightOf="parent"  
42.             app:layout_constraintTop_toBottomOf="@id/bt_b"  
43.             app:layout_constraintVertical_weight="1"/>  
44.     </android.support.constraint.ConstraintLayout></code>  

效果图如下： 

三、位置控制补充

绝对坐标：父布局左上角默认为（0，0），这个坐标是是相对于父布局左上角的坐标

[html] view plain copy

1. <code class=" hljs " style="box-sizing: border-box; margin: 0px auto; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size:undefined; padding: 0px; color: inherit; background-color: transparent; border-radius: 0px; white-space: pre-wrap;">    layout_editor_absoluteX 绝对坐标x  
2.     layout_editor_absoluteY 绝对坐标y</code>  

当设置了左边界控制属性，x绝对坐标失效，请使用基础布局的（layout_marginLeft替代） 
当设置了上边界控制属性，y绝对坐标失效，请使用基础布局的（layout_marginTop替代）

因此，，绝对坐标。。不好适配，也不好控制。差评。

另外附上一张 
Android Studio 超智能的控制设置图，如下

以上就是Android基础布局之ConstraintLayout的全文介绍,希望对您学习Android应用开发有所帮助.