快捷導(dǎo)航

Android中ConstraintLayout約束布局的最全詳細(xì)解析

更新時間：2022年08月21日 07:51:28 作者：Teacher.Hu

ConstraintLayout是Google在Google?I/O?2016大會上發(fā)布的一種新的布局容器(ViewGroup),它支持以靈活的方式來放置子控件和調(diào)整子控件的大小,下面這篇文章主要給大家介紹了關(guān)于Android中ConstraintLayout約束布局詳細(xì)解析的相關(guān)資料,需要的朋友可以參考下

一、ConstraintLayout概述

ConstraintLayout是Android官方在2016年Google的I/O大會推出的一種可以靈活控制子控件的位置和大小的新布局方式，也是目前Android的幾大布局中功能最強(qiáng)大的布局。在最新版的Android Studio中，創(chuàng)建布局文件的默認(rèn)根元素都是ConstraintLayout了。

ConstraintLayout優(yōu)點(diǎn)

ConstraintLayout之所以成為目前Android開發(fā)中主流的布局，除了官方建議使用ConstraintLayout外還有以下幾個方面的優(yōu)勢

功能強(qiáng)大，ConstraintLayout幾乎能實(shí)現(xiàn)其他布局所有的功能
能減少布局層次的嵌套，有性能的優(yōu)勢
可視化操作的增強(qiáng)，大部分界面用ConstraintLayout都能通過可視化編輯區(qū)域完成

二、ConstraintLayout基礎(chǔ)篇

2.1 基礎(chǔ)操作

在Android Studio中默認(rèn)的布局方式是約束布局，在約束布局中添加控件非常簡單，只需要從左側(cè)的Palette區(qū)域拖動控件到中間的界面編輯區(qū)域即可。

在約束布局中，點(diǎn)中任意一個控件，該控件的上下左右四個方向各會出現(xiàn)一個圓圈，該圓圈代表可以添加的約束。

當(dāng)把鼠標(biāo)移動到圓圈上，按住鼠標(biāo)左鍵，然后移動鼠標(biāo)到父布局的上下左右任意邊緣再松開鼠標(biāo)即可給該方向添加約束，添加完約束后該圓圈會由空心圓變成實(shí)心圓，同時控件也會移動到該父布局添加約束的方向的邊緣。

當(dāng)給一個控件上下方向都添加約束后該控件會在垂直方向居中，同樣的給一個控件左右方向都添加約束該控件會在水平方向居中。

如果想給一個控件去掉約束，選中該控件后，在右上角Layout區(qū)域，點(diǎn)擊該方向上的×符號即可去掉該方向上的約束

也可以拖動Layout區(qū)域的水平條和垂直條來控制左右方向和上下方向兩邊約束的比例，該值越小，控件會越靠左和上。

給控件某個方向添加約束后該控件默認(rèn)會緊靠該方向約束的父布局邊緣，可以設(shè)置控件在Layout區(qū)域設(shè)置該方向與父布局的邊緣間距。

2.2 控件間添加約束

在約束布局中，除了可以給一個控件將約束添加到父布局邊緣，也可以將一個控件的約束添加到另外一個控件上，添加約束的方法跟添加都父布局一樣。當(dāng)給一個控件左邊添加約束到另外一個控件左邊，該控件左邊緣會平齊另外一個控件的左邊緣。給一個控件的下邊緣添加約束到另外一個控件的上邊緣，該控件會緊貼另外一個控件的上邊緣

如果給一個控件左右兩邊都添加約束到另外一個控件的兩邊，這兩個控件的大小又不一樣，那么該兩個控件的中軸線會平齊。

2.3 約束布局xml代碼實(shí)現(xiàn)

用可視化區(qū)域來編寫布局雖然比較簡單，但是對于一些布局的微調(diào)用xml代碼會更快，要熟練掌握約束布局，學(xué)會用xml代碼來編寫約束布局也是必備的技能。

給父布局添加約束

app:layout_constraintBottom_toBottomOf="parent" 底部約束
app:layout_constraintEnd_toEndOf="parent" 右邊約束
app:layout_constraintStart_toStartOf="parent" 左邊約束
app:layout_constraintTop_toTopOf="parent" 頂部約束

這里的Strart和End 換成Left和Right也可以。

將約束添加到其他

app:layout_constraintBottom_toTopOf="@+id/button3" 底部添加約束到其他控件頂部
app:layout_constraintEnd_toEndOf="@+id/button3" 右邊添加約束到其他控件右邊
app:layout_constraintStart_toStartOf="@+id/button3" 左邊添加約束到其他控件左邊

三、ConstraintLayout 進(jìn)階篇

3.1 Chains鏈

在LinearLayout布局中weight屬性能夠?qū)崿F(xiàn)子控件講父布局的控件按比例分配，在ConstraintLayout 中通過Chains鏈也能夠?qū)崿F(xiàn)相同的功能，而且Chains鏈的功能比LinearLayout布局中weight屬性功能更加強(qiáng)大。

Chains鏈的基本用法如下：選中多個控件，右鍵Chains->Create Horizontal Chains 即可將父布局的剩余空間進(jìn)行均勻分布。

Chains鏈對父控件的剩余空間有三種分配方式，即Spread、spread inside、packed，默認(rèn)值是Spread即將控件包括第一個控件和最后一個兩邊均勻分配

請?zhí)砑訄D片描述

spread inside值表示第一個控件和最后一個控件兩邊不分配空間

spread inside值表示所有控件挨在一起，第一個控件和最后一個控件兩邊均勻分配父控件的剩余空間

3.2 尺寸約束

在其他布局中，控件的尺寸單位有wrap_content、dp固定值、match_parent三種值，在約束布局中的控件還可以給其設(shè)置MATCH_CONSTRAINT(0dp)，該值的含義代表約束尺寸，即控件的尺寸由其左右兩邊的約束來控制。

舉個栗子

比如很多app的首頁都是由底部banner和頂部fragment組成，而fragment的高度通常不是固定的，如果用其他的布局fragment的高度就很難調(diào)節(jié)，這時候可以用MATCH_CONSTRAINT(0dp)動態(tài)調(diào)節(jié)fragment的尺寸高度，給頂部的fragment設(shè)置其高度為0dp，給其上下各添加一個約束，這時候其高度為父布局的頂部到底部控件的頂部。

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView4"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@color/purple_200"
        android:text="底部banner"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/teal_200"
        android:gravity="center"
        android:text="頂部fragment"
        app:layout_constraintBottom_toTopOf="@+id/textView4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

3.3 百分比布局

ConstraintLayout 還支持控件的尺寸按照父布局尺寸的百分比來設(shè)置

app:layout_constraintWidth_percent 寬度占父布局百分比比例
app:layout_constraintHeight_percent 高度占父布局百分比比例

tips:只有寬度和高度尺寸為0dp百分比屬性才會生效

3.4 radio屬性

有些app的banner圖通常是按照一定比例來設(shè)置的，如16:9，1:1等，用其他布局圖片的寬度如果設(shè)置成match_parent，圖片的高度就需要根據(jù)比例動態(tài)去計(jì)算，非常的麻煩。在約束布局中通過radio屬性很容易實(shí)現(xiàn)這樣的需求。

給圖片寬度設(shè)置match_parent,高度設(shè)置成約束尺寸0dp，然后再添加一個layout_constraintDimensionRatio屬性，屬性的值可以設(shè)置h,16:9 其中h表示高寬比的比值，也可以設(shè)置成將值設(shè)置w,9:16，w表示寬高比的比值。