[译] ConstraintLayout基础之约束（constraints）

原文：Constraintlayout basics create constraints
做者：Mark Allison

---

什么是约束（Constraints）

ConstraintLayout 的核心基础就是建立约束。约束定义了布局内两个组件之间的关系，从而控制组件的布局位置。对于刚接触 ConstraintLayout 但对 RelativeLayout 熟悉的开发者来讲，约束布局的工做原理很像 RelativeLayout 中经过建立组件间关系来控制布局。

在 Android Studio 编辑器中建立约束

最容易建立约束布局的方式是经过 Android Studio 中的 design 可视化布局编辑器。本文章的例子都经过蓝图 Blueprint 视图来查看展现，咱们先简单看看在 Blueprint 视图中的 TextView 。

清晰地能够看到 TextView 组件，以及两个箭头符号表示在这个 TextView 组件上存在约束将它对齐到父组件 ConstraintLayout 的左边缘和上边缘。待会再来看它们是如何建立的，还能够看到存在 16dp 的外边距让父组件 ConstraintLayout 和 TextView 的组件边缘之间保留了一些间隙。选择 TextView 组件就会看到以下的缩放和约束锚点。

边角上的小正方形是缩放的控制点，经过拖拉这些点就能够对 TextView 进行缩放。可是这个大多数状况并非很适用，由于使用这种方式进行缩放后的组件将保持固定的尺寸，而咱们每每更须要 TextView 根据具体状况响应式大小。

每条边中间的锚点就是约束锚点，咱们就是用这个锚点来建立约束的。其中左边和上边的锚点里面有蓝点表示这个锚点已经存在了一个约束，相对的右边和下边的空心锚点则表示没有约束。从这个例子，咱们就能够看到 TextView 的布局位置就经过定义约束来对齐了父组件。

任何继承了 TextView 的子组件都拥有另外一个锚点：被称为基线（baseline）。这就容许咱们经过该锚点来调整组件内的文字对齐基线。选择 TextView 后出现下方按钮，点击其中的 ab 按钮来显示这个锚点。

在 TextView 上出现香肠状的控制锚点就是基线约束锚点。咱们能够经过给这个锚点添加约束就像下面提到给四个边的约束锚点添加约束同样。

另外一个出现的下方按钮中是取消约束按钮（按钮中存在 'x' ），点击将移除该组件上的全部约束。

建立锚点，咱们只须要简单的从一个组件的锚点，拖动指向到另外一个组件 View 的锚点。此处的例子，咱们建立另外一个 TextView （id 为 textView2 ,原来的那个 id 是 textview），并且 textView2 已有一个对齐父组件左边的约束，咱们再建立一个约束，从 textView2 的上边到 textview 的下边。而这个约束就会让 textView2 对齐到 textview 正下方，以下所示：

在此处还要注意，咱们建立的约束是从 textView2 的上边到 textView 的下边，当咱们选择这两个组件的时候，咱们只会看到 textView2 的上边约束锚点存在约束，而 textView 的下边约束锚点是空心的不存在约束。

这样的缘由是约束是单向的（除非咱们谈论的约束是连接 chains ），因此这里例子建立的约束是属于 textView2 的，影响的也是 textView2 的布局位置是相对于 textView 的。由于该约束是只属于 textView2 的，反过来不会影响 textView 的布局位置

上面讲到的是同级组件间建立约束，而对于一个组件要建立相对于父组件的约束，则只是简单的将约束拖的方向到合适的父组件边缘便可，以下：

在 XML 中建立约束

对于想了解在可视化布局下真正的存储的是如何的开发者，如下就是 上面例子的 XML 源码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">

  <TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="TextView" />

  <TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="8dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView"
    tools:text="TextView" />
</android.support.constraint.ConstraintLayout>

代码中的约束都是以 app:layout_constraint 开头的属性。咱们能够看到 ConstraintLayout 中全部子组件都存在这些属性。让他们对齐父组件的边缘。你还能够看到 textView2 定义了一个约束声明了该组件的上边相对对齐到 textview 的下边。

值得一提的是，这些属性设置都是使用的 app 命名空间由于 ConstraintLayout 是像 Support libraries 也是做为库引入。它属于你的命名空间 app 而不是属于安卓框架（使用命名空间 android ）。

删除约束

上面提到咱们能够经过选中组件后出现的清空按钮来清除全部的约束。最后，咱们还要介绍的是只删除其中一个约束。若是在 XML 源码中能够直接去掉相应的属性。若使用的是可视化编辑器，则经过点击约束锚点来去除约束条件。

最新系列教程，能够关注个人博客 https://biaomingzhong.github.io/