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也類似。與參照物頂部對齊。

指定位置的字眼,如TopBottomEndStart,它們組合使用可用來確定相對位置: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>

示例圖
baseline

引導線約束 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>

手機截圖

as預覽圖

具體數值

我們也可以使用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預覽圖

as預覽圖

屏障約束

與引導線類似,屏障是一條隱藏的線,您可以用它來約束視圖。屏障不會定義自己的位置;相反,屏障的位置會隨着其中所含視圖的位置而移動。
如果您希望將視圖限制到一組視圖而不是某個特定視圖,這就非常有用。
image

豎直屏障示例

這是一個豎直屏障的例子。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>

as預覽圖

調整視圖尺寸

這裏調整的是子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>

as
運行截圖

將尺寸設置爲比例

比例爲寬比高 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>

as預覽圖

寬高都設爲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>

as

高度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>

as預覽圖

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章