中文名：约束布局
出生日期：2016年
- 为什么熟悉？
ConstraintLayout是近几年I/O大会力推功能之一，从Android Studio 2.3开始新建布局默认就是它，而且基本上每一次Studio升级日志里都能见到它的身影，所谓没吃过猪肉也肯定见过猪跑。 - 为什么陌生？
约束布局可以说是有史以来功能最复杂的布局了，很多人可能没有沉下来心来好好了解一下这个布局，新建布局后第一步就是刷刷地删掉默认根布局，默默写上我们熟悉的LinearLayout和RelativeLayout；或者没有好的场景应用到实际项目中，我们的新版本完全搬到RN上来了，根本不可能应用到它。
1. 介绍
ConstraintLayout可以说是LinearLayout、FrameLayout、RelativeLayout等等传统布局的集大成者，天生就是消灭嵌套布局。相比RelativeLayout的组件间的关系，ConstraintLayout将这层关系更升华了，通过更加灵活的约束，让布局更加扁平化，往往使用一层布局就能实现很多复杂需求。
底层原理上，ConstraintLayout使用了和iOS的Auto Layout相同的算法火鸡算法 Cassowary，让其具备复杂功能的同时比传统布局更加高效。
2. 使用
ConstraintLayout配合Android Studio食用更佳。我们知道，Studio一直针对ConstraintLayout作改进，大部分是优化ConstraintLayout的可视化，尤其是蓝图，也就是下面图中右边的蓝色部分：
蓝图
以前的线性布局、关系布局啥的都比较不适合用设计面板来拖拽，而约束布局恰恰相反，用蓝图能更清楚的理清组件间的关系，并且通过拖拽和指定属性的方式来建立复杂关系代码反而不好写。
当然从实践来看，最好还是将代码和可视化结合起来，先用代码写个View，再用拖拽的方式建立大致的约束关系，再回到代码进行微调。拖拽的方式生成的代码比较乱，界面元素较多时很容易拖拽出错，而且很容易拖出很多零散的属性值出来，需要到代码上进行比较的调整和删减。
约束关系
如上图，选中某个组件就可以查看该组件的约束关系，比如这个ImageView，波浪线就是表示图片的left、top、bottom关联到根布局且边距为8dp，bottom关联到TextView上方并且间距50dp(这里TextView的约束关系是根布局居中)，layout_width和layout_height都是0，表示大小充满约束空间MATCH_CONSTRAINT(类似一般布局的MATCH_PARENT)。因此这张图片最终显示将显示在屏幕的上半部分。
常用属性
相对位置
和确定组件位置相关常用的就是下面13个属性(也就是蓝图中的波浪线)，见名知意，和RelativeLayout的功能基本重叠，这里也不细介绍了。可以自己妥妥拽拽试试，简单场景足够。
- 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
上图的ImageView对应的代码就是
这个相对位置有个比较有意思的应用，比如说有这么个需求，如下图，文本组件要放置在图片组件的中间。
文字居中
可以这么实现，将TextView四边分别约束到ImageView的四边上即可，那么不管ImageView显示在哪，这个TextView永远跟随在其中间。代码如下：
蓝图
如果不使用ConstraintLayout，这个需求可能就要增加一个RelativeLayout套在ImageView和TextView来实现了。
当上下或者左边都是约束后，默认这个组件就是横向或者纵向居中了。有时候我们要的不是居中，而且以一定比例偏离，比如水平居中，垂直方向偏下，那么可以通过下面两个属性设置限制位置比例，取值0~1.0：
- layout_constraintHorizontal_bias 水平方向的比例
- layout_constraintVertical_bias 垂直方向比例
如下是Vertical=0.8的效果：
垂直方向比例0.8
圆形定位
通过圆形定位可以以一定的角度和距离确定位置关系，这是RelativeLayout所没有的。
圆形定位
相关属性：
- layout_constraintCircle：参照控件的id
- layout_constraintCircleRadius：两个控件中心连线的距离
- layout_constraintCircleAngle：当前View的中心与目标View的中心的连线与Y轴方向的夹角(取值：0~360)
宽高尺寸
在ConstraintLayout中推荐的LayoutParams值有
- 具体dp
- WRAP_CONTENT
- 0dp，表示MATCH_CONSTRAINT，这里没有MATCH_PARENT啥事
0dp是一个比较有意思的值，可以类比LinearLayout的0dp+weight组合，但是功能更加丰富。
在这里0dp默认是weight=1的效果，可以通过下面的6个属性进一步控制大小：
- layout_constraintWidth_min
- layout_constraintHeight_min
- layout_constraintWidth_max
- layout_constraintHeight_max
- layout_constraintWidth_percent
- layout_constraintHeight_percent
这6个属性都让人忍不住点赞，宽高区间以及占被约束对象的百分比一应俱全。
宽高比
当宽或高其中一个设置为0dp时，可以通过layout_constraintDimensionRatio来设置宽高比。
这是一个很赞的功能，很多实际场景很需要这个，比如在一些流式布局场景中，往往需要以固定的比例显示item；或者页面的横幅等等，这个都要求不受全面屏等形形色色的屏幕比例影响。
举例，一个横幅(ImageView)使用以下属性：
那么这个横幅会页面上方保持16：9的比例显示，并且横向填充满屏幕。
16：9的比例显示
当宽高都为0dp时，layout_constraintDimensionRatio还可以加上W或者H。
比如：
W,1：2表示宽=2，高=1，即H:W = 1:2；
H,1:2表示高=2，宽=1，即W:H = 1:2。
不使用ConstraintLayout的情况下要实现类似功能，恐怕就不得不在Java代码中重写onMeasure等方式来实现了。
边距
之所以要说边距，是因为在ConstraintLayout中，layout_margin(left|top|right|bottom)属性的含义有所变化，它仅在该View该方向上约束关系的情况下才有效，当它失去了约束，其边距便不会生效。
此外还有一组GONE Margins，仅当被约束的目标对象的可见性为View.GONE才生效，
- layout_goneMarginStart
- layout_goneMarginEnd
- layout_goneMarginLeft
- layout_goneMarginTop
- layout_goneMarginRight
- layout_goneMarginBottom
链
链其实很好理解，类似于LinearLayout，将一组View左右互相约束，就组成一组横向排列(纵向同理)
链式布局
如果仅仅是线性排列，那就没什么特别的了。
举个例子，下面是三个TextView，和上图一样水平方向左右互联，垂直方向靠近容器底部。
看看实际结果(底部)：
链式布局效果
可以看出三个TextViewmore就是平分的，也就是LinearLayout中weight相同的情况。此外我们可以对链中第一个View也就是链头设置layout_constraintHorizontal_chainStyle属性改变调整居中的类型，值有三种：
- CHAIN_SPREAD —— 展开元素 (默认)；
- CHAIN_SPREAD_INSIDE —— 展开元素，但链的两端贴近parent；
- CHAIN_PACKED —— 链的元素将被打包在一起
spread就是默认样式，三者分别在四等分线上(一条线段三刀切成均分四段)，兄弟关系相敬如宾；
spread
spread_inside效果如图，三者可以理解为包含首尾的二等分点，兄弟关系最疏远；
spread_inside
packed效果如果，三者紧贴一起，基情满满。
packed
怀念LinearLayout的weight?也有的，通过给每个控件宽度设置为0dp，就可以通过layout_constraintHorizontal_weight属性控制权重了。
辅助工具
所谓辅助工具，就是指一些只提供功能但实际看不见(类似Space)的约束目标，比如中轴线之类的。
Barrier屏障
Barrier
假设有3个控件ABC，C在AB的右边，但是AB的宽是不固定的，这个时候C无论约束在A的右边或者B的右边都不对。
当出现这种情况可以用Barrier来解决。Barrier可以在多个控件的一侧建立一个屏障，如下所示：
这个时候C只要约束在Barrier的右边就可以了，代码如下：
Group分组
Group可以把多个控件归为一组，方便隐藏或显示一组控件，举个例子：
Group分组
现在有3个并排的TextView，用Group把TextView1和TextView3归为一组，再设置这组控件的可见性，如下所示：
效果如下：
隐藏同一个分组中的组件
PlaceHolder占位符
在Placeholder中可使用setContent()设置另一个控件的id，使这个控件移动到占位符的位置。举个例子：
新建一个Placeholder约束在屏幕的左上角，新建一个TextView约束在屏幕的右上角，在Placeholder中设置 app:content=”@+id/textview”，这时TextView会跑到屏幕的左上角。效果如下：
我理解的占位符的使用场景应该是：
- 整理框架结构，布局隔离
因为ConstraintLayout很扁平，可能xml文件杂糅了很多组件，尤其是可视化拖拽出来的控件，没有固定的顺序，很难拎清页面整个的主体结构。
那么，我们可以单独写一个xml文件，里面就只有页面整体的结构，比如横幅、列表、tab栏等等，都用PlaceHolder占坑，而具体的模块控件则在各自的xml上设计，二者通过contentId关联。通过include把placeHolder文件merge进来，组成一个完整页面。 - 代码动态控制控件位置
如下动画，在顶部横幅下方放置了一个PlaceHolder,然后根据业务逻辑在tab页进入不同模式后动态调用PlaceHolder#setContentId方法改变实际的View。(图中通过TransitionManager增加了过度动画)
Guideline 辅助线
辅助线就像设计图里面的网格线，辅助组件定位，最终不可见，常用的辅助线场景比如中轴线，组件可以与中轴线建立约束关系。
辅助线分为横向和纵向两种，通过orientation指定，有horizontal和vertical两种
然后通过下面3个属性之一来确定位置：
- layout_constraintGuide_percent 按比例确定位置，取值0~1.0
- layout_constraintGuide_begin 距离左边(或上边)的距离，dp值
- layout_constraintGuide_end 距离右边(或下边)的距离，dp值
如下代码就是分别定义垂直和水平方向的中轴线，percent=0.5：
有了这些辅助线，我们就可以做一些更有趣的布局了。
比如下图红框中的两个按钮，两个一起水平居中。
水平居中按钮
看起来非常简单的需求，但是以前要实现这个布局可不简单，我们需要把这两个按钮放到一个Horizontal的LinearLayout里，再让这个LinearLayout在RelativeLayout的底部居中。
现在用中轴线来实现，代码如下：
guideline1就是上面提到的垂直中轴线，我们只要和中轴线建立约束即可。
