[Android 知识点] Constraints Layout 约束布局

• 官方实验室(need vpn):
  https://codelabs.developers.google.com/codelabs/constraint-layout/#3

---

依赖

compile ‘com.android.support.constraint:constraint-layout:1.0.0-alpha5

概述

该布局机制为每一个Widget指定了约束条件，目的是指定他们在布局里的位置，你可以通过as布局编辑器的工具，手动或自动指示他们的约束条件，为了更好的理解约束条件，让我们一起来学习Widget提供的基本操作。

Constraints

约束帮助你保持Widgets对齐，你可以使用锚，则，你可以通过下面所描述的操作，来不同widgets之间确定对齐规则，距离，设定一个约束，左边的button和右边的button相距56dp

---

句柄类型

在这widget中，可以看到不同的处理方式

调整大小：类似于其他设计软件

侧边约束：

在wdiget侧边的圆形，让你指定widget的位置，例如，你可以用一个wdiget左侧总是在另一个的右侧24dp处

基线:

基线可以帮你对齐任意两个wdiget的文本域，这很有用，例如，当你有2个不同大小的widget需要内部字体对齐的时候。

---

手动创建约束

为了创建约束，你需要在handle处按下鼠标不放，拖动到另一个widgt的handle处，一旦锚呈现绿色，你可以放开鼠标，约束被创建成功。

按钮可以打开/关闭自动模式

在我们开始之前，确保我们有一个imageview和一个textview在布局里面，我们的目标是在Imageview和textviiew之间建立约束，假设，我们要textview在imageview下面，我们可以在textview的顶部和imageview的底部创建约束，如图所示。

按钮可以删除约束

下一步，在imageview的顶部和layout的顶部创建约束。

最后，同样，我们可以使用左右约束让imageview在布局的中间

创建基线约束

为了连接一个wdiget的基线到另一个widget，鼠标放在wdiget几秒，等待基线约束的出现

---

熟悉Inspetor

这一节，我们看一下视图检查器，检查器在编辑器的右边，罗列了所选widget的不同的属性，显示了对齐方式和约束

• 删除之前imageview下面的textview
• 创建和布局底部的约束

检查器在一个正方形块中，显示了wdiget，用法如下：

Margins：widget外部的上下左右间距，你可以通过单击数值改变间距，例如，设定16dp

删除一个约束：在连接线上单击，会提供一个删除的选项

wdiget相对位置：当你至少有一对称的约束时，例如：上下，左右，你会看到一个滑条让你调整widget的位置，这也叫垂直或水平偏差bias。

将垂直偏压改为75％，将水平偏压改为75％。下面的图片可以作为指南

控制内部尺寸：你可以点击特定的线条看到这些动作。
这是放大后的widget面板，单击内部线条，有如下几个选项：

Fixed：指定宽高。

Anysize：类似于match_parent

wrap_content：根据内容决定宽高

---

使用自动方式创建约束

我们选择imageview并放到layout的中央，几秒后，会自动创建约束。

下面，我们跟着图片来操作一下：
1. imageview对齐顶部，用检查器，anysize方式确保填充整个父布局
2. 放置2个button在右下角，有检查器面板改变text属性
，最右边的是@string/upload，左边的是@string/discard。
3. 拖动一个textview和一个Plain text到布局中。
4. 调整textview和plain text相距48dp，几秒后，会自动创建约束
5. 类似的，选择upload buton放置到我们右边距
6. 最后，放置discard button 距离upload button 32dp。

---

使用推理创建约束

推理和自动有什么不同?
推理会为布局中所有widget创建约束，自动约束只会为邻近的widget创建约束，当你改变某一个widget时，其他widget会跟随变动

删除所有约束

创建推理约束

水平拉伸

垂直拉伸

• 使用推理约束，要先把自动约束模式关闭

添加一个textview占满可用空间

1. 拖动一个textivew到布局中
2. 点击水平拉伸按钮
3. 点击垂直拉伸按钮

使用推理约束

点击推理约束按钮，创建约束，如图所示，你可以点击按钮选择不同设备类型，预览效果。