[譯] 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/