使用鏈控制線性組

鏈是一組視圖，這些視圖通過雙向位置約束條件相互鏈接到一起。鏈中的視圖可以垂直或水平分布。

1. Spread：視圖是均勻分布的（在考慮外邊距之后）。這是默認值。
1. Spread inside：第一個和最后一個視圖固定在鏈兩端的約束邊界上，其余視圖均勻分布。
1. Weighted：當鏈設置為 spread 或 spread inside 時，您可以通過將一個或多個視圖設置為“match constraints”(0dp) 來填充剩余空間。默認情況下，設置為“match constraints”的每個視圖之間的空間均勻分布，但您可以使用 layout_constraintHorizontal_weight 和 layout_constraintVertical_weight 屬性為每個視圖分配重要性權重。如果您熟悉線性布局中的 layout_weight 的話，就會知道該樣式與它的原理是相同的。因此，權重值最高的視圖獲得的空間最大；相同權重的視圖獲得同樣大小的空間。
1. 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>

Spread 預覽圖

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" />
    <!-- ... -->

Spread inside 預覽圖

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>

weighted預覽圖

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" />
    <!-- ... -->

packed預覽圖

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>

注意事項

以下是使用鏈時需要考慮的其他事項：

視圖可以是水平鏈和垂直鏈的一部分，因此可以輕松構建靈活的網格布局。
只有當鏈的每一端都被約束到同一軸上的另一個對象時，鏈才能正常工作。
雖然鏈的方向為垂直或水平，但使用其中一個方向不會沿該方向與視圖對齊。因此，請務必包含其他約束條件，以便使鏈中的每個視圖都能正確定位，例如對齊約束。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ConstraintLayout的使用 JMeter_簡單控制線程組(Thread Group)組件的執行順序 Android ConstraintLayout詳解 android -------- ConstraintLayout介紹（一） Android-使用約束布局(ConstraintLayout)構建靈活的UI【譯】 Android Material Design控件使用（一）——ConstraintLayout 約束布局 android -------- ConstraintLayout Guideline和Barrier（四） android -------- ConstraintLayout Group和goneMargin（五） AutoResetEvent控制線程用法 ConstraintLayout的簡單介紹和使用