Android ConstraintLayout約束布局使用詳解
基本屬性
可以讓本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)部文字對(duì)齊。
約束強(qiáng)度
利用 layout_constraintHorizontal_bias 和 layout_constraintVertical_bias,可以設(shè)置控件在水平和垂直方向上的偏移量,值為0-1
比如,讓一個(gè)控件居中顯示,我們會(huì)這樣寫
<?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è)不可見(jiàn)的小點(diǎn),而其他對(duì)其有約束的View依照該點(diǎn)來(lái)進(jìn)行定位。
比如,現(xiàn)在有兩個(gè)TextView
如果這時(shí),將A設(shè)置成不可見(jiàn),那B的位置會(huì)有些改變
這時(shí),我們可以通過(guò)layout_goneMarginTop,layout_goneMarginBottom,layout_goneMarginStart,layout_goneMarginEnd屬性來(lái)設(shè)置與之的距離,這類屬性只有在A的visibility屬性為gone時(shí)才會(huì)生效。
<?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也可以,對(duì)應(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來(lái)幫助定位,它的寬度和高度均為0,可見(jiàn)性也為GONE,它是為了幫助其他View定位而存在的,并不會(huì)出現(xiàn)在實(shí)際頁(yè)面上。
<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特殊的約束,是用來(lái)分發(fā)鏈條剩余空間位置的。幾個(gè)View之間通過(guò)雙向連接而互相約束對(duì)方的位置的,就叫鏈條,像這種
鏈條分為水平鏈條和豎直鏈條,分別用 layout_constraintHorizontal_chainStyle 和 layout_constraintVertical_chainStyle 兩個(gè)屬性來(lái)設(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android拼圖游戲 玩轉(zhuǎn)從基礎(chǔ)到應(yīng)用手勢(shì)變化
這篇文章主要介紹了Android拼圖游戲的實(shí)現(xiàn)方法,教大家玩轉(zhuǎn)從基礎(chǔ)到應(yīng)用手勢(shì)變化,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10OpenHarmony實(shí)現(xiàn)屏幕亮度動(dòng)態(tài)調(diào)節(jié)方法詳解
大家在拿到dayu之后,都吐槽說(shuō),會(huì)經(jīng)常熄屏,不利于調(diào)試,那么有沒(méi)有一種辦法,可以讓app不熄屏呢,答案是有的,今天我們就來(lái)揭秘一下,如何控制屏幕亮度2022-11-11android 實(shí)現(xiàn)在照片上繪制涂鴉的方法
今天小編就為大家分享一篇android 實(shí)現(xiàn)在照片上繪制涂鴉的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10Android自定義控件實(shí)現(xiàn)UC瀏覽器語(yǔ)音搜索效果
這篇文章主要為大家詳細(xì)介紹了Android自定義控件實(shí)現(xiàn)UC瀏覽器語(yǔ)音搜索效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04Android實(shí)現(xiàn)Activities之間進(jìn)行數(shù)據(jù)傳遞的方法
這篇文章主要介紹了Android實(shí)現(xiàn)Activities之間進(jìn)行數(shù)據(jù)傳遞的方法,涉及Android中Activities的使用技巧,需要的朋友可以參考下2015-04-04Android?Flutter實(shí)現(xiàn)任意拖動(dòng)的控件
使用flutter開(kāi)發(fā)是需要控件能拖動(dòng),比如畫板中的元素,或者工具條等,所以本文為大家準(zhǔn)備了Flutter實(shí)現(xiàn)任意拖動(dòng)控件的示例代碼,希望對(duì)大家有所幫助2023-07-07android實(shí)現(xiàn)圓環(huán)倒計(jì)時(shí)控件
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)圓環(huán)倒計(jì)時(shí)控件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01