我自己使用了一段时间的ConstraintLayout，比起以前的布局模式发现真的是太好用了，完全可以使用Layout Editer通过拖拉方式完成一套复杂的布局，比起以前写xml效率高了很多.
目录
第一章
1,准备工作
2,基础知识
第二章
1,元素之间的约束
2,Pack Tool和Infer Tool
3,调整纵横比例
4,使用guideline进行相对约束
5,使用链，一体化多个元素

第一章

准备工作

你需要安装Android Studio 3.0
然后创建一个ConstraintLayout根布局的Layout文件

image.png

我们会看见创建一个ConstraintLayout根布局的xml

image.png
下面我切换到Design模式，拖一个ImageView看看是什么效果
image.png

基础知识

为什么叫它ConstraintLayout? 这里很重要的一个概念就是Constraint,View的摆放是受约束的，我们看看它是如何受到约束的.

demo1.gif

上面这张图展示了上下左右添加约束的方法。
我们可以看到右上角有一个标记指示器

image.png
这个标记指示器的作用主要是用来调整元素在它的父布局（这里就是ConstraintLayout的位置和Margin）下面说说几个元素的作用：
元素一：

这两个轴表示横向纵向位置百分比。
元素二：
这个表示上下左右的margin,注意这个是在横向纵向位置百分比的基础上的margin.
元素三:
元素大小模式，这种模式可以点击切换，有以下三种:

image.png
Match Constraints模式：意思是填充所有可用的空间，注意它和match_parent的区分，在ConstraintLayout中是没有match_parent这个参数的，当我们使用Match Constraints这种模式的时候它的layout_width和layout_height自动变成0dip.
image.png
Wrap Content模式：这个模式就是wrap_content，表示按照实际大小摆放.
image.png
Fixed模式：需要描述元素的宽度和高度，按照这个宽度和高度摆放.

第二章

元素之间的约束

下面来介绍以下元素和元素之间如何添加约束

demo2.gif

其实我们只需要按照图片上展示的简单的拖动连线就能够添加元素和元素之间的约束，图中展示了添加两个按钮的横向约束关系。有时候我们非常棘手的一个布局需求是想让如下图中的TextView和EditText的文字内容对齐，而不是控件对齐，这里我们就要用到一个基线约束（baseline constraint）.

image.png
当鼠标停留再TextView上面会出现一个ad的按钮，点击它，会出现绿色的下划线，连接到另外一个元素，进行基线约束。
demo3.gif

下面再来看一种情况，有按钮1和按钮2，它们起初的约束关系见动画，注意按钮2的是底部约束的，当我为按钮2添加了基线约束后，按钮2的底部约束便消失了.

demo1.gif

Pack Tool和Infer Tool

下面来说说这两个工具有什么用，我们先说一下Pack Tool。编辑器上面的Tool Bar有一个

image.png

这就是Pack Tool,它用来干嘛？，下面来做个示范

demo2.gif
这个很容易理解它就是占用可用的区域。
Infer Tool又是什么呢？它其实是根据当前的摆放位置自动约束所有元素，
demo3.gif

动画里面可以看出3个按钮开始并没有任何约束关系，当我点击Infer Tool的时候自动帮我根据当前元素位置添加了约束关系.

调整纵横比例

一旦我们在一个元素上面把它的宽度或者高度设置成为Match Constraints模式就会出现如图所示的纵横比调整按钮，点击过后就可以调整纵横比.

image.png
demo1.gif

通过这个纵横比调整在不同屏幕大小的手机上面都能保持良好的显示效果.

使用guideline进行相对约束

下面来说说如何使用强大的guideline功能进行相对约束，该功能很强大，应该是会经常用到的功能.
例如我有以下一个需求，

image.png

我想使这两个ImageView以3:1的比例显示在不同分辨率的手机，做到多分辨率适配。按照以往的做法应该是使用LinearLayout的weight配置比例，但是目前我们用ConstraintLayout如何完成这个需求呢，那就要用到guideline功能了。

image.png
我们可以通过上面的ActionBar点击这个按钮去创建Guideline.
下面展示一下如何使用它去作为参照物，左右两张图可以相对它去设置约束。
demo1.gif

我选择的垂直的Guideline，注意刚添加这个Guideline的时候我点击了这条Line，使其切换成百分比模式，这样我们可以保证在不同手机上面它的位置是一样的。这条线的约束位置不同手机上面它的位置是一样的，用它约束的元素位置在不同分辨率的手机上也会保持相同.

使用链，一体化多个元素

最后我们来说说如何将多过元素是用链条使其成为一个元素组。

image.png

下面两个元素互相约束，使其成为一个组，当A元素移动，B元素也会跟着移动，A元素居中B元素也会居中，它们就是一个整体。下面来看看怎么让多个元素变成一组.

image.png
如上有两个按钮，我们之间选中它们，点击右键选中Center Vertically就能自动使它们成为一个组并且垂直居中。选中过后将会是这样：
image.png

可以看到两个按钮中间已经有一条链了，它们是一个组了.

image.png
注意这个按钮，它其实可以切换链模式。这里有三种模式：Packed，Spread
Spread具体效果可以去试试.