Android ConstraintLayout約束布局使用實(shí)例介紹

更新時(shí)間：2022年10月10日 09:18:43 作者：知奕奕

ConstraintLayout是Google在Google I/O 2016大會(huì)上發(fā)布的一種新的布局容器(ViewGroup),它支持以靈活的方式來(lái)放置子控件和調(diào)整子控件的大小,下面這篇文章主要給大家介紹了關(guān)于Android中ConstraintLayout約束布局詳細(xì)解析的相關(guān)資料,需要的朋友可以參考下

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

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

導(dǎo)入 compose 約束布局包

打開(kāi) build.gradle(:app) 文件

在依賴(lài)中添加以下這一行，之后點(diǎn)擊頂部的 sync now 進(jìn)行 gradle 配置

androidx.constraintlayout:constraintlayout-compose:1.0.1

約束布局使用步驟

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

@Composable
fun ConstraintLayoutContent() {
    ConstraintLayout() {
        val (button, text) = createRefs()
        Button(
            onClick = { /*TODO*/ },
            modifier = Modifier.constrainAs(button) {
                top.linkTo(parent.top, margin = 16.dp)
            }
        ) {
            Text(text = "btn")
        }
    }
}

繼續(xù)約束

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

@Composable
fun ConstraintLayoutContent() {
    ConstraintLayout() {
        ...
        Text(text = "nullclear", modifier = Modifier.constrainAs(text) {
            // 直接拿button作為參照點(diǎn)進(jìn)行布局
            top.linkTo(button.bottom, margin = 16.dp)
            // 水平約束對(duì)齊父類(lèi)
            centerHorizontallyTo(parent)
        })
    }
}

參考線

渲染結(jié)果

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

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

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

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

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

@Composable
fun ConstraintLayoutContent2() {
    ConstraintLayout {
        val text = createRef()
        val guideline = createGuidelineFromStart(fraction = 0.5f)
        Text(text = "helloworld ansd htiwhiqeusadjasdl d joi hdaslh dqlwh as qwe", modifier = Modifier.constrainAs(text) {
            linkTo(start = guideline, end = parent.end)
            width = Dimension.preferredWrapContent
        })
    }
}

約束解耦

直接拿上面寫(xiě)好的代碼解耦了

約束集合

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

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

private fun decoupleConstraints(margin: Dp): ConstraintSet {
    return ConstraintSet {
        val button = createRefFor("button")
        val text = createRefFor("text")
        constrain(button) {
            top.linkTo(parent.top, margin)
        }
        constrain(text) {
            top.linkTo(button.bottom, margin)
        }
    }
}

解耦調(diào)用

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

Modifier.layoutId 直接根據(jù)于約束集合中定義的名稱(chēng)來(lái)應(yīng)用指定的約束條件；

@Composable
fun DecoupleConstraintsLayout() {
    BoxWithConstraints {
        // 響應(yīng)式布局
        val constraints = if (maxWidth < maxHeight) {
            decoupleConstraints(16.dp)
        } else {
            decoupleConstraints(160.dp)
        }
        // 把響應(yīng)式布局的if判斷作為參數(shù)傳入，約束布局即可按照對(duì)應(yīng)法則布置組件
        ConstraintLayout(constraints) {
            // layoutId對(duì)應(yīng)我們?cè)诩s束集合中配置的名稱(chēng)！
            Button(onClick = { /*TODO*/ }, modifier = Modifier.layoutId("button")) {
                Text(text = "button")
            }
            Text(text = "text", modifier = Modifier.layoutId("text"))
        }
    }
}

到此這篇關(guān)于Android ConstraintLayout約束布局使用實(shí)例介紹的文章就介紹到這了,更多相關(guān)Android ConstraintLayout內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: