一、简介

**ConstraintLayout **中文叫约束布局，是谷歌最新推出的布局组件，经过一年多的发展已经发布了正式版。它是一用灵活的方式处理位置和大小的ViewGroup 组件。

优点：

1、向前兼容性。作为独立的support库，可以使我们在最低API 9的版本上面使用。

2、功能多样。支持各种位置展示、布局排列的效果，在后续介绍中会有详细讲解。

3、可视化操作。在Android Stuido 布局管理器中的“Design”面板可以很方便的拖拽控件，新增、删除约束。

4、后续潜力。谷歌在官网明确指出会每隔一段时间不断丰富它的api和功能，发展潜力值得期待。

5、有效的降低UI层级。由于每个view都是相互约束的关系，层级大大降低了。

缺点：

1、使用复杂。约束布局中有大量可配置的属性，且互相搭配会有不同的效果，上手难度较高。

二、功能

“约束布局”顾名思义通过约束来控制子view的位置和大小。

现阶段你可以使用它如下不同种类的约束：

l Relative positioning 相对定位

相对定位的操作类似android系统自带的“RelativeLayout”，支持一个view相对于其他view展示自己的位置。

目前支持的位置关系如图所示

image.png

例如：现在需要一个B控件展示在A的右侧

image.png image.png

所有相对定位的种类如下所示

layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

l Margins间距

1.间距

约束间距属性如下

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

注意：和默认的内置布局间距可以设置为负数不同，约束布局的子view间距只能是大于等于0的值。

2.不可见间距

如果当前view依赖的其他view被设置成为了Gone，我们可以设置这种情况下的不同间距。

对应的View不可见时间距种类如下

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

例如：现在需要一个B控件展示在A的右侧，但是如果A没数据不显示的时候B取消左间距

image.png image.png

l Centering positioning and bias中心定位和偏移量

1. 中心定位

约束布局可以完成看似不可能的布局约束

例如：如下所示

image.png image.png

如上图约束布局没办法同时满足和父控件左对齐又和父控件右对齐，因此会强制平等的拉

当前的view，因此当前的view就实现了居中对齐，这种情况同样适用于竖直的约束。

2. 偏移

默认的相对约束（见上个例子）是居中展示的，但是可以通过偏移属性，设置居左或居右

image.png image.png

设置了水平方向的偏移量，button就在从左边原点向右30%偏移，这种情况同样适用于竖直的约束。

l Circular positioning 圆形定位

你可以约束一个控件相对于另一个控件的中心点的距离和角度来展示view的位置。

设置种类如下

layout_constraintCircle
layout_constraintCircleRadius
layout_constraintCircleAngle

image.png image.png

l Visibility behavior 可见式行为

约束布局对子view被设置为Gone的情况有自己特色的处理方式

通常的布局如果view被设置为Gone，那么它不会被显示出来而且不再是布局的一部分。

但是作为一个重要的区别，约束布局在子view被设置为Gone以后依然被认为是布局中的一部分。

1．对于布局传递（layout pass），当前Gone view的尺寸被设置为0（通常这种情况被当做成一个点）

2．如果其他view依赖与当前Gone view的约束，那么这个Gone view依然会被作为一个已存在的view，只是它的间距全部为0

image.png image.png image.png

l Dimensions constraints 尺寸约束

1. 约束布局中的最小最大尺寸

设置种类如下

android:minWidth
android:minHeight
android:maxWidth
android:maxHeight

当前view尺寸被设置为WRAP_CONTENT的时候上面的设置会起作用

2. 尺寸约束

android：layout_width 和 android：layout_height有如下的三种方式

a. 指定具体的值（比如设置为123dp或在dimens.xml定义的引用）

b. 使用WRAP_CONTENT，这样当前view自己计算它的大小

c. 0dp，和MATCH_CONSTRAINT 效果一样

image.png

前面两种布局和其他布局效果是一样的，但是MATCH_CONSTRAINT在约束布局里面会被重新调整大小。

（a）宽度为WRAP_CONTENT

（b）宽度为0dp

（c）宽度为0dp，并且有一个左边的间距

注意：MATCH_PARENT在约束布局中不被推荐使用

3. WRAP_CONTENT强制约束

如果设置为设置为WRAP_CONTENT，但是实际长度超过了约束，可以通过如下设置来确定否强制约束

app:layout_constrainedWidth="true|false" app:layout_constrainedHeight="true|false"

4. MATCH_CONSTRAINT尺寸

当一个view被设置为MATCH_CONSTRAINT时会把所有可用的空间都占用，这时使用android:minWidth 等属性是不会起效的，但是可以用以下几种属性控制它

layout_constraintWidth_min
layout_constraintHeight_min
layout_constraintWidth_max
layout_constraintHeight_max
layout_constraintWidth_percent
layout_constraintHeight_percent

5. 百分比尺寸

为了使用百分比功能需要设置如下属性

a. 尺寸必须设置为MATCH_CONSTRAINT

b. 默认的约束设置成百分比（1.1beta1或1.1bate2必须要，后续版本不需要）

layout_constraintWidth_default="percent"

或

layout_constraintHeight_default="percent"

c. 最后设置百分比属性，值为0到1之间

layout_constraintWidth_percent layout_constraintHeight_percent

6. 比率

可以设置一个view自己的宽高比，前提是宽和高有一个要设置为0dp。

例如：设置一个view宽和高一样

image.png image.png

比率可以是一个浮点类型的值，也可以是宽和高的比。

也可以同时设置宽高0dp ，系统会以最大尺寸满足所有的约束条件，并维持宽高比。通过添加一个单独的“H”或“W”来设置是通过宽还是高的比率来约束。

image.png image.png

思考：上面的例子如果换成W,16:9会是什么效果？

l Chains 链

链提供了在单个轴（水平或竖直）上的一组行为的，另一个轴的行为

创造一个链

如果一系列的view彼此通过双向关系连接在一起就被认为是一条链

image.png

链头

链被第一个元素的属性控制（链的头）

image.png

横向的链它的头是左边的第一个元素，竖向的链它的头是顶部的第一个元素

链的间距

如果关系中指定间距，会根据情况来处理。比如“spread chains”，会被从可用的空间中去除

链的类型

在链头添加layout_constraintHorizontal_chainStyle 或 layout_constraintVertical_chainStyle属性，链的行为会被改变。

类型有如下几种：

CHAIN_SPREAD -所有元素会被展开（默认情况）

WEIGHTED_CHAIN -在CHAIN_SPREAD 的模式下，如果一些view被设置为MATCH_CONSTRAINT，它们会被分开尽可能的位置。

CHAIN_SPREAD_INSIDE-类似CHAIN_SPREAD 模式，但是链的端点处的两个view不会扩展。

CHAIN_PACKED-链的元素都会被挤满，水平或竖直的比率（bias）属性会影响包裹的元素的位置。

image.png

间距和链

链里面的元素它们的间距会被累加

例如，一个水平的链，一个元素定义了一个右间距10dp，下一个元素定义了一个左间距5dp，这两个元素之间的间距就是15dp

虚拟的帮助对象

Guideline 对象允许你创建水平或竖直的指南，可以帮助view确定相对于约束布局内的位置。
例如通过一个Guideline左边约束Button定位在适当的地方

image.png image.png

部分图片及参考资料来源：https://developer.android.com/reference/android/support/constraint/ConstraintLayout#CenteringPositioning