ConstraintLayout布局基础用法

最近刚开始使用AS，打开layout第一眼就发现了ConstraintLayout这个新的布局,怀着好奇的心态，我查阅了很多相关的资料；

简单来说，它就是RelativeLayout的升级版本，但是区别与相对布局更加强调约束；何为约束，即控件之间的关系；

它能让你的布局更加扁平化，一般来说一个界面一层就够了；同时借助于AS我们能极其简单的完成界面布局。

工作区

我们先来看看 Android Studio 2.2 Preview1 提供的工作区。

Paste_Image.png

在工作区中有两种预览，一种设计预览，一种叫做蓝图的东西。两者可以辅助进行布局预览，非常Nice。

Paste_Image.png

眼睛图标：用来控制是否显示约束的东西。

Paste_Image.png

磁铁图标：用来自动吸附的东西，就是说两个按钮放在一起的时候会自动按照一定的约束条件进行链接。

Paste_Image.png

清理图标：用来清除所有的约束，当鼠标放倒一个控件上时也会有一个清理图标出现，点击可以清除当前选中的控件的约束。

Paste_Image.png

灯泡图标：用来自动推断约束条件的东西，运用这个可以更加智能快速的完成布局。

Paste_Image.png

调整手柄

Paste_Image.png

拖动该手柄能帮助你调整整个控件的大小。

约束手柄

Paste_Image.png

这个约束手柄位于控件的四边，在四边上有四个小圆点，拖动该圆点并指向另外的控件的一边，哪么可以让该控件对其到指向的控件。当然你可以设置margin来提供对应的间距。如果需要清理掉单个约束，点击该圆点即可。
手柄限制：
左右两边的手柄只能链接到另外一个控件的左右两边，上下手柄同样。

基线手柄

Paste_Image.png

该手柄仅仅出现在有文字的控件中使用，或者继承TextView的控件中使用，其作用是对齐两个控件的文字基线。
基线限制：
基线只能链接到另一个控件的基线。 基线也不能与手柄进行链接。

谷歌的案例

1.首先选择一个约束手柄，并按住鼠标拖动到另外一个控件的手柄原点上，当链接线变成绿色的时候松开鼠标即可创建一个约束。

20160521091948156.png

2.添加图片控件，链接TextView控件的顶部手柄到ImageView底部手柄，并拖动一定间距。可以看出约束添加时文本控件自动吸附到了图片的底部。

20160521091949160.png

3.拖动图片控件顶部手柄到根布局顶部。

20160521091949167.png

4.最后我们同时添加图片左边与右边的约束使其居中对齐。

20160521091950172.png

5.添加基线约束。

20160521091951173.png

是不是很简单？从未感觉布局如此简单，如果使用传统布局进行拖动必定不能做到多屏幕适配的问题，而约束布局却不会，约束强调相互关系，并不固定位置。

约束

约束本质上对视图定义的规则，规则声明视图的位置和屏幕上对齐方式。
相对布局中也有类似的属性，但ConstraintLayout对视图的控制力更强；
例如，相对布局的属性允许我们放置视图：

• layout_toRightOf
• layout_toLeftOf
• layout_toTopOf
• layout_toBottomOf

然而，ConstraintLayout用于更多的特性：

• layout_constraintTop_toTopOf — 期望视图的上边对齐另一个视图的上边。
• layout_constraintTop_toBottomOf — 期望视图的上边对齐另一个视图的底边。
• layout_constraintTop_toLeftOf — 期望视图的上边对齐另一个视图的左边。
• layout_constraintTop_toRightOf — 期望视图的上边对齐另一个视图的右边。
• layout_constraintBottom_toTopOf — 期望视图的下边对齐另一个视图的上边。
• layout_constraintBottom_toBottomOf — 期望视图的底边对齐另一个视图的底边。
• layout_constraintBottom_toLeftOf — 期望视图的底边对齐另一个视图的左边。
• layout_constraintBottom_toRightOf — 期望视图的底边对齐另一个视图的右边。
• layout_constraintLeft_toTopOf — 期望视图的左边对齐另一个视图的上边。
• layout_constraintLeft_toBottomOf — 期望视图的左边对齐另一个视图的底边。
• layout_constraintLeft_toLeftOf — 期望视图的左边对齐另一个视图的左边。
• layout_constraintLeft_toRightOf — 期望视图的左边对齐另一个视图的右边。
• layout_constraintRight_toTopOf — 期望视图的右边对齐另一个视图的上边。
• layout_constraintRight_toBottomOf — 期望视图的右边对齐另一个视图的底边。
• layout_constraintRight_toLeftOf — 期望视图的右边对齐另一个视图的左边。
• layout_constraintRight_toRightOf — 期望视图的右边对齐另一个视图的右边。
• 如果需要，属性支持开始和结尾也可用在左和右对齐。
  注意：ConstraintLayout也向下兼容到API 9

总结

通过本篇文章的学习，基本上一个简单的不需要滚动的布局都可以使用约束布局来完成，也仅仅只需要一层就可以了，所有的控件无论在多一层足够了。

这是否意味着抛弃其他控件？并不是的！约束布局仅仅只是一种新的思路，其适用于界面不太复杂，并且不滚动的界面中布局，如果界面元素很多甚至超过屏幕，哪么并不建议使用约束布局。

另外约束布局仅仅是简单快捷的布局，其性能负担随着界面中的控件数量以及约束条件的增加而增加；所以使用时还需要多多考究。