Android ConstraintLayout 使用鏈控制線性組

使用鏈控制線性組

鏈是一組視圖，這些視圖經過雙向位置約束條件相互連接到一塊兒。鏈中的視圖能夠垂直或水平分佈。

• 1. Spread：視圖是均勻分佈的（在考慮外邊距以後）。這是默認值。
• 2. Spread inside：第一個和最後一個視圖固定在鏈兩端的約束邊界上，其他視圖均勻分佈。
• 3. Weighted：當鏈設置爲 spread 或 spread inside 時，您能夠經過將一個或多個視圖設置爲「match constraints」(0dp) 來填充剩餘空間。默認狀況下，設置爲「match constraints」的每一個視圖之間的空間均勻分佈，但您可使用 layout_constraintHorizontal_weight 和 layout_constraintVertical_weight 屬性爲每一個視圖分配重要性權重。若是您熟悉線性佈局中的 layout_weight 的話，就會知道該樣式與它的原理是相同的。所以，權重值最高的視圖得到的空間最大；相同權重的視圖得到一樣大小的空間。
• 4. Packed：視圖打包在一塊兒（在考慮外邊距以後）。 而後，您能夠經過更改鏈的頭視圖誤差調整整條鏈的誤差（左/右或上/下）。

鏈的「頭」視圖：水平鏈中最左側的視圖以及垂直鏈中最頂部的視圖。

鏈的「尾」視圖：水平鏈中最右（end）側的視圖以及垂直鏈中最底部的視圖。

要組成鏈，頭和尾必須進行設置。 以水平鏈爲例

• 頭 app:layout_constraintStart_toStartOf="parent"
• 尾 app:layout_constraintEnd_toEndOf="parent"

水平鏈

默認均勻分佈 Spread

4個TextView水平排開，均勻分佈。 layout中簡單說來是互相做爲參照物。

<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="60dp" android:layout_marginTop="20dp" android:background="#fff">

        <TextView android:id="@+id/tv1" style="@style/ConSampleText" android:layout_marginEnd="8dp" android:background="#009688" android:gravity="center" android:text="R" android:textColor="#ffffff" app:layout_constraintEnd_toStartOf="@+id/tv2" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

        <TextView android:id="@+id/tv2" style="@style/ConSampleText" android:background="#009688" android:gravity="center" android:text="u" android:textColor="#ffffff" app:layout_constraintEnd_toStartOf="@+id/tv3" app:layout_constraintStart_toEndOf="@+id/tv1" app:layout_constraintTop_toTopOf="parent" />

        <TextView android:id="@+id/tv3" style="@style/ConSampleText" android:background="#009688" android:gravity="center" android:text="s" android:textColor="#ffffff" app:layout_constraintEnd_toStartOf="@+id/tv4" app:layout_constraintStart_toEndOf="@+id/tv2" app:layout_constraintTop_toTopOf="parent" />

        <TextView android:id="@+id/tv4" style="@style/ConSampleText" android:background="#009688" android:gravity="center" android:text="t" android:textColor="#ffffff" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@+id/tv3" app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
複製代碼

style.xml

<style name="ConSampleText"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:padding">4dp</item> <item name="android:textColor">#fff</item> <item name="android:background">#3F51B5</item> </style>
複製代碼

Spread inside

若是須要Spread inside樣式，須要設置一下「頭」子view：app:layout_constraintHorizontal_chainStyle="spread_inside"

<!-- ... -->
    <TextView android:id="@+id/tv1" style="@style/ConSampleText" android:background="#009688" android:gravity="center" android:text="R" android:textColor="#ffffff" app:layout_constraintEnd_toStartOf="@+id/tv22" app:layout_constraintHorizontal_chainStyle="spread_inside" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
    <!-- ... -->
複製代碼

Weighted

能夠設置子view按比例分配剩餘空間。須要先把width設爲0dp。 而且設置app:layout_constraintHorizontal_weight屬性。

<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="60dp" android:layout_marginTop="20dp" android:background="#fff">

        <TextView android:id="@+id/tv1" style="@style/ConSampleText" android:layout_width="0dp" app:layout_constraintHorizontal_weight="2" android:background="#4CAF50" android:gravity="center" android:text="R" android:textColor="#ffffff" app:layout_constraintEnd_toStartOf="@+id/tv2" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

        <TextView android:id="@+id/tv2" style="@style/ConSampleText" android:layout_width="0dp" android:background="#009688" app:layout_constraintHorizontal_weight="1" android:gravity="center" android:text="u" android:textColor="#ffffff" app:layout_constraintEnd_toStartOf="@+id/tv3" app:layout_constraintStart_toEndOf="@+id/tv1" app:layout_constraintTop_toTopOf="parent" />

        <TextView android:id="@+id/tv3" style="@style/ConSampleText" android:background="#4CAF50" android:gravity="center" android:text="s" android:textColor="#ffffff" app:layout_constraintEnd_toStartOf="@+id/tv4" app:layout_constraintStart_toEndOf="@+id/tv2" app:layout_constraintTop_toTopOf="parent" />

        <TextView android:id="@+id/tv4" style="@style/ConSampleText" android:background="#009688" android:gravity="center" android:text="t" android:textColor="#ffffff" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@+id/tv3" app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

複製代碼

packed

第一個子view設置 app:layout_constraintHorizontal_chainStyle="packed"

<!-- ... -->
    <TextView android:id="@+id/tv1" style="@style/ConSampleText" android:background="#009688" android:gravity="center" android:text="R" android:textColor="#ffffff" app:layout_constraintEnd_toStartOf="@+id/tv22" app:layout_constraintHorizontal_chainStyle="packed" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
    <!-- ... -->
複製代碼

5等分屏幕

等分屏幕的方法有不少種方式。例如加上guideline，設置比如例。這裏咱們用鏈式來水平等分屏幕或父layout。 不管是平分，3等分或是5等分，方式都是相似的。以5等分爲例。

切分的view，寬度設置爲0dp，layout_constraintHorizontal_weight設置爲同樣的，好比1。

頭視圖注意設置app:layout_constraintHorizontal_chainStyle="spread"和app:layout_constraintStart_toStartOf="parent"； 尾視圖注意設置app:layout_constraintEnd_toEndOf="parent"。

<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="290dp" android:layout_marginTop="8dp" android:background="#ffffff">

        <RelativeLayout android:id="@+id/dc_start" android:layout_width="0dp" android:layout_height="match_parent" app:layout_constraintEnd_toStartOf="@id/dc_2" app:layout_constraintHorizontal_chainStyle="spread" app:layout_constraintHorizontal_weight="1" app:layout_constraintStart_toStartOf="parent">

            <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="center" android:src="@drawable/pic_hj1" />

        </RelativeLayout>

        <RelativeLayout android:id="@+id/dc_2" android:layout_width="0dp" android:layout_height="match_parent" app:layout_constraintEnd_toStartOf="@id/dc_3" app:layout_constraintHorizontal_weight="1" app:layout_constraintStart_toEndOf="@id/dc_start">

            <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="center" android:src="@drawable/pic_hj2" />

        </RelativeLayout>

        <RelativeLayout android:id="@+id/dc_3" android:layout_width="0dp" android:layout_height="match_parent" app:layout_constraintEnd_toStartOf="@id/dc_4" app:layout_constraintHorizontal_weight="1" app:layout_constraintStart_toEndOf="@id/dc_2">

            <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="center" android:src="@drawable/pic_hj3" />

        </RelativeLayout>

        <RelativeLayout android:id="@+id/dc_4" android:layout_width="0dp" android:layout_height="match_parent" app:layout_constraintEnd_toStartOf="@id/dc_tail" app:layout_constraintHorizontal_weight="1" app:layout_constraintStart_toEndOf="@id/dc_3">

            <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="center" android:src="@drawable/pic_hj4" />

        </RelativeLayout>

        <RelativeLayout android:id="@+id/dc_tail" android:layout_width="0dp" android:layout_height="match_parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_weight="1" app:layout_constraintStart_toEndOf="@+id/dc_4">

            <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="center" android:src="@drawable/pic_hj5" />

        </RelativeLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

複製代碼

注意事項

如下是使用鏈時須要考慮的其餘事項：

• 視圖能夠是水平鏈和垂直鏈的一部分，所以能夠輕鬆構建靈活的網格佈局。
• 只有當鏈的每一端都被約束到同一軸上的另外一個對象時，鏈才能正常工做。
• 雖然鏈的方向爲垂直或水平，但使用其中一個方向不會沿該方向與視圖對齊。所以，請務必包含其餘約束條件，以便使鏈中的每一個視圖都能正肯定位，例如對齊約束。