- 寬高比
當(dāng)ConstraintLayout布局中某個(gè)控件的寬或高中的一個(gè)被嚴(yán)格約束(所謂嚴(yán)格約束即指大小可被推斷)則另一個(gè)可通過layout_constraintDimensionRatio屬性來設(shè)置大小為與另一邊有指定的比率臭胜。屬性的值即為寬與高的比例值勾扭,可以是一個(gè)浮點(diǎn)數(shù)序仙,也可以是x:y的形式〉暾梗可以通過在比例值前面添加'w'或者‘h’并用逗號(hào)隔開,來分別指定是寬還是高是按照另一邊的比例求出的。代碼如下:
<Button android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
以上代碼實(shí)現(xiàn)了按鈕的高度與寬度的比為16:9,寬度與父控件同寬
- 按百分比定義控件的寬或高
按照百分比定義控件的寬高步驟如下:- 將布局中某個(gè)控件的寬或者高設(shè)置為0或者M(jìn)ATCH_CONSTRAINT (0dp)
- 設(shè)置app:layout_constraintWidth_default="percent"
- 設(shè)置layout_constraintWidth_percent 或layout_constraintHeight_percent屬性的值為(0医吊,1]之間的某個(gè)小數(shù)
-
鏈
ConstraintLayout本身就是基于依賴的布局,當(dāng)幾個(gè)控件之間在水平方向或垂直方向相互依賴時(shí)逮京,就形成了鏈卿堂。如下圖所示:
實(shí)現(xiàn)上圖所示布局的代碼如下:
<TextView
android:id="@+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/TextView2" />
<TextView
android:id="@+id/TextView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/TextView1"
app:layout_constraintRight_toLeftOf="@+id/TextView3"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="@+id/TextView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/TextView2"
鏈頭及樣式
鏈有鏈頭,水平鏈的最左端元素或者垂直鏈的最上端元素成為鏈頭懒棉。在鏈頭中可以通過layout_constraintHorizontal_chainStyle屬性定義鏈的樣式(Style)草描。chains提供了3種樣式,分別是:
- CHAIN_SPREAD —— 展開元素 (默認(rèn))策严;
- CHAIN_SPREAD_INSIDE —— 展開元素穗慕,但鏈的兩端貼近parent;
- CHAIN_PACKED —— 鏈的元素將被打包在一起妻导。
權(quán)重鏈
可以通過將鏈中某個(gè)元素的寬(水平鏈)或高(垂直鏈)設(shè)置為0或者M(jìn)ATCH_CONSTRAINT逛绵,然后通過layout_constraintHorizontal_weight屬性給控件設(shè)置權(quán)重,權(quán)重越大所占的空間越大倔韭。代碼如下:
<TextView
android:id="@+id/TextView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/TextView2"
app:layout_constraintHorizontal_weight="2" />
<TextView
android:id="@+id/TextView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/TextView1"
app:layout_constraintRight_toLeftOf="@+id/TextView3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_weight="3" />
<TextView
android:id="@+id/TextView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/TextView2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_weight="4" />
不同樣式的鏈及權(quán)重鏈的示意圖如下:
- 屏障(Barrier)
假如有這樣一個(gè)需求术浪,有A,B狐肢,C 3個(gè)控件添吗,A,B的寬度不固定,現(xiàn)在要求無論A,B的寬度如何變化控件C始終在A和B的右側(cè)份名。那么就可以通過Barrier輕松實(shí)現(xiàn)碟联。只要通過Barrier將A,B與C控件分割開妓美,讓A,B在Barrier的左側(cè)鲤孵,C在Barrier的右側(cè)即可壶栋,代碼如下:
<TextView
android:id="@+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/TextView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@+id/TextView1" />
<android.support.constraint.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="right"
app:constraint_referenced_ids="TextView1,TextView2" />
<TextView
android:id="@+id/TextView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/barrier" />
實(shí)現(xiàn)的 效果如下圖所示
- 分組(Group)
可以將幾個(gè)控件歸為一組,這樣做的一個(gè)好處是可以很方便的控制這些控件的可見性普监。同一控件可以屬于多個(gè)分組贵试,它的可見性由最后一個(gè)分組決定。代碼如下:
<androidx.constraintlayout.widget.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="button4,button9" />
- 輔助線(Guideline)
Guileline在布局中并不可見凯正,但是它可以為布置其他控件提供約束毙玻,作為其他控件的位置參考。Guideline有水平和垂直之分廊散,通過android:orientation屬性設(shè)置桑滩。水平Guideline高度為0,寬度為它的父控件寬度允睹,垂直Guideline寬度為0畔师,高度為它的父控件高度实苞」世可以通過3個(gè)屬性來確定Guideline在布局中的位置- layout_constraintGuide_begin 指定Guideline距父控件左或上的距離
- layout_constraintGuide_end 指定Guideline距父控件右或下的距離
- layout_constraintGuide_percent 指定Guideline距父控件左或上的百分比
以下代碼將一個(gè)Button控件約束到一個(gè)垂直Guideline
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline"
app:layout_constraintGuide_begin="100dp"
android:orientation="vertical"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button"
app:layout_constraintLeft_toLeftOf="@+id/guideline"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
以上便是ConstraintLayout比較常見且較為有用的特性鹿驼。合理使用這些特性將會(huì)起到事半功倍的效果。