Android ConstraintLayout約束布局使用詳解
更新時(shí)間：2022年11月01日 08:56:59 作者：幸大叔
ConstraintLayout 即約束布局，也是 Android Studio 的默認(rèn)布局，它可以減少布局的層級，改善布局性能。不夸張地說，它基本上可以實(shí)現(xiàn)任何你想要的布局效果，下面，咱們一起來瞧瞧吧
基本屬性
可以讓本View的一個(gè)方向置于目標(biāo)View的一個(gè)方向，比如
layout_constraintBottom_toBottomOf：本View的下面置于目標(biāo)View的下面，與此類似的還有 layout_constraintEnd_toEndOf，
layout_constraintStart_toStartOf，layout_constraintTop_toTopOf，layout_constraintBottom_toTopOf 等等。
例如，B放在A的上面，就可以讓B的下面置于A的上面
<?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/a"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/purple_200"
android:gravity="center"
android:text="@string/a"
android:textColor="@color/white"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/b"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/purple_200"
android:gravity="center"
android:text="@string/b"
android:textColor="@color/white"
android:textSize="30sp"
app:layout_constraintBottom_toTopOf="@id/a"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
還有一個(gè)屬性就是 layout_constraintBaseline_toBaselineOf，這個(gè)可以讓其內(nèi)部文字對齊。
約束強(qiáng)度
利用 layout_constraintHorizontal_bias 和 layout_constraintVertical_bias，可以設(shè)置控件在水平和垂直方向上的偏移量，值為0-1
比如，讓一個(gè)控件居中顯示，我們會這樣寫
<?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/a"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/purple_200"
android:gravity="center"
android:text="@string/a"
android:textColor="@color/white"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
現(xiàn)在，它的上下左右的剩余空間都占50%，現(xiàn)在我想讓它的左側(cè)剩余空間從50%變成10%，上面的剩余空間從50%變成100%，可以這么干
<?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/a"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/purple_200"
android:gravity="center"
android:text="@string/a"
android:textColor="@color/white"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1" />
</androidx.constraintlayout.widget.ConstraintLayout>
Visibility屬性
在 ConstraintLayout 布局，visibility 屬性設(shè)置為 gone 的話，可以理解為該View被縮小成一個(gè)不可見的小點(diǎn)，而其他對其有約束的View依照該點(diǎn)來進(jìn)行定位。
比如，現(xiàn)在有兩個(gè)TextView
如果這時(shí)，將A設(shè)置成不可見，那B的位置會有些改變
這時(shí)，我們可以通過layout_goneMarginTop，layout_goneMarginBottom，layout_goneMarginStart，layout_goneMarginEnd屬性來設(shè)置與之的距離，這類屬性只有在A的visibility屬性為gone時(shí)才會生效。
<?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/a"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/purple_200"
android:gravity="center"
android:text="@string/a"
android:textColor="@color/white"
android:textSize="30sp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/b"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="20dp"
android:background="@color/purple_200"
android:gravity="center"
android:text="@string/b"
android:textColor="@color/white"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/a"
app:layout_goneMarginTop="70dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
控件寬高比
如果想實(shí)現(xiàn)固定寬高比的話，可以使用 layout_constraintDimensionRatio 屬性，至少設(shè)置 layout_width 或 layout_height 為0
<?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/a"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/purple_200"
android:gravity="center"
android:text="@string/a"
android:textColor="@color/white"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="4:2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
子控件之間的寬高占比
我們知道，LinearLayout 可以為子控件設(shè)置 layout_weight 屬性，控制子控件之間的寬高占比，ConstraintLayout也可以，對應(yīng)的屬性是 layout_constraintHorizontal_weight，layout_constraintVertical_weight
<?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/a"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_marginStart="10dp"
android:background="@color/purple_200"
android:gravity="center"
android:text="@string/a"
android:textColor="@color/white"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/b"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/b"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_marginStart="10dp"
android:background="@color/purple_200"
android:gravity="center"
android:text="@string/b"
android:textColor="@color/white"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/c"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="@+id/a"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/c"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:background="@color/purple_200"
android:gravity="center"
android:text="@string/c"
android:textColor="@color/white"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="@+id/b"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
錨向指示線
當(dāng)我們需要任意位置的錨點(diǎn)時(shí)，可以使用Guideline來幫助定位，它的寬度和高度均為0，可見性也為GONE，它是為了幫助其他View定位而存在的，并不會出現(xiàn)在實(shí)際頁面上。
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="100dp" />
Chains鏈
Chain 鏈?zhǔn)且环N特殊的約束，是用來分發(fā)鏈條剩余空間位置的。幾個(gè)View之間通過雙向連接而互相約束對方的位置的，就叫鏈條，像這種
鏈條分為水平鏈條和豎直鏈條，分別用 layout_constraintHorizontal_chainStyle 和 layout_constraintVertical_chainStyle 兩個(gè)屬性來設(shè)置。 屬性值有三種：spread，spread_inside，packed
layout_constraintHorizontal_chainStyle=“spread”
layout_constraintHorizontal_chainStyle=“spread_inside”
layout_constraintHorizontal_chainStyle=“packed”
<?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/a"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/purple_200"
android:gravity="center"
android:text="@string/a"
android:textColor="@color/white"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/b"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/b"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/purple_200"
android:gravity="center"
android:text="@string/b"
android:textColor="@color/white"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/c"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="@+id/a"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/c"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/purple_200"
android:gravity="center"
android:text="@string/c"
android:textColor="@color/white"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="@+id/b"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>到此這篇關(guān)于Android ConstraintLayout約束布局使用詳解的文章就介紹到這了,更多相關(guān)Android ConstraintLayout內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Android開發(fā)中Button組件的使用,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了Android TabWidget底部顯示效果的三種方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了Android編程之Button控件用法,較為詳細(xì)的分析了Button控件的功能、定義及相關(guān)使用注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
Android查看電池電量的方法(基于BroadcastReceiver)
這篇文章主要介紹了Android查看電池電量的方法,結(jié)合實(shí)例分析了Android使用BroadcastReceiver實(shí)現(xiàn)針對電池電量的查詢技巧,需要的朋友可以參考下2016-01-01
Android自定義控件實(shí)現(xiàn)下拉刷新效果
這篇文章主要為大家詳細(xì)介紹了Android自定義控件實(shí)現(xiàn)下拉刷新效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Android?imageVIew實(shí)現(xiàn)鏡像旋轉(zhuǎn)的方法
在Android應(yīng)用開發(fā)中,有時(shí)候我們需要對ImageView中的圖片進(jìn)行鏡像旋轉(zhuǎn),以展示不同的效果,本文將介紹如何使用代碼實(shí)現(xiàn)ImageView的鏡像旋轉(zhuǎn)效果,這篇文章主要介紹了Android?imageVIew如何做鏡像旋轉(zhuǎn),需要的朋友可以參考下2024-06-06
Android實(shí)現(xiàn)倒計(jì)時(shí)CountDownTimer使用詳解
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)倒計(jì)時(shí)CountDownTimer的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
Android自定義SeekBar實(shí)現(xiàn)視頻播放進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Android自定義SeekBar實(shí)現(xiàn)視頻播放進(jìn)度條的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Android 程序的生命周期是由系統(tǒng)控制而非程序自身直接控制。這和我們編寫桌面應(yīng)用程序時(shí)的思維有一些不同,本文將詳細(xì)介紹，需要了解的朋友可以參考下2012-12-12
Android使用自定義alertdialog實(shí)現(xiàn)確認(rèn)退出按鈕
本文通過實(shí)例代碼給大家詳解Android使用自定義alertdialog實(shí)現(xiàn)確認(rèn)退出按鈕，對alertdialog退出按鈕相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01