Android 编程技巧之 ----- 用 ConstraintLayout 构建响应式 UI

官网地址：https://developer.android.com/training/constraint-layout/index.html

前言

在 2016 年 Google 召开的 I / O 大会上 , ConstraintLayout 大放异彩 , 号称可以动动鼠标 , 拖拖拽拽就可以完成 App 的 UI 控件设计的新布局 。而最近推出的 Android Studio 2.3 中 , 发现新建 Activity 已经默认使用 ConstraintLayout 布局了, 既简便又兼具性能 , 估计以后就是这种布局的天下了吧。

---

ConstraintLayout 简介

ConstraintLayout 可以让你在一个单一的 View 平面层中创建庞大而复杂的布局 ( 无嵌套的父容器布局 ). 它跟 RelativeLayout 很相似 , 比如所有的 View 都可以根据周围的 View 或者父布局来摆放 , 但它又比 RelativeLayout 更加灵活 , 最重要的是 , 通过 Android Studio 的可视化布局编辑器 , 它更加易用 , 更容易上手 .

ConstraintLayout 的强大直接通过布局编辑器的可视化工具就可以体现出来 , 因为实质上布局 API 跟布局编辑器是相辅相成的 . 所以你完全可以通过拖拽来构建你的 ConstraintLayout 布局 , 而不用编辑 XML 布局文件 . ( ConstraintLayout 更加适合可视化方式使用 )

---

ConstraintLayout 概览

注意 : ConstraintLayout 可通过引入
com.android.support.constraint:constraint-layout:XXX 这个支持库来使用 , 兼容 Android 2.3 ( API 9 ) , IDE 请使用 Android Studio 2.3 或者更高版本 .

如果用 ConstraintLayout 来定义一个 View 的位置，必须为它指定至少一个水平方向上和一个垂直方向上的约束。每个约束代表一个连接或者一次校准（对齐），这种连接或者校准（对齐）是以其他 View、父容器布局或者一条不可见的引导线（guideline）来作为参照物的。每个约束决定了这个 View 在水平轴（Ｘ轴）或垂直轴（Ｙ轴）上的具体位置，所以在每个坐标轴上这个 View 都需要有一个约束的最小值（后文说到可通过调节约束在每个轴上的比例来移动 View），但通常都需要更大的约束值（即一般不紧贴坐标轴，而是有一定距离）。

每当你把一个 View 拖到布局编辑器中时，它会停留在你放的那个位置，即使它没有任何约束。然而，这种现象只是为了让你更方便地操作它。 如果一个 View 没有设置任何约束，当你在设备上运行 App 时，这个 View 是出现在左上角的（即位置坐标 [0，０]）。

上图中，布局看上去很正常，但是 View C 是没有垂直约束的，所以当在设备上运行 App 后，View C 左右两边是跟 View A 对齐的，但是却会出现在屏幕最上方。

上图是修改过后，View C 添加约束到 View A，处于 View A 下方。

---

将其他布局转换为 ConstraintLayout

打开布局编辑器，选择设计页签，在侧边栏的组件树中，可以选中任一布局，右键，就会出现转换选项了。

---

添加约束的原则

从组件面板拖动一个 View 到编辑器中，点击该 View，周围的四个点就是约束拖动点，选中其中一个点拖动到其他 View 的约束点上（或者其他 View 的边上、其他布局的边上、一条用户不可见的引导线上），就完成了一次约束创建 (会有默认的间距隔开两个 View，当然这个也是可以设置的)。

创建约束时需遵守的规则：

• 每个 View 至少需要有两个约束，一个水平方向上的约束和一个垂直方向上的约束；

• 垂直方向上，一个 View 的左右两个约束点只能约束到另一个 View 的左右约束点（水平方向类似），字体基线也只能约束到其他字体基线；

• 每一个 View 的约束点只能被作为一个约束的起始点，但是可以（从其他不同的 View 中）创建很多约束到同一约束点上。

---

约束到父布局

View A 约束到父布局，可以通过修改 margin 间隔值（当然，ConstraintLayout 也提供了很方便的修改 margin 值的方法）来决定到父布局边缘的距离。

---

约束到 View

可以看到，View B 被约束为一直处于 View A 的右边，View C 被约束为一直处于 View A 的下方，但对于 View B 来说，垂直方向上并无任何约束，所以 View B 还是可以自由地上下移动的（View C 同理）。

---

对齐约束

水平对齐约束：

上图中可以看到，View A 与 View B 的左边缘是对齐的。

加偏移量的水平对齐约束：

此时的 View B 的左边缘仍是约束到 View A 的左边缘，但是向右加了 24 dp 的偏移量。

---

字体基线约束

从上图中可以看到，View B 中的字体基线约束到了 View A 的字体基线，此时字体基线是对齐的。

为了创建字体基线约束，可以选中你想操作文字 View，然后点击出现在 View 下方的字体基线按钮 ，然后拖动就完成创建。

---

引导线约束

通过以下步骤可以创建一条引导线，点击布局编辑器上方的工具栏中的引导线图标 ，然后可以选择创建垂直引导线或者水平引导线。

拖动引导线可以改变其位置，也可以点击引导线边缘的实心圆（上图中的百分号位置）来转换测量模式。

---

适配约束偏移

当在一个 View 的两边（左右或者上下）添加约束后（该 View 的大小为固定大小或者自适应大小），View 会处在两边约束的中间，即默认偏移 50 % 。

可以通过修改偏移来移动约束中的 View 的位置，即拖动属性窗口中的偏移按钮。

---

适配 View 的大小

类似于可以给其他布局中的 View 设置宽高为 match_parent 或者 wrap_content 一样，ConstraintLayout 提供了三种宽高模式：

• wrap_content ：自适应；

• match_constraint：约束最大化，会将 View 在约束方向上扩充，不包含 margin 值，但如果在水平（垂直）方向上只有一边加了约束，那么设置这种模式只会使 View 扩充到适应其内容大小；

• fixed：指定固定大小。

选中一个 View 后，在属性窗口中，可以通过点击相应图标改变其宽高模式：

上图为设置 View 属性给出的指引图，其中 3 号圆圈所指处就是改变 View 的宽高模式的地方，通过点击，会有对应的宽高模式出现。

：wrap_content；

：match_constraint；

：fixed 。

注意：Android 规定任何处于 ConstraintLayout 中的 View 都不要使用 match_parent，而是使用 match_constraint 。

---

通过比例设置 View 大小

当 View 在至少一个方向（水平或垂直）上的两边都设置了 match_constraint 时，就可以设置 View 的宽高为根据比例适配。
点击上一节中的设置 View 属性指引图中的 1 号圆圈所指处，就可以在弹出的输入框中输入宽比高的数值。

如果两个方向上 View 的两边都设置了 match_constraint，那么点击 1号圆圈所指处后，属性窗口中的 View 会通过给不同方向上的边加粗来表示此时比例的参照边。例如，在上图中，连续点击两次 1号圆圈所指处后，可以看到左右两边的 View 的高被加粗了，此时整个 View 的大小是由 View 的高来决定的，此时 View 的宽是根据宽高比 16：9 来决定的。

---

适配 View 的 margin 外部间隔值

ConstraintLayout 默认为每个 View 设置了各个方向为 8 的间隔值，这是参考 material design 原料设计给出的。

点击设置 View 属性指引图中的 4 号圆圈所指处，就可以设置我们想要的间隔值了。

当然也可以点击布局编辑器上方的工具栏中的 margin 设定：

---

用锁链控制同一方向上的一组 View

锁链是一组互相连接的 View 并且它们都有双向的约束，如下图所示是一个水平方向上的锁链：

锁链允许在水平（垂直）方向设置以下几种不同的形式：

1. 传播式：一个方向上平均分配，默认形式；

2. 内部传播式：第一个 View 和最后一个 View 紧贴约束边缘，然后平分剩下的空间；

3. 权重式：若锁链上每个 View 都设置了 match_constraint 属性，则可以通过设置 View 的 layout_constraintHorizontal_weight 或者 layout_constraintVertical_weight 属性来指定每个 View 在锁链方向上所占的空间权重大小 。类似于 LinearLayout 布局中的 layout_weight 属性的用法；

4. 打包式：锁链上的 View 紧贴彼此，不包含 margin 间隔值，如果选中第一个 View （水平反向为最左的 View，垂直方向为最顶部的 View）并拖动属性窗口中的约束偏移按钮，整个锁链上的 View 都会一起移动。

可以点击锁链上的任意 View，然后点击 按钮在传播式、内部传播式和打包式之间切换模式（权重式通过设置属性）。

通过以下步骤快速创建锁链，选中一个方向上的所有 View，右键任一 View，选择水平居中（Center Horizontally）或者垂直居中（Center Vertically），即可创建相应方向上的锁链 。

在使用锁链时需要考虑的一些东西：

• 一个 View 既可以是水平锁链的一部分，也有可能同时是垂直锁链的一部分，这样设计可以更方便地创建类似 GridLayout 的灵活布局；

• 一个锁链正常运行的前提是其中每个锁链终端都被约束到同一方向上的物体，正如本节最开始的 View A 与 View B 组成锁链的图所示；

• 锁链只是在水平或者垂直方向上约束捆绑了没有添加对齐约束到其他 View 的子项目，所以可能需要添加其他的约束来将锁链中的这些 View
  摆放到正确的位置上 。

---

自动创建约束

点击布局编辑器上方工具栏中的 预测约束（Infer Constraints）按钮，Android 会根据当前布局为每个 View 选择最合适的约束（当然，可能需要一些布局微调），Android 默认无打开；

点击布局编辑器上方工具栏中的 自动连接（Turn on Autoconnect）按钮，可以为每个 View 添加两个或多个约束，但是这项功能只能是 View 被约束到父布局，而不会为你添加连接到其他 View 的约束，Android 默认无打开 。

---

结语

本文根据官网上的 ConstraintLayout 教程翻译而来，相信不久的将来 ConstraintLayout 会变成最广泛使用的布局。水平有限，翻译难免有误，谢谢阅读 ！