使用 ConstraintLayout 構(gòu)建自適應(yīng)界面
ConstraintLayout 可讓您使用扁平視圖層次結(jié)構(gòu)（無(wú)嵌套視圖組）創(chuàng)建復(fù)雜的大型布局。它與 RelativeLayout 相似，其中所有的視圖均根據(jù)同級(jí)視圖與父布局之間的關(guān)系進(jìn)行布局，但其靈活性要高于 RelativeLayout，并且更易于與 Android Studio 的布局編輯器配合使用。
本文展示約束條件中的幾種用法。
約束條件
創(chuàng)建約束條件時(shí)，請(qǐng)注意以下規(guī)則：
- 每個(gè)視圖都必須至少有兩個(gè)約束條件：一個(gè)水平約束條件，一個(gè)垂直約束條件。
- 只能在共用同一平面的約束手柄與定位點(diǎn)之間創(chuàng)建約束條件。因此，視圖的垂直平面（左側(cè)和右側(cè)）只能約束在另一個(gè)垂直平面上；而基準(zhǔn)線則只能約束到其他基準(zhǔn)線上。
- 每個(gè)約束句柄只能用于一個(gè)約束條件，但您可以在同一定位點(diǎn)上創(chuàng)建多個(gè)約束條件（從不同的視圖）。
gradle 引入
引入constraintlayout庫(kù)
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中新建一個(gè)樣式，方便后面操作
<!-- 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沒有添加約束，則會(huì)跑到父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>
對(duì)齊，屬性說明
定位時(shí)使用到諸如app:layout_constraintStart_toStartOf或者app:layout_constraintTop_toTopOf屬性。
app:layout_constraintStart_toStartOf，里面有2個(gè)Start字眼。
第一個(gè)Start表示自身的起始位置（默認(rèn)是左邊）。第二個(gè)toStartOf表示對(duì)齊參照物的起始位置。
app:layout_constraintTop_toTopOf也類似。與參照物頂部對(duì)齊。
指定位置的字眼，如Top、Bottom、End、Start，它們組合使用可用來(lái)確定相對(duì)位置：app:layout_constraint{}_to{}Of
相對(duì)父layout的定位
將子view對(duì)齊到父layout的各個(gè)邊緣位置。
約束的參考對(duì)象是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">
<!-- 相對(duì)父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>
手機(jī)截圖
基線對(duì)齊
將一個(gè)視圖的文本基線與另一視圖的文本基線對(duì)齊。
可以使用app:layout_constraintBaseline_toBaselineOf屬性設(shè)置基線對(duì)齊。
示例
<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
引導(dǎo)線約束 Guideline
在ConstraintLayout中添加引導(dǎo)線，可以方便定位。其他View可以引導(dǎo)線作為參考位置。
添加Guideline，需要確定它的方向，分別是垂直和水平。
android:orientation="vertical"android:orientation="horizontal"
比例定位
這里按比例來(lái)定位，使用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">
<!-- 引導(dǎo)線約束: 相對(duì)父layout 按比例定位 -->
<!-- 垂直引導(dǎo)線 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引導(dǎo)線后"
app:layout_constraintStart_toStartOf="@id/g1"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/t2"
style="@style/ConSampleText"
android:text="垂直的1/3引導(dǎo)線前"
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引導(dǎo)線居中"
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引導(dǎo)線居中"
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引導(dǎo)線上面"
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引導(dǎo)線下面"
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>
手機(jī)截圖
as預(yù)覽圖
具體數(shù)值
我們也可以使用app:layout_constraintGuide_end或者app:layout_constraintGuide_begin來(lái)指定具體的數(shù)值。
<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預(yù)覽圖
as預(yù)覽圖
屏障約束
與引導(dǎo)線類似，屏障是一條隱藏的線，您可以用它來(lái)約束視圖。屏障不會(huì)定義自己的位置；相反，屏障的位置會(huì)隨著其中所含視圖的位置而移動(dòng)。
如果您希望將視圖限制到一組視圖而不是某個(gè)特定視圖，這就非常有用。
image
豎直屏障示例
這是一個(gè)豎直屏障的例子。barrier1以tv221和tv222作為參考。
設(shè)置app:barrierDirection="end"，并且設(shè)置tv223在它的右側(cè)。
也就是barrier1會(huì)被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="沒有以此作為參考，不管這個(gè)有多長(zhǎng)"
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>
預(yù)覽圖
調(diào)整約束偏差
對(duì)某個(gè)視圖的兩側(cè)添加約束條件（并且同一維度的視圖尺寸為“fixed”或者“wrap Content”）時(shí)，則該視圖在兩個(gè)約束條件之間居中且默認(rèn)偏差為 50%。
可以通過設(shè)置屬性來(lái)調(diào)整偏差。
app:layout_constraintVertical_biasapp: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預(yù)覽圖
調(diào)整視圖尺寸
這里調(diào)整的是子view的尺寸。
Match Constraints
視圖會(huì)盡可能擴(kuò)展，以滿足每側(cè)的約束條件（在考慮視圖的外邊距之后）。
不過，您可以使用以下屬性和值修改該行為（這些屬性僅在您將視圖寬度設(shè)置為“match constraints”時(shí)才會(huì)生效）：
layout_constraintWidth_default
spread：盡可能擴(kuò)展視圖以滿足每側(cè)的約束條件。這是默認(rèn)行為。
wrap：僅在需要時(shí)擴(kuò)展視圖以適應(yīng)其內(nèi)容，但如有約束條件限制，視圖仍然可以小于其內(nèi)容。因此，它與使用 Wrap Content（上面）之間的區(qū)別在于，將寬度設(shè)為 Wrap Content 會(huì)強(qiáng)行使寬度始終與內(nèi)容寬度完全匹配；而使用 layout_constraintWidth_default 設(shè)置為 wrap 的Match Constraints 時(shí)，視圖可以小于內(nèi)容寬度。
layout_constraintWidth_min該視圖的最小寬度采用 dp 維度。layout_constraintWidth_max該視圖的最大寬度采用 dp 維度。
layout中設(shè)置 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
運(yùn)行截圖
將尺寸設(shè)置為比例
比例為寬比高 width:height。如果寬高其中一個(gè)設(shè)置了大于0的具體值或wrap_content，可以其為標(biāo)準(zhǔn)來(lái)調(diào)整另一個(gè)尺寸參數(shù)。
示例1
設(shè)置layout_width="40dp"，android:layout_height="0dp"，比例為3:2。
以寬40dp為基準(zhǔn)，按比例調(diào)整高度。
<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>
預(yù)覽圖
示例2
高度40dp，比例3:2，自動(dòng)調(diào)整寬度。
<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預(yù)覽圖
寬高都設(shè)為0
寬高都設(shè)置為0dp，比例為3:2。會(huì)嘗試填滿整個(gè)父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>
預(yù)覽圖
寬wrap_content，高度0
layout_width -> wrap_content，高度為0，比例1:2。以寬度為基準(zhǔn)。
<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，會(huì)以高度為基準(zhǔn)。
<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預(yù)覽圖
