Android -- 約束布局ConstraintLayout使用總結(jié)

優(yōu)點(diǎn)
  • 極大程度減少布局層級(jí)
  • 可以實(shí)現(xiàn)一些其他布局管理器不能實(shí)現(xiàn)的樣式
缺點(diǎn)
  • 每個(gè)被參考的控件都需要設(shè)置id

基本用法

1.相對(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：文字Baseline對(duì)齊
  • layout_constraintStart_toEndOf
  • layout_constraintStart_toStartOf
  • layout_constraintEnd_toStartOf
  • layout_constraintEnd_toEndOf

2. 圓形定位

  • layout_constraintCircle : 參考控件的id
  • layout_constraintCircleRadius : 本控件與參考控件中心點(diǎn)間距
  • layout_constraintCircleAngle : 角度0～360

3. 百分比定位（bias）

  • layout_constraintHorizontal_bias
  • layout_constraintVertical_bias

取值范圍0～1，默認(rèn)值0.5

4. 居中對(duì)齊

所有居中對(duì)其需要設(shè)置對(duì)應(yīng)方向尺寸大小為wrap_content或固定值

  • 水平居中
<androidx.constraintlayout.widget.ConstraintLayout
    ...
    >
    <TextView
        ...
        android:layout_width="60dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
  • 垂直居中
<androidx.constraintlayout.widget.ConstraintLayout
    ...
    >
    <TextView
        ...
        android:layout_height="60dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

5.間距設(shè)置

表示當(dāng)前控件與參考的控件之間的間距

layout_marginStart  左間距
layout_marginEnd    右間距
layout_marginLeft   左間距
layout_marginTop    上間距
layout_marginRight  右間距
layout_marginBottom 下間距

6.權(quán)重比

主要依賴于以下兩個(gè)屬性：

app:layout_constraintHorizontal_weight  橫向權(quán)重比
app:layout_constraintVertical_weight    豎向權(quán)重比

7.百分比

百分比需要滿足下面三個(gè)條件：

  • 寬或高設(shè)置成0dp

  • 寬或高默認(rèn)值設(shè)置成百分比

    • app:layout_constraintWidth_default="percent"
    • app:layout_constraintHeight_default="percent"

  • 寬或高百分比的值（取值范圍0～1）

    • app:layout_constraintWidth_percent
    • app:layout_constraintHeight_percent

以下代碼表示Textview寬度為ConstraintLayout寬度的50%

<androidx.constraintlayout.widget.ConstraintLayout
    ...
    >
    <TextView
        ...
        android:layout_width="0dp"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintWidth_percent="0.5"/>
</androidx.constraintlayout.widget.ConstraintLayout>

8.寬高比

百分比需要滿足下面兩個(gè)條件：
a. 寬或高至少有一個(gè)設(shè)置成0dp
b. 通過(guò)app:layout_constraintDimensionRatio設(shè)置寬高比

這里layout_constraintDimensionRatio寬高的取值有以下4種形式：

  • 16:9 表示寬高比為16:9
  • 0.2 表示寬高比為1:5
  • H,16:9 表示寬高比為9:16
  • W,16:9 表示寬高比為16:9

以下代碼表示Textview的寬高比為2:1

<androidx.constraintlayout.widget.ConstraintLayout
    ...
    >
    <TextView
        ...
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="2:1"/>
</androidx.constraintlayout.widget.ConstraintLayout>

9.強(qiáng)制約束

  • 應(yīng)用場(chǎng)景

    ? 使用wrap_content，但仍要強(qiáng)制執(zhí)行約束以限制結(jié)果尺寸，比如一個(gè)Textview的寬度是根據(jù)文字內(nèi)容自適應(yīng)的，文字內(nèi)容可能很短也可能很長(zhǎng)，當(dāng)文字內(nèi)容很長(zhǎng)的時(shí)候可能會(huì)打破原先的約束，比如本來(lái)在在某個(gè)控件的左邊，但是隨著文字內(nèi)容的增長(zhǎng)會(huì)越界！

  • 使用方式

    layout_constrainedWidth="true|false"  
layout_constrainedHeight="true|false"

使用以上兩個(gè)屬性來(lái)強(qiáng)制控件的寬或高嚴(yán)格執(zhí)行相應(yīng)的約束條件

10.Barrier

  • 應(yīng)用場(chǎng)景

    ? 當(dāng)某個(gè)控件的約束想以一組控件為參考點(diǎn)，并且始終不越界

  • 使用方式

app:barrierDirection="start|left|top|right|end|bottom"
app:constraint_referenced_ids="tv1,tv2"
  • 示例

以下代碼表示以tv1和tv2的底部為一個(gè)屏障，tv3始終在tv1和tv2下面，即使tv1和tv2全部都消失

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierAllowsGoneWidgets="true"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="bt1,bt2" />
    <Button
        android:id="@+id/bt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/bt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/bt1" />
    <Button
        android:id="@+id/bt3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/barrier" />
</androidx.constraintlayout.widget.ConstraintLayout>

11.Guideline

  • 應(yīng)用場(chǎng)景

    布局參考線可以作為其他控件布局約束的參考，但不會(huì)顯示出來(lái)

  • 使用方式

    參考線的方向，可分為水平和豎直兩個(gè)方向：
android:orientation="vertical|horizontal"
參考線的位置：
app:layout_constraintGuide_begin="100dp"
app:layout_constraintGuide_end="100dp"
app:layout_constraintGuide_percent="0.5"

12.Group

  • 應(yīng)用場(chǎng)景

    將某幾個(gè)控件歸為一組動(dòng)態(tài)進(jìn)行顯示或隱藏控制

  • 使用方式

    需要?dú)w為一組控件的ID
app:constraint_referenced_ids="tv1,tv2"

13.Chain

Chain可以很容易達(dá)到其他布局管理器不容易實(shí)現(xiàn)，甚至無(wú)法實(shí)現(xiàn)的樣式

  • 應(yīng)用場(chǎng)景

    某幾個(gè)控件之間首位相接，排列方式有特殊要求

  • 使用方式

    layout_constraintHorizontal_chainStyle="spread|spread_inside|packed"
layout_constraintVertical_chainStyle="spread|spread_inside|packed"

chainStyle取值：

  • spread: 控件均勻分布，即控件之間（包括邊框）間距相同
  • spread_inside: 第一個(gè)和最后一個(gè)控件固定在鏈兩端的約束邊界上，其余控件均勻分布，即控件內(nèi)部之間間距相同
  • packed: 控件打包在一起（在考慮外邊距之后）。 然后，您可以通過(guò)更改鏈的頭視圖偏差調(diào)整整條鏈的偏差（左/右或上/下）。
image.png
<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">
    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/tv2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBaseline_toBaselineOf="@id/tv1"
        app:layout_constraintEnd_toStartOf="@id/tv3"
        app:layout_constraintStart_toEndOf="@id/tv1" />
    <TextView
        android:id="@+id/tv3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBaseline_toBaselineOf="@id/tv1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/tv2" />
</androidx.constraintlayout.widget.ConstraintLayout>
最后編輯于 ：
?著作權(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ù)。

相關(guān)閱讀更多精彩內(nèi)容

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