2016年google就已经公布了这个约束布局ConstraintLayout。
但是时至现在2018年，还是很多人在使用普遍的LinearLayout或者RelativeLayout。有的可能会用到百分比布局，但是还是很少很少用到。
我觉得非常有必要普及这方面的内容
- 1：对于嵌套布局相当多改成约束布局后，有效提高流畅性。
- 2：使用百分比布局更加的灵活。
唯一副作用是学习成本高、相对于其他普通布局完成的速度可能也会慢
我最近也开始涉及学习这方面，发现确实如果不通过好好的例子来写的，确实很难上手。
所以出了以下内容，让大家更快更容易了解！
首先先跟大家共享我搜到的文章：
https://blog.csdn.net/lmj623565791/article/details/78011599?utm_source=tuicool&utm_medium=referral
https://blog.csdn.net/guolin_blog/article/details/53122387
https://segmentfault.com/a/1190000009536640?utm_source=tuicool&utm_medium=referral
再列出我觉得有参考性的demo,github上找的
https://github.com/googlesamples/android-ConstraintLayoutExamples
https://github.com/vtthach/20170704_Sample_ConstraintLayout
属性作用：
ConstraintLayout也有类似RelativeLayout的约束属性，分别有以下三种：
- 1 子控件和子控件之间的约束（如android:layout_below="@id/title"）
- 2 子控件和父控件的约束（如 android:layout_alignParentTop="true"）
- 3 子控件和Guideline(参考线)的约束。下面会讲解参考线的作用。
参数取值是 ID(@id/button1)代表约束1、3， 或者 字符串"parent" 代表约束2：
| RelativeLayout 对应父类 | RelativeLayout 对应其他view | ConstraintLayout | 中文注释 |
|---|---|---|---|
| android:layout_alignParentLeft="true" | android:layout_alignLeft | app:layout_constraintLeft_toLeftOf | 与指定View的左边界一致 |
| android:layout_alignParentStart="true" | android:layout_alignStart | app:layout_constraintStart_toStartOf | 与指定View的左边界一致 |
| android:layout_alignParentTop="true" | android:layout_alignTop | app:layout_constraintTop_toTopOf | 与指定View的上边界一致 |
| android:layout_alignParentRight="true" | android:layout_alignRight | app:layout_constraintRight_toRightOf | |
| android:layout_alignParentEnd="true" | android:layout_alignEnd | app:layout_constraintEnd_toEndOf | 与指定View的右边界一致 |
| android:layout_alignParentBottom="true" | android:layout_alignBottom | app:layout_constraintBottom_toBottomOf | 与指定View的下边界一致 |
| android:layout_centerHorizontal="true" | app:layout_constraintStart_toStartOf="parent" 和 app:layout_constraintEnd_toEndOf="parent" | ||
| android:layout_centerVertical="true" | app:layout_constraintTop_toTopOf="parent" 和 app:layout_constraintBottom_toBottomOf="parent" | ||
| android:layout_centerInParent="true" | app:layout_constraintStart_toStartOf="parent", app:layout_constraintTop_toTopOf="parent", app:layout_constraintEnd_toEndOf="parent", 和 app:layout_constraintBottom_toBottomOf="parent" | ||
| android:layout_below | app:layout_constraintTop_toBottomOf | 在指定View的下方 | |
| android:layout_toEndOf | app:layout_constraintStart_toEndOf | 在指定View的右边 | |
| android:layout_toRightOf | app:layout_constraintLeft_toRightOf | 在指定View的右边 | |
| android:layout_above | app:layout_constraintBottom_toTopOf | 在指定View的上方 | |
| android:layout_toStartOf | app:layout_constraintEnd_toStartOf | 在指定View的左边 | |
| android:layout_toLeftOf | app:layout_constraintRight_toLeftOf | 在指定View的左边 | |
| android:layout_alignBaseline | app:layout_constraintBaseline_toBaselineOf |
组合属性作用：
| ConstraintLayout 组合属性 | 解释 |
|---|---|
| app:layout_constraintEnd_toStartOf="@+id/vLine", app:layout_constraintTop_toTopOf="@+id/vLine", app:layout_constraintBottom_toBottomOf="@+id/vLine" | 这个是基于vLine控件的左边，并且完全的中心对齐 |
| app:layout_constraintBottom_toBottomOf="@+id/vLine" app:layout_constraintStart_toEndOf="@+id/vLine" app:layout_constraintTop_toTopOf="@+id/vLine" | 同上，这次是在右边并且中心对齐 |
1.首先完成顶部第一个图片：
添加以下两个属性
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
即可完成居中，因为左边约束了，右边也约束了。可以通俗的理解为左边和右边用相同的力道（我这样说是因为下面会介绍可以控制哪边用的力道大小）都相扯约束，自然居中了。
如果第一个图片不添加
app:layout_constraintTop_toTopOf="parent"
则这个相距属性android:layout_marginTop="16dp"是不会触发的。
所以总结第一个图片：
2.接着完成顶部第二个控件：
首先直奔主题，关键的一个属性：
layout_constraintTop_toBottomOf
按照我的理解则是约束上面并且位于该约束控件的下面
同时为了居中，也是添加约束父布局的左边和右边，所以最终是
3.接着是比较困难的第三个控件布局
首先我们按照上面所了解的，先分别添加4个控件
第一个控件，居左并且在第二个控件的下面。第二个控件在第一个控件和第三个控件的中间，第三个控件一样，只有最后一个第四个控件在最右边。
那么剩下一个问题如何让他们居中呢？很简单，第一个控件添加
app:layout_constraintRight_toLeftOf="@+id/imgFour"
大意是居左，跟右边的第四个控件约束，变成这样
然后第四个控件添加该属性
app:layout_constraintLeft_toRightOf="@+id/imgOne"
最终便可以居中了
4.接着是下面的百分比布局
首先完成百分比布局之前，我们需要先明确大体布局。如上面的布局，横布局需要分成三等份，竖布局需要分成四等份。然后就开始创建参考线了。
4.1首先为了铺满这个百分比，要先创建多一个ConstraintLayout布局，基于txtForget控件的下面。
4.2开始创建参考线。
创建竖线3条
创建横线4条
创建完所需要的参考线之后如图所示：
4.3接下来我们只要负责把需要放的控件放进参考线里面居中即可
让我们看看最重要的4个属性
app:layout_constraintBottom_toTopOf="@+id/guideline1H25"
app:layout_constraintEnd_toStartOf="@+id/guidelineV33"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf：表示与指定View的左边界一致，如果是parent则是父控件最左边
app:layout_constraintEnd_toStartOf：在指定View的左边
app:layout_constraintBottom_toTopOf：在指定View的上方
app:layout_constraintTop_toTopOf：与指定View的上边界一致，如果是parent则是父控件的最上边
那么把每个控件都放进去，最终百分比的代码：
请注意，app:layout_constraintStart_toStartOf和app:layout_constraintLeft_toLeftOf有区别的，具体可以在改演示中的百分比修改就知道具体区别了。
5、利用Barrier完美实现“多对象约束”
类似这样的布局，中间这条线是在左边两个文本框以及右边两个文本框的中间。广州黄埔的文字或者江苏南京的文字如果过长，中间的一条线都会往下移动，例如这样：
或者这样：
那么如何把这两个TextView对象当成一个对象来看待呢，很简单，如下代码：
最后把这个Barrier当成一个对象对待即可
app:layout_constraintTop_toBottomOf="@+id/barrier7"
5、Chains 连接布局
Chains 提供一個类似群组的概念Chains 连接布局
Spread Chain 每個元件间距一样
Spread Inside Chain 除了与Parent，控件间的间距一样
Weighted Chain 按照宽度权重
Packed Chain 元件连在一起
Packed Chain with Bias 元件连在一起，设定偏差值
例：app:layout_constraintVertical_chainStyle="spread_inside"
使用方式：
选择要加入Chain的所有元件，右键-Chain-Create horizontal chai
点选连接符号，可改变连接样式。
5.1、 使用该方式可以完成跟LinearLayout隐藏显示后的效果
6、百分比布局
我们在上个布局稍作修改，每个按钮占据这个布局的30%，效果如下
每个button添加
app:layout_constraintHeight_percent="0.3"，记得给button修改
android:layout_height="0dp",否则高度不根据百分比来
6.1、百分比偏移
偏心定位由水平偏移app:layout_constraintHorizontal_bia和垂直偏移app:layout_constraintVertical_bias来设置，默认为0.5即50%（左偏移50%右偏移50%），0.3(左偏移30%右偏移70%)
记得加上
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
记得偏右或者偏下的时候，是包含view高度或者宽度本身的
其他、待编辑的其他属性
-
Margin
image.png Barrier
Barrier是一个虚拟的辅助控件，它可以阻止一个或者多个控件越过自己，就像一个屏障一样。当某个控件要越过自己的时候，Barrier会自动移动，避免自己被覆盖。Group
Group帮助你对一组控件进行设置。最常见的情况是控制一组控件的visibility。你只需把控件的id添加到Group，就能同时对里面的所有控件进行操作(比如批量隐藏，删除等等)。
Circular positioning
可以相对另一个控件，以角度和距离定义当前控件的位置，即提供了在圆上定义控件位置的能力。Placeholder
Placeholder顾名思义，就是用来一个占位的东西，它可以把自己的内容设置为ConstraintLayout内的其它view。因此它用来写布局的模版，也可以用来动态修改UI的内容。
总而言之，约束布局的能力正在变得越来越强大。