Jetpack Compose布局(四) - ConstraintLayout

前面几篇中介绍了布局相关的：布局基础知识、Material组件和布局、自定义布局。
本篇我们继续来介绍下布局的最后一个知识点：Compose中使用ConstraintLayout。

Compos布局知识图

ConstraintLayout 有助于根据可组合项的相对位置将它们放置在屏幕上，在使用多个嵌套 Row、Column、Box 和自定义布局元素时可用该布局替代。在实现对齐要求比较复杂的较大布局时，ConstraintLayout 很有用。类似Android View系统中的ConstrantLayout布局。

使用Compose中的ConstraintLayout时，需要在build.gradle中引入如下库：

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0"

具体版本请参考：ConstraintLayout版本页面

★注：在Android View系统中使用ConstraintLayout是为了减少布局嵌套层级，提升性能，但在Compose UI系统中不存在这个问题，它能高效处理较深的布局层次结构。因此在Compose中是否使用ConstraintLayout完全取决于开发者的使用习惯、代码的易读性和可维护性。

下面来看下使用方式：

两种使用方式

方式一：在可组合项中使用修饰符以内嵌的方式设置
使用步骤：
步骤一、使用 createRefs()或 createRef()创建与组件关联的引用
步骤二、通过给constraintAs修饰符设置与之关联的引用
步骤三、调用linkTo()设置约束

parent 是一个现有的引用，可用于指定对 ConstraintLayout 可组合项本身的约束条件。

实例：

/**
 * 方式一：直接在ConstraintLayout中内部设置约束信息
 */
@Composable
fun StudyConstraintLayout(){
    ......
    // Constraint 布局
    ConstraintLayout(
        modifier = Modifier.fillMaxSize()
    ) {
        //步骤一、使用 createRefs() 或 createRef() 创建与组件关联的引用
        val (textTitle,tfUser,tfPassword,btnLogin,snack) = createRefs()

        Text(
            text = "登录界面",
            modifier = Modifier
                //步骤二、通过给constraintAs修饰符设置与之关联的引用
                .constrainAs(textTitle) {
                    //步骤三、调用linkTo()设置约束
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    //设置顶部约束和margin
                    top.linkTo(parent.top,20.dp)
                }
        )
    ......
    }
}

鉴于示例代码太多，这里只贴部分代码，详细代码(StudyConstraintLayout)

运行效果：

使用方式一效果图

方式二：约束条件和布局分离方式
在某些情况下我们需要将约束条件和应用的布局分离开，便于使用。如：根据屏幕配置来更改约束条件，或在两个约束条件集之间添加动画效果等。

对于此类应用场景可采用ConstraintSet+Modifier.layoutId组合的方式实现。具体步骤如下：

• 生成一个ConstraintSet对象，并将其作为参数传递给 ConstraintLayout；
• 使用layoutId修饰符将在ConstraintSet中创建的引用分配给可组合项；

示例如下：

/**
 * 方式二、通过使用ConstraintSet设置约束
 */
@Composable
fun StudyConstraintSet(){
    val constraintSet = decoupledConstraints(0.dp)

    ConstraintLayout(constraintSet) {
        Button(
            onClick = { /* Do something */ },
            //通知设置layoutId实现控制约束
            modifier = Modifier.layoutId("button")
        ) {
            Text("Button")
        }

        Text("Text", Modifier.layoutId("text"))
    }
}

/**
 * 创建一个ConstraintSet实例
 */
private fun decoupledConstraints(margin:Dp):ConstraintSet{
    return ConstraintSet {
        val button = createRefFor("button")
        val text = createRefFor("text")

        constrain(button){
            top.linkTo(parent.top)
        }

        constrain(text){
            top.linkTo(button.bottom,10.dp)
        }
    }
}
//预览
@Preview(name = "方式二 ConstraintSet")
@Composable
fun PreviewStudyConstraintLayout2(){
    StudyConstraintSet()
}

效果图：

image.png

到这里Compose的ConstrantLayout内容介绍完了。
欢迎留言，一起学习，共同进步！

github - 示例源码
gitee - 示例源码