Android ConstraintLayout 構建自適應界面

原文連接

使用 ConstraintLayout 構建自適應界面

ConstraintLayout 可以讓您使用扁平視圖層次結構（無嵌套視圖組）建立複雜的大型佈局。它與 RelativeLayout 類似，其中全部的視圖均根據同級視圖與父佈局之間的關係進行佈局，但其靈活性要高於 RelativeLayout，而且更易於與 Android Studio 的佈局編輯器配合使用。

本文展現約束條件中的幾種用法。

約束條件

建立約束條件時，請注意如下規則：

• 每一個視圖都必須至少有兩個約束條件：一個水平約束條件，一個垂直約束條件。
• 只能在共用同一平面的約束手柄與定位點之間建立約束條件。所以，視圖的垂直平面（左側和右側）只能約束在另外一個垂直平面上；而基準線則只能約束到其餘基準線上。
• 每一個約束句柄只能用於一個約束條件，但您能夠在同必定位點上建立多個約束條件（從不一樣的視圖）。

gradle 引入

引入constraintlayout庫

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
複製代碼

constraintlayout使用

在layout中使用android.support.constraint.ConstraintLayout，以下示例

<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="50dp" app:layout_constraintTop_toTopOf="parent">

        <!-- child view layout -->

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

style中新建一個樣式，方便後面操做

<!-- con layout 示例text -->
    <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>
複製代碼

若子view沒有添加約束，則會跑到父constraintlayout的(0,0)位置

<androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/c1" android:layout_width="match_parent" android:layout_height="50dp" android:background="#f0f0f0" app:layout_constraintTop_toTopOf="parent">

        <TextView style="@style/ConSampleText" android:text="No rule, jump to (0,0)" />

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

對齊，屬性說明

定位時使用到諸如app:layout_constraintStart_toStartOf或者app:layout_constraintTop_toTopOf屬性。

app:layout_constraintStart_toStartOf，裏面有2個Start字眼。 第一個Start表示自身的起始位置（默認是左邊）。第二個toStartOf表示對齊參照物的起始位置。

app:layout_constraintTop_toTopOf也相似。與參照物頂部對齊。

指定位置的字眼，如Top、Bottom、End、Start，它們組合使用可用來肯定相對位置：app:layout_constraint{}_to{}Of

相對父layout的定位

將子view對齊到父layout的各個邊緣位置。

約束的參考對象是parent。

<androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/c2" android:layout_width="match_parent" android:layout_height="140dp" android:layout_marginTop="20dp" android:background="#f0f0f0" app:layout_constraintTop_toBottomOf="@id/c1">

        <!-- 相對父layout的邊緣定位 -->

        <TextView style="@style/ConSampleText" android:text="居中" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

        <TextView style="@style/ConSampleText" android:text="左上角" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

        <TextView style="@style/ConSampleText" android:text="左下角" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" />

        <TextView style="@style/ConSampleText" android:text="右下角" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" />

        <TextView style="@style/ConSampleText" android:text="右上角" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" />

        <TextView style="@style/ConSampleText" android:text="頂部水平居中" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

        <TextView style="@style/ConSampleText" android:text="底部水平居中" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" />

        <TextView style="@style/ConSampleText" android:text="左邊垂直居中" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

        <TextView style="@style/ConSampleText" android:text="右邊垂直居中" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" />

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

基線對齊

將一個視圖的文本基線與另外一視圖的文本基線對齊。

可使用app:layout_constraintBaseline_toBaselineOf屬性設置基線對齊。

示例

<androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/c21" android:layout_width="match_parent" android:layout_height="100dp" android:background="#f0f0f0" app:layout_constraintTop_toTopOf="parent">

        <TextView android:id="@+id/tv1" style="@style/ConSampleText" android:layout_marginStart="10dp" android:text="an" android:textSize="13sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

        <TextView android:id="@+id/tv2" style="@style/ConSampleText" android:layout_marginStart="10dp" android:text="Rust" android:textSize="20sp" app:layout_constraintBaseline_toBaselineOf="@id/tv1" app:layout_constraintStart_toEndOf="@+id/tv1" />

        <TextView android:id="@+id/tv3" style="@style/ConSampleText" android:layout_marginStart="10dp" android:text="Fisher" android:textSize="24sp" app:layout_constraintBaseline_toBaselineOf="@id/tv1" app:layout_constraintStart_toEndOf="@+id/tv2" />

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

示例圖

引導線約束 Guideline

在ConstraintLayout中添加引導線，能夠方便定位。其餘View能夠引導線做爲參考位置。

添加Guideline，須要肯定它的方向，分別是垂直和水平。

• android:orientation="vertical"
• android:orientation="horizontal"

比例定位

這裏按比例來定位，使用app:layout_constraintGuide_percent。 須要指定比例值，例如app:layout_constraintGuide_percent="0.5"。

<androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/c3" android:layout_width="match_parent" android:layout_height="240dp" android:layout_marginTop="40dp" android:background="#f0f0f0" app:layout_constraintTop_toBottomOf="@id/c2">

        <!-- 引導線約束: 相對父layout 按比例定位 -->

        <!-- 垂直引導線 Guideline -->
        <androidx.constraintlayout.widget.Guideline android:id="@+id/g1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.33" />

        <androidx.constraintlayout.widget.Guideline android:id="@+id/g2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_percent="0.5" />

        <TextView android:id="@+id/t1" style="@style/ConSampleText" android:text="垂直的1/3引導線後" app:layout_constraintStart_toStartOf="@id/g1" app:layout_constraintTop_toTopOf="parent" />

        <TextView android:id="@+id/t2" style="@style/ConSampleText" android:text="垂直的1/3引導線前" app:layout_constraintEnd_toStartOf="@id/g1" app:layout_constraintTop_toTopOf="parent" />

        <TextView android:id="@+id/t3" style="@style/ConSampleText" android:layout_marginTop="2dp" android:text="垂直的1/3引導線居中" app:layout_constraintEnd_toEndOf="@id/g1" app:layout_constraintStart_toStartOf="@id/g1" app:layout_constraintTop_toBottomOf="@id/t2" />

        <TextView android:id="@+id/th1" style="@style/ConSampleText" android:text="水平的1/2引導線居中" app:layout_constraintBottom_toBottomOf="@id/g2" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="@id/g2" />

        <TextView android:id="@+id/th2" style="@style/ConSampleText" android:layout_marginStart="2dp" android:text="水平的1/2引導線上面" app:layout_constraintBottom_toBottomOf="@id/g2" app:layout_constraintStart_toEndOf="@id/th1" />

        <TextView android:id="@+id/th3" style="@style/ConSampleText" android:layout_marginStart="2dp" android:text="水平的1/2引導線下面" app:layout_constraintStart_toEndOf="@id/th1" app:layout_constraintTop_toBottomOf="@id/g2" />

        <androidx.constraintlayout.widget.Guideline android:id="@+id/gv75" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.75" />

        <androidx.constraintlayout.widget.Guideline android:id="@+id/gh75" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_percent="0.75" />

        <TextView style="@style/ConSampleText" android:layout_marginStart="2dp" android:text="(0.75,0.75)" app:layout_constraintBottom_toBottomOf="@id/gh75" app:layout_constraintEnd_toEndOf="@id/gv75" app:layout_constraintStart_toStartOf="@id/gv75" app:layout_constraintTop_toTopOf="@id/gh75" />

        <TextView style="@style/ConSampleText" android:layout_marginStart="2dp" android:text="(0.33, 0.75)" app:layout_constraintBottom_toBottomOf="@id/gh75" app:layout_constraintEnd_toEndOf="@id/g1" app:layout_constraintStart_toStartOf="@id/g1" app:layout_constraintTop_toTopOf="@id/gh75" />

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

具體數值

咱們也可使用app:layout_constraintGuide_end或者app:layout_constraintGuide_begin來指定具體的數值。

<androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/c4" android:layout_width="match_parent" android:layout_height="50dp" android:layout_marginTop="30dp" android:background="#f0f0f0" app:layout_constraintTop_toBottomOf="@id/c3">

        <androidx.constraintlayout.widget.Guideline android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_begin="10dp" />

        <androidx.constraintlayout.widget.Guideline android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_end="10dp" />

        <androidx.constraintlayout.widget.Guideline android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_begin="10dp" />

        <androidx.constraintlayout.widget.Guideline android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_end="10dp" />

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

as預覽圖

屏障約束

與引導線相似，屏障是一條隱藏的線，您能夠用它來約束視圖。屏障不會定義本身的位置；相反，屏障的位置會隨着其中所含視圖的位置而移動。 若是您但願將視圖限制到一組視圖而不是某個特定視圖，這就很是有用。

豎直屏障示例

這是一個豎直屏障的例子。barrier1以tv221和tv222做爲參考。

設置app:barrierDirection="end"，而且設置tv223在它的右側。

也就是barrier1會被tv221和tv222「推」着走。

<androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/c22" android:layout_width="match_parent" android:layout_height="120dp" android:layout_marginTop="10dp" android:background="#f3f3f3" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/c21">

        <TextView android:id="@+id/tv221" style="@style/ConSampleText" android:layout_marginStart="10dp" android:text="an" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

        <TextView android:id="@+id/tv222" style="@style/ConSampleText" android:layout_marginTop="4dp" android:text="RustFisher" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/tv221" />

        <TextView style="@style/ConSampleText" android:layout_marginTop="4dp" android:text="沒有以此做爲參考，無論這個有多長" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/tv222" />

        <androidx.constraintlayout.widget.Barrier android:id="@+id/barrier1" android:layout_width="wrap_content" android:layout_height="wrap_content" app:barrierDirection="end" app:constraint_referenced_ids="tv221 ,tv222" />

        <TextView android:id="@+id/tv223" style="@style/ConSampleText" android:layout_marginStart="10dp" android:text=".com" app:layout_constraintStart_toEndOf="@id/barrier1" app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

複製代碼

調整約束誤差

對某個視圖的兩側添加約束條件（而且同一維度的視圖尺寸爲「fixed」或者「wrap Content」）時，則該視圖在兩個約束條件之間居中且默認誤差爲 50%。 能夠經過設置屬性來調整誤差。

• app:layout_constraintVertical_bias
• app:layout_constraintHorizontal_bias

例如

<androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/c23" android:layout_width="match_parent" android:layout_height="140dp" android:layout_marginTop="10dp" android:background="#f3f3f3" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/c22">

        <TextView style="@style/ConSampleText" android:text="Rust" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

        <TextView style="@style/ConSampleText" android:text="0.33,0.33" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.33" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.33" />

        <TextView style="@style/ConSampleText" android:text="0.8,0.8" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.8" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.8" />

    </androidx.constraintlayout.widget.ConstraintLayout>

複製代碼

調整視圖尺寸

這裏調整的是子view的尺寸。

Match Constraints 視圖會盡量擴展，以知足每側的約束條件（在考慮視圖的外邊距以後）。 不過，您可使用如下屬性和值修改該行爲（這些屬性僅在您將視圖寬度設置爲「match constraints」時纔會生效）：

layout_constraintWidth_default

• spread：儘量擴展視圖以知足每側的約束條件。這是默認行爲。

• wrap：僅在須要時擴展視圖以適應其內容，但若有約束條件限制，視圖仍然能夠小於其內容。所以，它與使用 Wrap Content（上面）之間的區別在於，將寬度設爲 Wrap Content 會強行使寬度始終與內容寬度徹底匹配；而使用 layout_constraintWidth_default 設置爲 wrap 的Match Constraints 時，視圖能夠小於內容寬度。

• layout_constraintWidth_min 該視圖的最小寬度採用 dp 維度。

• layout_constraintWidth_max 該視圖的最大寬度採用 dp 維度。

layout中設置 android:layout_width="0dp"和android:layout_height="0dp"。 肯定好周圍的參照線。

<androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/c24" android:layout_width="match_parent" android:layout_height="200dp" android:layout_marginTop="20dp" android:background="#009C8D" app:layout_constraintTop_toBottomOf="@id/c23">

        <androidx.constraintlayout.widget.Guideline android:id="@+id/v50" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.5" />

        <androidx.constraintlayout.widget.Guideline android:id="@+id/h50" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_percent="0.5" />

        <TextView style="@style/ConSampleText" android:layout_width="0dp" android:layout_height="0dp" android:layout_margin="30dp" android:gravity="center" android:text="R" app:layout_constraintBottom_toTopOf="@id/h50" app:layout_constraintEnd_toStartOf="@id/v50" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

        <TextView style="@style/ConSampleText" android:layout_width="0dp" android:layout_height="0dp" android:layout_margin="30dp" android:gravity="center" android:text="U" app:layout_constraintBottom_toTopOf="@id/h50" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@id/v50" app:layout_constraintTop_toTopOf="parent" />

        <TextView style="@style/ConSampleText" android:layout_width="0dp" android:layout_height="0dp" android:layout_margin="30dp" android:gravity="center" android:text="S" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="@id/v50" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/h50" />

        <TextView style="@style/ConSampleText" android:layout_width="0dp" android:layout_height="0dp" android:layout_margin="30dp" android:gravity="center" android:text="T" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@id/v50" app:layout_constraintTop_toBottomOf="@id/h50" />

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

將尺寸設置爲比例

比例爲寬比高 width:height。若是寬高其中一個設置了大於0的具體值或wrap_content，能夠其爲標準來調整另外一個尺寸參數。

示例1

設置layout_width="40dp"，android:layout_height="0dp"，比例爲3:2。 以寬40dp爲基準，按比例調整高度。

<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="@dimen/con_card_size" android:layout_height="@dimen/con_card_size" android:background="#f0f0f0">

    <TextView android:layout_width="40dp" android:layout_height="0dp" android:layout_marginTop="16dp" android:layout_marginBottom="16dp" android:background="#2196F3" android:gravity="center" android:text="3:2" android:textColor="#ffffff" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintDimensionRatio="3:2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

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

示例2

高度40dp，比例3:2，自動調整寬度。

<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="@dimen/con_card_size" android:layout_height="@dimen/con_card_size" android:layout_marginStart="20dp" android:background="#f0f0f0">

    <TextView android:layout_width="0dp" android:layout_height="40dp" android:layout_marginTop="16dp" android:layout_marginBottom="16dp" android:background="#009688" android:gravity="center" android:text="3:2" android:textColor="#ffffff" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintDimensionRatio="3:2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

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

寬高都設爲0

寬高都設置爲0dp，比例爲3:2。會嘗試填滿整個父layout。

<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="@dimen/con_card_size" android:layout_height="@dimen/con_card_size" android:layout_marginStart="20dp" android:background="#f0f0f0">

    <TextView android:layout_width="0dp" android:layout_height="0dp" android:background="#3F51B5" android:gravity="center" android:text="3:2" android:textColor="#ffffff" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintDimensionRatio="3:2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

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

寬wrap_content，高度0

layout_width -> wrap_content，高度爲0，比例1:2。以寬度爲基準。

<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="@dimen/con_card_size" android:layout_height="@dimen/con_card_size" android:background="#f0f0f0">

    <TextView android:layout_width="wrap_content" android:layout_height="0dp" android:layout_marginTop="16dp" android:layout_marginBottom="16dp" android:background="#009688" android:gravity="center" android:text="1:2" android:textColor="#ffffff" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintDimensionRatio="1:2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

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

高度wrap_content，寬度0

比例5:2，會以高度爲基準。

<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="@dimen/con_card_size" android:layout_height="@dimen/con_card_size" android:layout_marginStart="20dp" android:background="#f0f0f0" app:layout_constraintTop_toTopOf="parent">

    <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:layout_marginBottom="16dp" android:background="#009688" android:gravity="center" android:text="5:2" android:textColor="#ffffff" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintDimensionRatio="5:2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

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