Android ConstraintLayout約束布局使用詳解
更新時間：2022年11月01日 08:56:59 作者：幸大叔
ConstraintLayout 即約束布局，也是 Android Studio 的默認布局，它可以減少布局的層級，改善布局性能。不夸張地說，它基本上可以實現(xiàn)任何你想要的布局效果，下面，咱們一起來瞧瞧吧
基本屬性
可以讓本View的一個方向置于目標View的一個方向，比如
layout_constraintBottom_toBottomOf：本View的下面置于目標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>
還有一個屬性就是 layout_constraintBaseline_toBaselineOf，這個可以讓其內(nèi)部文字對齊。
約束強度
利用 layout_constraintHorizontal_bias 和 layout_constraintVertical_bias，可以設置控件在水平和垂直方向上的偏移量，值為0-1
比如，讓一個控件居中顯示，我們會這樣寫
<?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 屬性設置為 gone 的話，可以理解為該View被縮小成一個不可見的小點，而其他對其有約束的View依照該點來進行定位。
比如，現(xiàn)在有兩個TextView
如果這時，將A設置成不可見，那B的位置會有些改變
這時，我們可以通過layout_goneMarginTop，layout_goneMarginBottom，layout_goneMarginStart，layout_goneMarginEnd屬性來設置與之的距離，這類屬性只有在A的visibility屬性為gone時才會生效。
<?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>
控件寬高比
如果想實現(xiàn)固定寬高比的話，可以使用 layout_constraintDimensionRatio 屬性，至少設置 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 可以為子控件設置 layout_weight 屬性，控制子控件之間的寬高占比，ConstraintLayout也可以，對應的屬性是 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>
錨向指示線
當我們需要任意位置的錨點時，可以使用Guideline來幫助定位，它的寬度和高度均為0，可見性也為GONE，它是為了幫助其他View定位而存在的，并不會出現(xiàn)在實際頁面上。
<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 鏈是一種特殊的約束，是用來分發(fā)鏈條剩余空間位置的。幾個View之間通過雙向連接而互相約束對方的位置的，就叫鏈條，像這種
鏈條分為水平鏈條和豎直鏈條，分別用 layout_constraintHorizontal_chainStyle 和 layout_constraintVertical_chainStyle 兩個屬性來設置。 屬性值有三種：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)文章
最近項目經(jīng)理交給我一個任務，要求實現(xiàn)android截屏功能，包括Android截屏獲取圖片、將圖片保存到本地、通知系統(tǒng)相冊更新、通過微信、QQ、微博分享截屏圖片。小編把實現(xiàn)思路分享到腳本之家平臺，需要的朋友參考下2017-12-12
這篇文章主要介紹了Android仿微信右滑返回功能的實例代碼,需要的朋友可以參考下2017-09-09
Android拼圖游戲 玩轉(zhuǎn)從基礎(chǔ)到應用手勢變化
這篇文章主要介紹了Android拼圖游戲的實現(xiàn)方法，教大家玩轉(zhuǎn)從基礎(chǔ)到應用手勢變化，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
OpenHarmony實現(xiàn)屏幕亮度動態(tài)調(diào)節(jié)方法詳解
大家在拿到dayu之后，都吐槽說，會經(jīng)常熄屏，不利于調(diào)試，那么有沒有一種辦法，可以讓app不熄屏呢，答案是有的，今天我們就來揭秘一下，如何控制屏幕亮度2022-11-11
今天小編就為大家分享一篇android 實現(xiàn)在照片上繪制涂鴉的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Android自定義控件實現(xiàn)UC瀏覽器語音搜索效果
這篇文章主要為大家詳細介紹了Android自定義控件實現(xiàn)UC瀏覽器語音搜索效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家詳細介紹了Android自定義View圓形百分比控件的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
Android實現(xiàn)Activities之間進行數(shù)據(jù)傳遞的方法
這篇文章主要介紹了Android實現(xiàn)Activities之間進行數(shù)據(jù)傳遞的方法,涉及Android中Activities的使用技巧,需要的朋友可以參考下2015-04-04
Android?Flutter實現(xiàn)任意拖動的控件
使用flutter開發(fā)是需要控件能拖動，比如畫板中的元素，或者工具條等，所以本文為大家準備了Flutter實現(xiàn)任意拖動控件的示例代碼，希望對大家有所幫助2023-07-07
這篇文章主要為大家詳細介紹了android實現(xiàn)圓環(huán)倒計時控件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01