未来布局之星——ConstraintLayout

知识背景

名称：ConstraintLayout 出身：Android Studio 2.2新增功能 成就：2016年Google I/O大会黑马奖；可视化Android界面编写领军角色 关键词：约束

ConstraintLayout是Android Studio 2.2中具有亮点的新功能之一，相比于RelativeLayout、LinearLayout等传统布局，它打破了开发者使用XML编写布局的依赖。

虽然传统布局也可以使用可视化界面拖动控件来搭建布局，但是因为不够灵活，大多数开发者还是会选择通过XML代码来搭建布局。而ConstraintLayout的出现将开发者带入可视化布局编程的新纪元，通过建立控件之间的约束，实现布局的构建。这样做有一个很大的优点，就是减少了布局的嵌套，减少了布局渲染的层数，降低了CPU的消耗，提高了程序的性能。

ConstraintLayout与RelativeLayout相似，都是通过建立控件与控件之间的位置关系来搭建布局，但是ConstraintLayout远远比RelativeLayout强大很多，接下来看一下ConstraintLayout的使用。

建立依赖

ConstraintLayout布局是Android Studio 2.2的新增功能，所以在建立依赖前需要将Android Studio更新至2.2版本或以上。

在app/build.gradle文件中添加依赖，如下：

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'
}

修改布局为ConstraintLayout

打开AndroidStudio，新建一个工程，找到布局文件activity_main.xml，打开让其以Design方式显示，如下图所示。界面中央有两块区域，左边是预览界面，右边的蓝色区域是控件拖动操作界面。

可视化布局搭建

默认创建的activity_main文件的根布局是一个RelativeLayout，接下来将RelativeLayout布局改为ConstraintLayout布局，找到Component Tree，在其下方右键单击activity_main(RelativeLayout)，在弹出的列表中选择Convert RelativeLayout to ConstraintLayout，如下图所示：

将布局修改为ConstraintLayout

删除一个控件

完成转换后，可以在Component Tree下方看到ConstraintLayout里面有原来存在的TextView控件，如果不需要，可以在蓝色区域选中TextView控件，单击键盘delete按钮删除该控件。

切换视图

点击菜单栏的中的Show Design、Show Blueprint和Show Design + Blueprint按钮可以对操作视图进行切换，如下图所示：

切换视图

添加约束

百闻不如一见，先来看看添加约束的操作，如下图所示：

添加约束演示

可以看到，按钮控件有四个方向的约束，如下图所示，按钮的上、下、左、右边上各有一个小圆圈，鼠标可拖动小圆圈到ConstraintLayout，与其添加约束。

Button控件约束

如将按钮下边圆圈拖至ConstraintLayout底部，则按钮移动至底部；再将按钮上边圆圈拖动至ConstraintLayout顶部，垂直方向上有两个约束的按钮控件就会实现垂直居中。

添加约束

约束位置比例调整

当然如果ConstraintLayout添加约束仅仅能实现水平、垂直居中，那么它在功能上与RelativeLayout就没有差别了。除了居中，约束还可以设置控件两边到边界之间的距离比例，通过在右侧属性面板中，拖动水平和垂直方向的进度条来调整两边距离的比例。

调整约束位置比例

控件之间添加约束

除了与ConstraintLayout添加约束，控件与控件之间同样可以添加约束。如下图所示，在调整按钮宽度后，将两个按钮的左右两边添加约束，然后将下方按钮的上边与上方按钮的下边添加约束，拖动下方的按钮，可设置两个按钮之间的外边距。

控件之间添加约束

通过控件之间添加约束和调整约束距离比例，开发者可实现较为复杂的约束。

多控件约束

较为复杂的约束

调整控件外边距及尺寸

细心的读者们或许会发现，在调整控件位置比例的时候，当进度条滑动至100时，控件未能完全贴上布局的右边界，这是因为控件存在外边距。

调整控件外边距

这时候可以修改属性面板中的数值来调整控件的外边距大小，如下图所示：

修改控件外边距

在控件尺寸调整上，ConstraintLayout提供了三种模式，在属性面板中点击下图红色框框区域实现模式的切换。

切换尺寸模式

这三种分别为：

• wrap content

wrap_content

wrap content模式就是平时常用的根据内容来设定控件尺寸。

• 固定值

固定值

固定值模式也是平时常用的，通过设定具体数值来确定控件的大小。如下图所示，切换为固定模式后，在下方的layout_width一栏填写具体的宽度数值。

设置控件大小

• any size

any size

any size与match parent类似，都是充满整个范围，但是不同点在于match parent充满相对于父容器，而any size是相对于约束条件，即在约束条件下，能填充的范围全部充满，如下图所示：

设置为any size

这里说明一下，ConstraintLayout其实也有match parent模式，但是因为ConstraintLayout不存在多层嵌套关系，所以match parent这种相对于父容器的模式在ConstraintLayout中很少会使用。

删除约束

学习了添加约束后，来看看如何删除约束？删除约束有三种方式：

• 删除单个约束 将鼠标移动到要删除的约束对应的小圆圈，待小圆圈出现闪烁的红色圈圈时，点击小圆圈即可删除约束。

删除单个约束

除了上面这种删除方法，也可以在属性面板中，将鼠标移动到下图红色框框标记的位置，待出现叉叉图标，点击可删除该约束。

删除单个约束

• 删除单个控件的所有约束 用鼠标点击控件，在其左下方会出现一个小叉叉图标，点击小图标即可删除当前控件的所有约束。

删除单个控件的所有约束

• 删除当前界面的所有约束 点击工具栏中删除所有约束图标的按钮，即可删除当前界面所有的约束。

删除当且界面的所有约束

Guidelines

学完基本的依赖操作，来看一下ConstraintLayout的进阶用法。这里有一个需求，要求将两个控件合在一起，实现水平居中。如果不使用ConstraintLayout，读者们或许会想到用RelativeLayout嵌套LinearLayout来实现。那么在ConstraintLayout这样不存在多布局嵌套的情况下该怎么实现呢？

这时候就提出了Guidelines，GuideLines就如同Photoshop中参考线的概念一样。如下图，创建一个垂直方向的参考线，将其切换至百分比模式，拖动到50%的位置，再将两个控件在左右两侧分别与Guidelines添加约束，然后两个控件的底边相互添加约束即可实现合并居中的效果。此时ConstraintLayout展现了其强大的优势，通过其特性优雅地完成需求。

Guidelines

这里说明一下，创建完Guidelines后，读者们会发现它很难拖动，这里有一个小技巧：将鼠标按住划过Guidelines，然后放到Guidelines的位置，按住鼠标即可轻松实现拖动。

拖动Guidelines

Autoconnect

或许因为我们是第一次接触ConstraintLayout，所以感觉添加约束的操作很有趣，但是在项目中，当控件数量比较多时，每个控件的每条边都要一个一个添加约束，这样就会拖慢开发效率，所以ConstraintLayout提出了Autoconnect的用法。

如下图所示，单击打开工具栏中Autoconnect功能按钮，将控件拖至屏幕中心，然后约束就会自动添加了，这个相信使用过墨刀设计过APP原型的读者们会感到很熟悉。

Autoconnect

Autoconnect会根据我们的意图来判断是否添加相应的约束，当然自动添加的约束不一定全是想要的效果，这时候可以关闭Autoconnect，然后手动修改约束。

Autoconnect

Inference

Inference与Autoconnect功能相同，都是用于自动添加约束的，但是Inference更加强大。Inference是手动添加约束后，对当前界面所有控件的位置关系添加整体约束关系，感觉和Photoshop里面不同布局中的图像调整好位置后合并可见图层很像。Inference操作如下图所示：

写在后面

本文是在拜读郭霖大神的《Android新特性介绍，ConstraintLayout完全解析》一文后写的，本文的案例和描述基本都是参考自这篇文章，权当是转载来的吧！请叫我佳作搬运工!

最后附上大神原文链接供大家品读：

http://blog.csdn.net/guolin_blog/article/details/53122387

更新20170311

今天简单地翻译了一篇关于ConstraintLayout的官方文档，写了一篇《从官方文档看ConstraintLayout》，欢迎读者们前来指点。