趁项目上线后的空档期，学习些潮流的技术。ConstrainLayout听说不错，就来使用一波。

相比传统布局，包括LinearLayout/RelativeLayout等主流布局，都有他们的局限，布局复杂时嵌套严重，难以维护，且不能拖拽编辑布局之间的约束关系，效率低下。所以ConstrainLayout石破天惊横空出世。

进入正题，看看它有什么强大之处。

拖拽约束

拖拽布局是传统的操作，重点在于约束操作。根布局使用ConstrainLayout，所有子控件就可以使用约束操作。其中每个子控件周围都有四个“约束点”，拖动这些点可以为其添加四个方向上的约束，且实际布局代码也会自动生成。上图演示了一个button在根布局的居中操作。

控件伸缩

添加约束后的控件可以伸缩，但是中心位置不变。如上图所示。

取消约束

取消控件的约束有几种操作：

1.点击控件上的“约束点”，单独取消该点的约束

2.点击控件，再点击控件左下角的约束图标

3.点击布局顶部往上的工具栏的约束图标

控件之间的约束

上图演示了两个button之间的约束操作，上边的button底部与下边的button顶部形成约束，此时上边的按钮无论如何拖动，都只能在下边的按钮之上。

中心对齐

上图演示了控件的中心水平对齐。

自动约束

点击顶部的工具栏“磁石”按钮即可以开关自动约束。当拖动控件到布局中心时，其四周会显示约束线，若此时取消拖动，则会自动添加四周的约束。

控件布满父布局

上图演示了button填满父布局的操作，简单高效。

布局padding

上一个“matchparent”操作并没有完全填满父布局，因为父布局（ConstrainLayout）设置了padding值，该值可以通过顶部工具栏输入，如上图所示。

控件margin

控件设置margin也简单，在布局右边的操作栏中可以输入控件四边的margin值。

控件自身尺寸

控件的自身尺寸有三种模式：

Fixed: 固定尺寸，你可以设置控件的width/height属性来控制高和宽。

AnySize: 控件占据所有可用（约束范围内）的空间来满足约束。

Wrap Content: 控件所占有的空间是可缩放的，相当于“wrap_content“属性

链式布局

链式布局有有4种模式：spread, packed, spread_inside。具体操作入如上图所示，样式如下图所示。

链式布局样式

GuideLine

Guideline相当于一条辅助线，上图演示了竖直方向的。Guideline有3种模式，分别为距离左右两边多少dp、距离左边百分比。

---

四周约束（牵引）

layout_constraintLeft_toLeftOf: 将目标控件的左侧牵引到另外一个控件的左侧

layout_constraintRight_toLeftOf: 将目标控件的右侧牵引到另外一个控件的左侧

layout_constraintLeft_toRightOf: 将目标控件的左侧牵引到另外一个控件的右侧

layout_constraintRight_toRightOf: 将目标控件的右侧牵引到另外一个控件的右侧

layout_constraintTop_toTopOf: 将目标控件的上侧牵引到另外一个控件的上侧

layout_constraintTop_toBottomOf: 将目标控件的上侧牵引到另外一个控件的下侧

layout_constraintBottom_toTopOf: 将目标控件的下侧牵引到另外一个控件的上侧

layout_constraintBottom_toBottomOf: 将目标控件的下侧牵引到另外一个控件的下侧

基线对齐

layout_constrainBaseline_toBaselineOf:与目标控件的基线对齐

start，end类（与left,right类似）

layout_constrainStart_toEndOf:将目标控件的左侧与另一控件的右侧对齐

layout_constrainStart_toStartOf：将目标控件的左侧与另一控件的左侧对齐

layout_constrainEnd_toStartOf：将目标控件的右侧与另一控件的左侧对齐

layout_constrainEnd_toEndOf：将目标控件的右侧与另一控件的右侧对齐

布局边距

layout_marginStart:左边距

layout_marginEnd:右边距

layout_marginLeft:左边距

layout_marginRight:右边距

layout_marginLeft:左边距

layout_marginTop:上边距

layout_marginBottom:下边距

基准线（guideline）

orientation:vertical/horizontal  基准线的方向

layout_constrainGuide_begin:基准线起点

layout_constrainGuide_end:基准线终点

layout_constrainGuide_percent:基准线百分比模式，用于指定位置

牵引力

layout_constrainHorizontal_bias:水平方向上的牵引力

layout_constrainVertical_bias:垂直方向上的牵引力

链样式（ChainStyle）

layout_constrainHorizontal_chainStyle:水平方向上的样式

layout_constrainVertical_chainStyle:垂直方向上的样子

链权重

同样的，当几个控件组成链时，可以像LinearLayout一样，对其设置权重分布，调节大小

layout_constrainVertical_weight:设置该控件在链中的权重

宽高属性

ConstrainLayout的宽高属性与普通的布局有所不同，其属性分为三种：wrap_content，具体数值，match_contraint。其中前两种和其他布局类似，当宽高属性设置为match_contraint时，其xml属性显示为：0dp，表现属性为布满约束的区域。

与此同时，ConstrainLayout还支持一种比例的属性：

layout_constrainDimensionRatio:"w,13:2"/"h, 23:23",其中w,h可以不注明， 默认为宽高比