android优先显示右边的布局 安卓显示布局边界

Android 基础之布局ConstraintLayout

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

gradle配置

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的左边边界

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. </code>

不明白没关系，看例子。

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>

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个偏移属性

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. </code>

怎么理解？我只发图不说话，看图 

如图：B的水平偏移为0 

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 

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. </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. </code>

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

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

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

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