概述
ConstraintLayout(約束佈局)的出現是爲了在Android應用佈局中保持扁平的層次結構,減少佈局的嵌套,爲應用創建響應快速而靈敏的界面。ConstraintLayout可以替代其他佈局。
導庫
implementation'com.android.support.constraint:constraint-layout:1.1.2'
ConstraintLayout的用法
Relative position
ConstraintLayout具有RelativeLayout的能力,可以將一個控件置於相對於另一個控件的位置。
示例:將B按鈕放在A按鈕的右邊
<Buttonandroid:id="@+id/buttonA".../> <Buttonandroid:id="@+id/buttonB"... app:layout_constraintLeft_toRightOf="@+id/buttonA"/><!--B控件的左邊與A控件右邊對齊-->
控件的邊界名:
其他相關屬性
- 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
- layout_constraintStart_toEndOf
- layout_constraintStart_toStartOf
- layout_constraintEnd_toStartOf
- layout_constraintEnd_toEndOf
這些屬性會引用另一個控件的id
或者parent
(這會引用父容器,即ConstraintLayout)
<Buttonandroid:id="@+id/buttonB"... app:layout_constraintLeft_toLeftOf="parent"/>
Margins
在ConstraintLayout中,layout_margin及其子屬性的作用都被複寫,margin屬性只對其相約束的View起作用。
示例1:有約束屬性
示例2:沒有約束屬性,margin就會失效
GONE Margins
當被約束的目標對象的可見性爲
View.GONE
,可以使用gone margin
來設置,它只會在目標Target爲GONE
的時候生效。
相關屬性:
- layout_goneMarginStart
- layout_goneMarginEnd
- layout_goneMarginLeft
- layout_goneMarginTop
- layout_goneMarginRight
- layout_goneMarginBottom
示例1:
示例2:
Bias
在ConstraintLayout中沒有直接的屬性讓一個控件水平居中,或者豎直居中,可以使用如下方式:
如果想要將控件在水平方向偏向左、或者在豎直方向偏向一個方向,就可以配合使用bias
屬性:
- layout_constraintHorizontal_bias
- layout_constraintVertical_bias
居中情況下,bias的默認值爲0.5,取值範圍是
0~1
,是以left或top爲始起邊界。
示例:
Circular positioning(圓形定位)
可以使用角度和距離來約束一個控件相對於另一個控件的位置。
相關屬性:
- layout_constraintCircle:參照控件的id
- layout_constraintCircleRadius:兩個控件中心連線的距離
- layout_constraintCircleAngle:當前View的中心與目標View的中心的連線與Y軸方向的夾角(取值:0~360)
示例:
Dimensions constraints
ConstraintLayout中有3中方式來設置子View的寬高尺寸:
- Xdp,X爲具體數值
- WARP_CONTENT
- 0dp,0dp代表
MATCH_CONSTRAINT
,ConstraintLayout不推薦使用MATCH_PARENT
MATCH_CONSTRAINT
示例1:0dp的使用,可以看到,View的寬度就是父容器的寬度
示例2:B按鈕被拉伸
當控件的尺寸被設置爲MATCH_CONSTRAINT
時,默認情況下尺寸會被設置成佔用所有可用空間,可用使用下面幾個屬性進行約束:
- layout_constraintWidth_min
- layout_constraintHeight_min
- layout_constraintWidth_max
- layout_constraintHeight_max
- layout_constraintWidth_percent
- layout_constraintHeight_percent
WRAP_CONTENT : enforcing constraints(強制約束)
如果一個View的尺寸被設置爲
wrap_content
,那麼當View的內容太多時,可能會超出約束規定的範圍,約束佈局提供了兩個屬性來限制View的尺寸:
- layout_constrainedWidth="true|false",默認爲false
- layout_constrainedHeight="true|false",默認爲false
示例1:默認情況下,B控件由於內容較多,高度超出了約束規定的範圍。
示例2:限制高度
Percent dimension
使用百分比步驟
- 需要將寬或高設置爲
MATCH_CONSTRAINT
(0dp) - 設置
layout_constraintWidth_percent
或layout_constraintHeight_percent
,值爲0~1
示例:
Ratio
ConstrainLayout提供了
ratio
屬性,用來限制View的寬高比例。 使用Ratio
屬性,寬高兩個尺寸中至少要一個是MATCH_CONSTRAINT
(0dp) 默認情況下,1:2,表示寬:高,寬爲1,高爲2 寬高都爲MATCH_CONSTRAINT
時,可以在比例前加W或者H:W,1:2
:表示寬=2,高=1,即H:W = 1:2H,1:2
:表示高=2,寬=1,即W:H = 1:2
示例1:2:1
示例2:H,16:9(寬度佔滿父控件,約束高度爲寬的9/16)
示例2:W,1:5(高度佔滿父控件,寬度爲高度的1/5)
示例3:指定寬度爲屏幕一半,並保持比例
Chains
鏈使我們能夠對一組在水平或豎直方向互相關聯的控件的屬性進行統一管理。 成爲鏈條的條件: 一組控件它們通過一個雙向的約束關係鏈接起來,並且鏈的屬性由一條鏈的頭結點控制。
示例:
Chain style
設定鏈條樣式的屬性:
- layout_constraintHorizontal_chainStyle:水平鏈條的樣式
- layout_constraintVertical_chainStyle:豎直鏈條的樣式
鏈的樣式:
Weighted chains
權重鏈,寬或高需要設置爲
MATCH_CONSTRAINT
。 使用layout_constraintHorizontal_weight
或layout_constraintVertical_weight
設置對應的權重
示例:
constraint其他組件的用法
Guideline
Guideline,是一個輔助控件,可見性爲
GONE
,主要作用是充當一個錨點。
設置Guidline的方向:
- android:orientation="horizontal":高度0dp,寬度與父容器等寬
- android:orientation="vertical":寬度0dp,高度與父容器等高
設置Guidline的位置:
- layout_constraintGuide_begin:距離父容器左邊或者頂部的距離
- layout_constraintGuide_end:距離父容器右邊或者底部的距離
- layout_constraintGuide_percent:距離父容器左邊或者頂部的距離佔父容器的寬或者高的百分比
示例
Barrier
Barrier,譯爲屏障,是一個虛擬的輔助控件,用來防止它引用的View的位置超過自己。
相關屬性:
- barrierDirection="left | top | right | bottom | start | end":設置屏障的方向
- constraint_referenced_ids="id1,id2,...,idn":設置要限制在屏障內的控件
示例:
Group
Group,用於控制多個控件的可見性。
Placeholder
Placeholder,佔位符,可以用來放置其他View,用這個可以寫一些佈局模板。
示例:
模板文件:
tools:parentTag:設爲ConstraintLayout,使得編輯器將當前merge標籤當做約束佈局來預覽。 content:是要填入這個佔位符的View的id。
引用模板:
參考鏈接
- https://developer.android.com/reference/android/support/constraint/ConstraintLayout
- https://www.jianshu.com/p/a74557359882
- https://blog.csdn.net/lmj623565791/article/details/78011599
- https://blog.csdn.net/guolin_blog/article/details/53122387
- https://mp.weixin.qq.com/s/gGR2itbY7hh9fo61SxaMQQ?token=804846867&lang=zh_CN
- https://www.jianshu.com/p/4290b86289c8