chain

Android里的ConstraintLayout是個非常強大的工具蒜田，它有效的解決了Android里Layout的層級嵌套的問題魂毁。使用一個ConstraintLayout可以實現(xiàn)之前多個Layout才能實現(xiàn)的效果玛迄。

本篇文章就介紹下ConstraintLayout里比較進階用法之一：Chain婚苹。

Chain簡介

顧名思義中符，Chain就是把幾個控件像鏈條一樣連接起來配阵，實現(xiàn)一系列的效果冗澈。這個概念看上去有些深奧钦勘，其實并不復(fù)雜。熟悉js/css等技術(shù)的同學(xué)會發(fā)現(xiàn)這些概念很熟悉亚亲。就拿Android來說彻采，使用Chain可以很大程度上在ConstraintLayout里替代原有的LinearLayout和RelativeLayout捏悬。

Chain實例

假設(shè)我們在UI上有三個控件损合，橫著排成一排。要想應(yīng)用Chain的效果麸拄，需要把這3個控件用“鏈子連接起來”惜索。

Chain其實并沒有定義新的控件特笋，只是使用原來的依賴方式。代碼如下：

    <Button
        android:id="@+id/btn_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="這是控件A"
        app:layout_constraintEnd_toStartOf="@+id/btn_b"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:id="@+id/btn_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="這是控件B"
        app:layout_constraintEnd_toStartOf="@+id/btn_c"
        app:layout_constraintStart_toEndOf="@+id/btn_a"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="這是控件C"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/btn_b"
        app:layout_constraintTop_toTopOf="parent" />

對照代碼巾兆，我們來看看具體的鏈接是如何實現(xiàn)的：

1. 控件A猎物，左端依賴父容器，右端依賴控件B角塑。
2. 控件B蔫磨，左端依賴控件A，右端依賴控件C圃伶。
3. 控件C堤如，左端依賴控件B蒲列，右端依賴父容器。

通過3個控件的兩兩互相依賴煤惩，我們實現(xiàn)了把他們鏈接起來的目的嫉嘀，接下來就可以應(yīng)用Chain的各種效果了。應(yīng)用的方式也很簡單魄揉，就是在鏈頭（所謂鏈頭剪侮，就是水平鏈中最左側(cè)的控件以及垂直鏈中最頂部的控件），也就是控件A上加上一句：app:layout_constraintHorizontal_chainStyle="XXX"洛退，其中XXX就是想要的效果瓣俯，可能的取值有：Spread、Spread inside兵怯、Packed幾種彩匕。

    <Button
        android:id="@+id/btn_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="這是控件A"
        app:layout_constraintEnd_toStartOf="@+id/btn_b"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

接下來我們來看看各種取值具體的效果：

spread:

spread的效果

這種效果很簡單，就是3個控件把整個橫向空間平分媒区。

spread_inside:

spread_inside效果

這種效果也是非常常見的驼仪，兩端兩個控件靠邊對齊，中間的控件平分剩下的空間袜漩。

weighted:

在使用spread或spread_inside模式的時候绪爸，可以通過layout_constraintHorizontal_weight和layout_constraintVertical_weight來設(shè)置某個控件的權(quán)重值。這和LinearLayout里的layout_weight很相似宙攻。不過此時需要把控件的layout_width（水平排列）或layout_height（垂直排列）設(shè)置為0dp奠货。

比如我們修改下這個例子里的控件B：

    <Button
        android:id="@+id/btn_b"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="這是控件B"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintEnd_toStartOf="@+id/btn_c"
        app:layout_constraintStart_toEndOf="@+id/btn_a"
        app:layout_constraintTop_toTopOf="parent" />

此時的效果是這樣的：

控件B的weight設(shè)置為1

此時，控件B占滿了剩余的空間座掘。

packed:

packed的效果

<Button
        android:id="@+id/btn_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="這是控件A"
        android:layout_marginLeft="100dp" 
        app:layout_constraintEnd_toStartOf="@+id/btn_b"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

此時3個控件整體向右移動了100dp：

整體向右偏移100dp

其他

關(guān)于Chain還有幾個小知識點：

• 一個控件既可以放在水平鏈里也可以放在垂直鏈里萍虽，因此可以輕松構(gòu)建靈活的網(wǎng)格布局。

• 雖然鏈的方向為垂直或水平形真，但使用其中一個方向不會沿該方向與控件對齊贩挣。因此，我們必須使用其他約束條件没酣，以保證控件在另外的方向上對齊王财。比如上面的例子，我們需要app:layout_constraintTop_toTopOf="parent"來指定垂直方向的約束裕便。

以上就是ConstraintLayout里Chain基本用法绒净，希望對您有所幫助。