前面介紹了如何使用ConstraintLayout，在用ConstraintLayout的時候千萬要運行一下，在手機上看看結果，因為有時候在AS上面看是沒問題的，但是運行到手機上面還是會又不一樣的效果的。
然后本文將來介紹ConstraintLayout中的Chain也就是鏈條，還有ConstraintLayout輔助線Guideline的使用。

Chains

鏈條是什么？簡單說就是一條鏈將同一軸（水平或者垂直）上面給連接起來，使他們能夠統一行動。

在了解鏈條之前，我們來寫一個栗子，來見識下鏈條的作用和強大的功能，下面的布局是好幾個不同的Tab組成的，每一行的Tab都是一個鏈條，每一行都是不同的style：

下面是實現的代碼（省略了一些屬性）：

<!-- weight chain --><TextViewandroid:id="@+id/weightStart"android:layout_width="0dp"app:layout_constraintHorizontal_weight="1" /><TextViewandroid:id="@+id/weightCenter"android:layout_width="0dp"app:layout_constraintHorizontal_weight="2" /><TextViewandroid:id="@+id/weightEnd"android:layout_width="0dp"app:layout_constraintHorizontal_weight="2" /><!-- spread chain--><TextViewandroid:id="@+id/spreadStart"app:layout_constraintBottom_toTopOf="@id/weightStart"app:layout_constraintEnd_toStartOf="@id/spreadCenter"app:layout_constraintStart_toStartOf="parent" /><TextViewandroid:id="@+id/spreadCenter" /><TextViewandroid:id="@+id/spreadEnd" /><!-- packed chain --><TextViewandroid:id="@+id/packedStart"app:layout_constraintHorizontal_chainStyle="packed" /><TextViewandroid:id="@+id/packedCenter" /><TextViewandroid:id="@+id/packedEnd" /><!-- spread_inside chain --><TextViewandroid:id="@+id/insideStart"app:layout_constraintHorizontal_chainStyle="spread_inside" /><TextViewandroid:id="@+id/insideCenter"/><TextViewandroid:id="@+id/insideEnd" /><!-- packed chain with bias --><TextViewandroid:id="@+id/packedBiasStart"app:layout_constraintHorizontal_bias="0.2"app:layout_constraintHorizontal_chainStyle="packed" /><TextViewandroid:id="@+id/packedBiasCenter" /><TextViewandroid:id="@+id/packedBiasEnd" />

可以看出，有五種不同的操作，而且每一行都是設置第一個控件的屬性，然后每一行都是不同的顯示，下面我們進入正題。。

Creating a chain

如何創建一個鏈條，當兩個控件雙向鏈接的時候，如下圖所示，A和B里面的兩條鏈，加上A和B兩個控件，叫做一個鏈條。

下面的代碼就是將兩個按鈕鏈接在一起，成為一個chain(省略一些屬性)：

<Buttonandroid:id="@+id/upload"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toStartOf="@id/discard"app:layout_constraintStart_toStartOf="parent" /><Buttonandroid:id="@+id/discard"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toEndOf="@id/upload" />

Chain heads

什么是鏈頭，一個鏈條里面的第一個元素即為頭，水平最左邊，垂直最上邊的控件，鏈頭的作用是控制整個鏈條的屬性，如上面的A控件就是鏈頭。

Margins in chains

在鏈頭上面設置margin，整個鏈條都會響應這個margin，比如設置鏈頭的一個左邊android:layout_marginStart="10dp"，這整個鏈條都會響應這個margin：

Chain Style

鏈條可以設置不同的style，通過設置下面兩個屬性分別設置水平或者垂直：

• layout_constraintHorizontal_chainStyle
• layout_constraintVertical_chainStyle

而style包括三種：

• spread(默認)-元素被分散開

• spread_inside-與spread類似，只是鏈條的端點不會被分散

• packed-鏈條內的元素將被捆在一起

同時還有兩種組合，在鏈條里面，可以使用weight和bias：

• spread + weight-將元素的尺寸設置為MATCH_CONSTRAINT時，可以與weight平分空間

• packed + bias- 前面說過bias是偏重的意思，這里就是將鏈條集體偏重。

在文章一開始，我們就寫好了包含的所有的style，不明白的可以往上面重新看，至于省略的代碼，寫一下就出來了。

Guideline

Guideline是只能用在ConstraintLayout布局里面的一個工具類，用于輔助布局，類似為輔助線，可以設置android:orientation屬性來確定是橫向的還是縱向的。

• 當設置為vertical的時候，Guideline的寬度為0，高度是parent也就是ConstraintLayout的高度
• 同樣設置為horizontal的時候，高度為0，寬度是parent的寬度

重要的是Guideline是不會顯示到界面上的，默認是GONE的。

Guideline還有三個重要的屬性，每個Guideline只能指定其中一個：

• layout_constraintGuide_begin，指定左側或頂部的固定距離，如100dp，在距離左側或者頂部100dp的位置會出現一條輔助線
• layout_constraintGuide_end，指定右側或底部的固定距離，如30dp，在距離右側或底部30dp的位置會出現一條輔助線
• layout_constraintGuide_percent，指定在父控件中的寬度或高度的百分比，如0.8，表示距離頂部或者左側的80%的距離。

通過一個栗子便能理解：

<android.support.constraint.Guidelineandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/guidelineBegin"app:layout_constraintGuide_begin="100dp"android:orientation="vertical"/><Buttonandroid:text="Button"android:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/button"app:layout_constraintLeft_toLeftOf="@+id/guidelineBegin"android:layout_marginTop="16dp"app:layout_constraintTop_toTopOf="parent" /><android.support.constraint.Guidelineandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/guidelineEnd"app:layout_constraintGuide_end="100dp"android:orientation="vertical"/><Buttonandroid:text="Button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/buttonEnd"app:layout_constraintRight_toLeftOf="@+id/guidelineEnd"android:layout_marginTop="48dp"app:layout_constraintTop_toTopOf="parent" /><android.support.constraint.Guidelineandroid:id="@+id/guidelinePercent"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"app:layout_constraintGuide_percent="0.8" /><Buttonandroid:text="Button3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/buttonPercent"app:layout_constraintLeft_toLeftOf="@+id/guidelinePercent"android:layout_marginTop="96dp"app:layout_constraintTop_toTopOf="parent" />

預覽：

當你要用一個控件占屏幕寬度的一半的時候，可以用layout_constraintGuide_percent，如下面代碼：

<android.support.constraint.Guidelineandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/guidelineBegin"app:layout_constraintGuide_percent="0.5"app:layout_constraintStart_toStartOf="@id/button"android:orientation="vertical"/><Buttonandroid:text="Button"android:layout_width="0dp"android:layout_height="wrap_content"android:id="@+id/button"app:layout_constraintStart_toStartOf="parent"app:layout_constraintEnd_toStartOf="@+id/guidelineBegin"android:layout_marginTop="16dp"app:layout_constraintTop_toTopOf="parent" />

效果圖：

是不是很簡單呢！！！

總結

鏈條能夠很好的幫助我們將幾個控件統一管理，同時Guideline能幫我們輔助布局，而不用添加一個其他的View并且設置GONE，Guideline都幫我們實現了。

感謝

• ConstraintLayout/Chains
• Guideline
• ConstraintLayout 完全解析 快來優化你的布局吧
• ConstraintLayout 屬性詳解 和Chain的使用

總結

以上是生活随笔為你收集整理的ConstraintLayout中Chains和Guideline的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。