constraintlayout_熟悉又陌生的ConstraintLayout布局

中文名：约束布局
出生日期：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会跑到屏幕的左上角。效果如下：

我理解的占位符的使用场景应该是：

1. 整理框架结构，布局隔离
   因为ConstraintLayout很扁平，可能xml文件杂糅了很多组件，尤其是可视化拖拽出来的控件，没有固定的顺序，很难拎清页面整个的主体结构。
   那么，我们可以单独写一个xml文件，里面就只有页面整体的结构，比如横幅、列表、tab栏等等，都用PlaceHolder占坑，而具体的模块控件则在各自的xml上设计，二者通过contentId关联。通过include把placeHolder文件merge进来，组成一个完整页面。
2. 代码动态控制控件位置
   如下动画，在顶部横幅下方放置了一个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就是上面提到的垂直中轴线，我们只要和中轴线建立约束即可。