[譯] ConstraintLayout基礎之Chains鏈

原文：ConstraintLayout basics create chains
做者：Mark Allison

---

什麼是 Chain 鏈

Chain 鏈是一種特殊的約束讓多個 chain 鏈鏈接的 Views 可以平分剩餘空間位置。在 Android 傳統佈局特性裏面最類似的應該是 LinearLayout 中的權重比 weight ，但 Chains 鏈能作到的遠遠不止權重比 weight 的功能。

開始建立 Chain 鏈

前面概要已經提到了 Chain 鏈是由多個 Views 組合的，因此要建立一個 Chain 鏈就須要先選擇多個想要連接到一塊兒的 Views ，而後再右鍵選擇 'Center Horizontally' 或者 'Center Vertically' 來建立水平鏈或者垂直鏈。以下，建立一個水平鏈：

首先，能夠注意到 Chain 鏈兩邊末端的兩個 View 已經存在了相對於父組件的左邊緣和右邊緣的約束。 Chain 鏈的建立定義的是 Chain 鏈組件之間的間隙關係，並不影響原有的非成員間的約束。以下剛剛建立後的圖中，有不少視圖上的標識符須要解釋一下。

觀察截圖，能夠看到 Chain 鏈組件之間的鏈接相似於鏈條圖案，而邊緣兩端的 View 與 父組件之間的鏈接相似於彈窗圖案。最外面的鏈接圖案表明了 Chain 鏈的連接模式（chain mode），連接模式決定了 Chain 鏈如何分配組件之間的剩餘空間，你能夠從 Chain 鏈每一個組件下面的 「轉換 Chain 模式」 按鈕來切換 Chain 鏈模式。

Chain 鏈模式一共有三種，分別爲：spread ，spread_inside 和 packed 。

Spread Chain 鏈模式

Chain 鏈的默認模式就是 spread 模式，它將平分間隙讓多個 Views 佈局到剩餘空間。

Spread Inside Chain 鏈模式

Chain 鏈的另外一個模式就是 spread inside 模式，它將會把兩邊最邊緣的兩個 View 到外向父組件邊緣的距離去除，而後讓剩餘的 Views 在剩餘的空間內平分間隙佈局。

Packed Chain 鏈模式

最後一種模式是 packed ，它將全部 Views 打包到一塊兒不分配多餘的間隙（固然不包括經過 margin 設置多個 Views 之間的間隙），而後將整個組件組在可用的剩餘位置居中：

在 packed chain 鏈模式，打包在一塊兒的 Views 組能夠進一步經過控制修改 bias 值來控制打包組的位置，在例子中 bias 模式是 0.5 將 Views 組居中。

Spread Chain 鏈的權重

spread 和 spread inside Chain 鏈能夠設置每一個組件的 weight 權重，這跟 LinearLayout 的 weight 權重設置很像。當前版本（Android Studio 2.4 alpha 7）的視圖編輯器不能直接操做設置這個權重，不過咱們能夠經過屬性視圖（properties 視圖）來手動設置屬性。

對特定的組件設置 spread 權重，首先得選擇這個 View 組件，假設該 View 是在一個水平的 Chain 鏈中，那麼須要在屬性視圖（properties 視圖）中設置 android:layout_width="0dp" 而後修改 app:layout_constraintHorizontal_weight="1"，以下所示：

這時候觀察 View 組件在 blueprint 藍圖視圖模式中的改變，它的上邊和下邊緣都從直線變成了相似手風琴的線條，這符號就表示了 spread 或 spread inside Chain 鏈模式下的被設置了權重的組件。

同時要注意的是，在 packed Chain 鏈模式下設置權重 weight 並無做用。就是說並不像 spread 和 spread inside 模式中表現的佔據儘量的剩餘空間，在 packed 模式下該組件就會被收縮成 0 大小。

在 XML 中設置 Chain 鏈

雖然假如在 XML 中存在特有的屬性設置 Chain 鏈模式會比較好，但事實上並無特有的屬性，而是現有的約束條件的一種組合。在 XML 中設置 Chain 鏈模式只須要設置好雙向互補的約束。本文中首個例子的 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="com.stylingandroid.scratch.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_constraintEnd_toStartOf="@+id/textView2"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="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_marginTop="16dp"
    app:layout_constraintEnd_toStartOf="@+id/textView3"
    app:layout_constraintStart_toEndOf="@+id/textView"
    app:layout_constraintTop_toTopOf="parent"
    tools:layout_editor_absoluteX="141dp"
    tools:text="TextView" />

  <TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:layout_marginTop="16dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/textView2"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="TextView" />

</android.support.constraint.ConstraintLayout>

在 textView 中設置了約束屬性 app:layout_constraintEndToStartOf="@+id/textView2" ，而相對的在 textView2 也設置了約束屬性 app:layout_constraintStart_toEndOf="@+id/textView" ，本質上就是建立兩個約束條件，同一對錨點可是方向相反的約束條件，這就是 Chain 鏈的定義方式。

另外，textView 中的約束屬性 app:layout_constraintHorizontal_chainStyle="spread" 就是指定了鏈模式 spread 你能夠經過修改爲 spread inside 或 packed 來切換鏈模式，並且這個約束屬性必須在鏈頭，便是鏈組件中的第一個組件。

而設置鏈模式的 bias 能夠經過設置約束屬性 app:layout_constraintHorizontal_bias="0.75" 從 0.0 - 1.0 。

最後，咱們就能夠經過設置屬性 android:layout_width="0dp" 以及 app:layout_constraintHorizontal_weight="1" 來設置 Chain 鏈中組件的權重。

最新系列教程，能夠關注個人博客 https://biaomingzhong.github.io/