AndroidConstraintLayout約束布局使用實例介紹

第AndroidConstraintLayout約束布局使用實例介紹目錄基本結(jié)構(gòu)導入compose約束布局包約束布局使用步驟繼續(xù)約束參考線約束解耦約束集合解耦調(diào)用

基本結(jié)構(gòu)

約束結(jié)構(gòu)原理：將一個組件與約束布局關聯(lián)后，通過modifier來指定組件位置

導入compose約束布局包

打開build.gradle(:app)文件

在依賴中添加以下這一行，之后點擊頂部的syncnow進行gradle配置

androidx.constraintlayout:constraintlayout-compose:1.0.1

約束布局使用步驟

ConstraintLayout定義一個約束布局val(button,text)=createRefs()所有需要和約束布局相關聯(lián)的組件都必須要在這里進行注冊！如果僅注冊一個組件，那就用createRef，多個組件就用上面那樣子（這一段代碼使用了kotlin的解構(gòu)賦值）Modifier.constrainAs(button)在組件的modifier中將自身與約束布局相關聯(lián)！top.linkTo最后用這辦法在約束布局里面定位組件

@Composable

funConstraintLayoutContent(){

ConstraintLayout(){

val(button,text)=createRefs()

Button(

onClick={/*TODO*/},

modifier=Modifier.constrainAs(button){

top.linkTo(parent.top,margin=16.dp)

Text(text="btn")

繼續(xù)約束

緊接著上面的代碼，我們指定一個text跟在button的下面

@Composable

funConstraintLayoutContent(){

ConstraintLayout(){

Text(text="nullclear",modifier=Modifier.constrainAs(text){

//直接拿button作為參照點進行布局

top.linkTo(button.bottom,margin=16.dp)

//水平約束對齊父類

centerHorizontallyTo(parent)

}

參考線

渲染結(jié)果

createGuidelineFromStart從最左側(cè)開始一定距離后構(gòu)造一個垂直參考線

fraction=0.5f距離（左側(cè)的）長度，0.5f恰好是屏幕的一半長

linkTo在這里面設置約束的左側(cè)（start）和右側(cè)（end）

Dimension.preferredWrapContent讓文本自動換行，不破壞結(jié)構(gòu)

如果我們不加上width這一行的話，文本會沖破guideline的左側(cè)限制而超出！

@Composable

funConstraintLayoutContent2(){

ConstraintLayout{

valtext=createRef()

valguideline=createGuidelineFromStart(fraction=0.5f)

Text(text="helloworldansdhtiwhiqeusadjasdldjoihdaslhdqlwhasqwe",modifier=Modifier.constrainAs(text){

linkTo(start=guideline,end=parent.end)

width=Dimension.preferredWrapContent

約束解耦

直接拿上面寫好的代碼解耦了

約束集合

ConstraintSet設置一個約束集合，在里面提前設置好各個組件的約束條件！

下方代碼分別設置了兩個組件button和text的約束條件；

privatefundecoupleConstraints(margin:Dp):ConstraintSet{

returnConstraintSet{

valbutton=createRefFor("button")

valtext=createRefFor("text")

constrain(button){

top.linkTo(parent.top,margin)

constrain(text){

top.linkTo(button.bottom,margin)

解耦調(diào)用

按照原版的寫法，我們需要在constraintlayout中寫明約束條件，但由于我們把約束條件寫在了外部，那么直接調(diào)用即可

Modifier.layoutId直接根據(jù)于約束集合中定義的名稱來應用指定的約束條件；

@Composable

funDecoupleConstraintsLayout(){

BoxWithConstraints{

//響應式布局

valconstraints=if(maxWidthmaxHeight){

decoupleConstraints(16.dp)

}else{

decoupleConstraints(160.dp)

//把響應式布局的if判斷作為參數(shù)傳入，約束布局即可按照對應法則布置組件

ConstraintLayout(constraints){

//layoutId對應我們在約束集合中配置的名稱！

Button(onClick={/*TODO*/