1.1.6_約束布局_ConstraintLayout

1、添加依賴

implementation 'androidx.constraintlayout:constraintlayout:2.0.1'

2、相對(duì)定位

如圖效果:



TextView2在TextView1的右邊,TextView3在TextView1的下面,這個(gè)時(shí)候在布局文件里面應(yīng)該這樣寫:

<TextView
    android:id="@+id/TextView1"
    ...
    android:text="TextView1" />

<TextView
    android:id="@+id/TextView2"
    ...
    app:layout_constraintLeft_toRightOf="@+id/TextView1" />

<TextView
    android:id="@+id/TextView3"
    ...
    app:layout_constraintTop_toBottomOf="@+id/TextView1" />

上面代碼中在TextView2里用到了 app:layout_constraintLeft_toRightOf="@+id/TextView1" 這個(gè)屬性,他的意思是把TextView2的左邊約束到TextView1的右邊。


下面來看看相對(duì)定位的常用屬性:

layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

上面屬性中有一個(gè)比較有趣的 layout_constraintBaseline_toBaselineOf,
Baseline 指的是文本基線,舉個(gè)例子:



如圖所示,兩個(gè)TextView的高度不一致(圖上),但是又希望他們文本對(duì)齊(圖下),這個(gè)時(shí)候就可以使用 layout_constraintBaseline_toBaselineOf,代碼如下:

<TextView
    android:id="@+id/TextView1"
    .../>

<TextView
    android:id="@+id/TextView2"
    ...
    app:layout_constraintLeft_toRightOf="@+id/TextView1" 
    app:layout_constraintBaseline_toBaselineOf="@+id/TextView1"/>

3、角度定位

角度定位指的是可以用一個(gè)角度和一個(gè)距離來約束兩個(gè)空間的中心。舉個(gè)例子:

<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_constraintCircle="@+id/TextView1"
    app:layout_constraintCircleAngle="120"
    app:layout_constraintCircleRadius="150dp" />

上面例子中的TextView2用到了3個(gè)屬性:

app:layout_constraintCircle="@+id/TextView1"
app:layout_constraintCircleAngle="120"(角度)
app:layout_constraintCircleRadius="150dp"(距離)

指的是TextView2的中心在TextView1的中心的120度,距離為150dp,效果如下:

4、邊距

ConstraintLayout 的邊距常用屬性如下:

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

看起來跟別的布局沒有什么差別,但實(shí)際上控件在 ConstraintLayout 里面要實(shí)現(xiàn)margin,必須先約束該控件在 ConstraintLayout 里的位置,舉個(gè)例子:

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp" />

</android.support.constraint.ConstraintLayout>

如果在別的布局里,TextView1的位置應(yīng)該是距離邊框的左邊和上面有一個(gè)10dp的邊距,但是在 ConstraintLayout 里,是不生效的,因?yàn)闆]有約束TextView1在布局里的位置。正確的寫法如下:

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp" 
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

\color{red}{注意:}
在使用margin的時(shí)候要注意兩點(diǎn):
① 控件必須在布局里約束一個(gè)相對(duì)位置
② margin只能大于等于0

goneMargin系列
goneMargin主要用于約束的控件可見性被設(shè)置為gone的時(shí)候,此時(shí)使用的margin值,屬性如下:

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

舉個(gè)例子:
假設(shè)TextView2的左邊約束在TextView1的右邊,并給TextView2設(shè)一個(gè)app:layout_goneMarginLeft="10dp",代碼如下:

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/TextView1"
        .../>

    <TextView
        android:id="@+id/TextView2"
        ...
        app:layout_constraintLeft_toRightOf="@+id/TextView1"
        app:layout_goneMarginLeft="10dp"
        />

</android.support.constraint.ConstraintLayout>

效果如下,TextView2在TextView1的右邊,且沒有邊距。


這個(gè)時(shí)候把TextView1的可見性設(shè)為gone,效果如下:


TextView1消失后,TextView2有一個(gè)距離左邊10dp的邊距。

5、居中和偏移

在RelativeLayout中,把控件放在布局中間的方法是把 layout_centerInParent 設(shè)為true,而在 ConstraintLayout中的寫法是:

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"

意思是把控件的上下左右約束在父布局的上下左右,這樣就能把控件放在布局的中間了。同理 RelativeLayout 中的水平居中 layout_centerHorizontal 相當(dāng)于在 ConstraintLayout 約束控件的左右為parent的左右;RelativeLayout 中的垂直居中 layout_centerVertical 相當(dāng)于在 ConstraintLayout 約束控件的上下為parent的上下。
由于 ConstraintLayout 中的居中已經(jīng)為控件約束了一個(gè)相對(duì)位置,所以可以使用margin,如下所示:

<TextView
    android:id="@+id/TextView1"
    ...
    android:layout_marginLeft="100dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

效果如下:


假如現(xiàn)在要實(shí)現(xiàn)水平偏移,給TextView1的layout_constraintHorizontal_bias賦一個(gè)范圍為 0-1 的值,假如賦值為0,則TextView1在布局的最左側(cè),假如賦值為1,則TextView1在布局的最右側(cè),假如假如賦值為0.5,則水平居中,假如假如賦值為0.3,則更傾向于左側(cè)。
垂直偏移同理。

6、尺寸約束

控件的尺寸可以通過四種不同方式指定:

  • 使用指定的尺寸
  • 使用wrap_content,讓控件自己計(jì)算大小
    當(dāng)控件的高度或?qū)挾葹閣rap_content時(shí),可以使用下列屬性來控制最大、最小的高度或?qū)挾龋?br> android:minWidth 最小的寬度
    android:minHeight 最小的高度
    android:maxWidth 最大的寬度
    android:maxHeight 最大的高度
    注意!當(dāng) ConstraintLayout 為1.1版本以下時(shí),使用這些屬性需要加上強(qiáng)制約束,如下所示:
app:constrainedWidth=”true”
app:constrainedHeight=”true”
  • 使用 0dp (MATCH_CONSTRAINT)
    官方不推薦在 ConstraintLayout 中使用match_parent,可以設(shè)置 0dp (MATCH_CONSTRAINT) 配合約束代替match_parent,舉個(gè)例子:
<TextView
    android:id="@+id/TextView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="50dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:visibility="visible" />

寬度設(shè)為0dp,左右兩邊約束parent的左右兩邊,并設(shè)置左邊邊距為50dp,效果如下:

  • 寬高比
    當(dāng)寬或高至少有一個(gè)尺寸被設(shè)置為0dp時(shí),可以通過屬性 layout_constraintDimensionRatio 設(shè)置寬高比,舉個(gè)例子:
<TextView
    android:id="@+id/TextView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

寬設(shè)置為0dp,寬高比設(shè)置為1:1,這個(gè)時(shí)候TextView1是一個(gè)正方形,效果如下:


除此之外,在設(shè)置寬高比的值的時(shí)候,還可以在前面加W或H,分別指定寬度或高度限制。 例如:

app:layout_constraintDimensionRatio="H,2:3"指的是 高:寬=2:3
app:layout_constraintDimensionRatio="W,2:3"指的是 寬:高=2:3

7、鏈

如果兩個(gè)或以上控件通過下圖的方式約束在一起,就可以認(rè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"
    app:layout_constraintRight_toRightOf="parent" />

3個(gè)TextView相互約束,兩端兩個(gè)TextView分別與parent約束,成為一條鏈,效果如下:


一條鏈的第一個(gè)控件是這條鏈的鏈頭,我們可以在鏈頭中設(shè)置 layout_constraintHorizontal_chainStyle 來改變整條鏈的樣式。chains提供了3種樣式,分別是:

CHAIN_SPREAD —— 展開元素 (默認(rèn));
CHAIN_SPREAD_INSIDE —— 展開元素,但鏈的兩端貼近parent;
CHAIN_PACKED —— 鏈的元素將被打包在一起。

如圖所示:


上面的例子創(chuàng)建了一個(gè)樣式鏈,除了樣式鏈外,還可以創(chuàng)建一個(gè)權(quán)重鏈。
可以留意到上面所用到的3個(gè)TextView寬度都為 wrap_content ,如果我們把寬度都設(shè)為0dp,這個(gè)時(shí)候可以在每個(gè)TextView中設(shè)置橫向權(quán)重 layout_constraintHorizontal_weight (constraintVertical為縱向)來創(chuàng)建一個(gè)權(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" />

效果如下:

8、Barrier


假設(shè)有3個(gè)控件ABC,C在AB的右邊,但是AB的寬是不固定的,這個(gè)時(shí)候C無論約束在A的右邊或者B的右邊都不對(duì)。當(dāng)出現(xiàn)這種情況可以用Barrier來解決。Barrier可以在多個(gè)控件的一側(cè)建立一個(gè)屏障,如下所示:



這個(gè)時(shí)候只要約束在Barrier的右邊就可以了,代碼如下:

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

app:barrierDirection 為屏障所在的位置,可設(shè)置的值有:bottom、end、left、right、start、top
app:constraint_referenced_ids 為屏障引用的控件,可設(shè)置多個(gè)(用“,”隔開)

9、Group

Group可以把多個(gè)控件歸為一組,方便隱藏或顯示一組控件,舉個(gè)例子:

<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_constraintLeft_toRightOf="@+id/TextView1" />

<TextView
    android:id="@+id/TextView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@id/TextView2" />

現(xiàn)在有3個(gè)并排的TextView,用Group把TextView1和TextView3歸為一組,再設(shè)置這組控件的可見性,如下所示:

<android.support.constraint.Group
    android:id="@+id/group"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="invisible"
    app:constraint_referenced_ids="TextView1,TextView3" />

效果如下:

10、Placeholder

Placeholder 指的是占位符。在 Placeholder 中可使用 setContent() 設(shè)置另一個(gè)控件的id,使這個(gè)控件移動(dòng)到占位符的位置。舉個(gè)例子:

<android.support.constraint.Placeholder
    android:id="@+id/placeholder"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:content="@+id/textview"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#cccccc"
    android:padding="16dp"
    android:text="TextView"
    android:textColor="#000000"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

新建一個(gè) Placeholder 約束在屏幕的左上角,新建一個(gè) TextView 約束在屏幕的右上角,在 Placeholder 中設(shè)置 app:content="@+id/textview",這時(shí)TextView會(huì)跑到屏幕的左上角。效果如下:

11、Guideline

Guildline 像輔助線一樣,在預(yù)覽的時(shí)候幫助你完成布局(不會(huì)顯示在界面上)。

Guildline的主要屬性:

android:orientation: 垂直vertical,水平horizontal
layout_constraintGuide_begin: 開始位置
layout_constraintGuide_end: 結(jié)束位置
layout_constraintGuide_percent: 距離頂部的百分比(orientation = horizontal時(shí)則為距離左邊)

舉個(gè)例子:

<android.support.constraint.Guideline
    android:id="@+id/guideline1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="50dp" />

<android.support.constraint.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

guideline1 為水平輔助線,開始位置是距離頂部50dp,guideline2 為垂直輔助線,開始位置為屏幕寬的0.5(中點(diǎn)位置),效果如下:

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容