快速上手Compose约束布局

前言

今天对Compose中约束布局的使用方法进行一下记录，我发现在学习Compose的过程中,像Column,Row等布局可以很快上手，可以理解怎样使用，但是对于ConstraintLayout 还是得额外学习一下，所以总结一下进行记录。其实Compose-ConstraintLayout 完全是我对传统布局使用习惯的迁移，已经习惯了约束的思维方式。

接下来我们就看Compose中ConstraintLayout 是怎样使用的。

使用

首先我们先引入依赖

Groovy

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

Kotlin

implementation("androidx.constraintlayout:constraintlayout-compose:1.0.1")

在传统布局中，我们对约束布局的使用都是通过id进行相互约束的，那在Compose中我们同样需要先创建一个类似id功能一样的引用。

val (text) = createRefs()

在Compose中有两种创建引用的方式：createRefs() 和createRef()。createRef()只能创建一个，createRefs()每次能创建多个(最多16个)。

然后对我们的组件设置约束，这里我用了一个Text()做示例。

ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (text) = createRefs()
        Text("Hello Word", modifier = Modifier.constrainAs(text) {
            start.linkTo(parent.start)
            top.linkTo(parent.top)
        })
    }

这样就实现了 Text() 组件在我们布局的左上角。

当我们同时也对end 做出约束，就会达到一个Text()组件在布局中横向居中的效果。

Text("Hello Word", modifier = Modifier.constrainAs(text) {
            start.linkTo(parent.start)
            end.linkTo(parent.end)
            top.linkTo(parent.top)
        })

当我们想有一个Button按钮 在文字的下方居中显示，我们可以这样做：

    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (text, button) = createRefs()
        Text("Hello Word", modifier = Modifier.constrainAs(text) {
            start.linkTo(parent.start)
            end.linkTo(parent.end)
            top.linkTo(parent.top)
        })
        Button(onClick = {}, modifier = Modifier.constrainAs(button) {
            start.linkTo(text.start)
            end.linkTo(text.end)
            top.linkTo(text.bottom)
        }) {
            Text("按钮")
        }
    }

将Button组件相对于文字组件做出前，后，顶部约束。

实践

接下来我们尝试使用约束布局来做一个个人信息显示的效果。我们先看下我们要实现的效果：

我们先分解一下这个效果，一个Image图片，一个Text 名称，一个Text 微信号， 还有一个 二维码。

接下来我们就一步步来实现一下。

先是头像部分，我们对Image头像，先进行上，下，前约束，再设置一下左边距，能够留出空间来。

    Image(painter = painterResource(R.drawable.logo8), "head",
            contentScale = ContentScale.Crop,
            modifier = Modifier.constrainAs(head) {
                start.linkTo(parent.start)
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom)
            }.padding(start = 20.dp).size(60.dp).clip(CircleShape)
        )

然后我们开始添加名称和id。

Text()名称组件是顶部和头像顶部对齐，start 和 头像的end 进行对齐；Id 是对于名称 start对齐，顶部与名称底部对齐。

       Text("Android开发那点事儿",
            style = TextStyle(fontSize = 16.sp, 
                color = Color.Black, fontWeight = FontWeight(600)),
            modifier = Modifier.constrainAs(name) {
                top.linkTo(head.top)
                start.linkTo(head.end)
            }.padding(start = 10.dp)
        )

        Text("微信号:android-blog",
            style = TextStyle(fontSize = 12.sp,
                color = Color.DarkGray, fontWeight = FontWeight(400)),
            modifier = Modifier.constrainAs(id) {
                top.linkTo(name.bottom)
                start.linkTo(name.start)
            }.padding(start = 10.dp, top = 5.dp)
        )

效果：

最后我们来加载二维码，二维码图标和右箭头图标都是从“阿里icon”中找的图标。

将图标相对于头像上下居中，紧靠右边，然后留出间距，然后是箭头上下都跟二维码图标对齐，左侧紧贴二维码的右侧。

    ConstraintLayout(modifier = Modifier.width(300.dp)
    .height(80.dp).background(Color.LightGray)) {
        ........
        Image(
            painter = painterResource(R.drawable.qr),"",
            modifier = Modifier.size(20.dp).constrainAs(qr) {
                top.linkTo(head.top)
                bottom.linkTo(head.bottom)
                end.linkTo(parent.end, 30.dp)
            })
        Image(
            painter = painterResource(R.drawable.left), "",
            modifier = Modifier.size(20.dp).constrainAs(left) {
                top.linkTo(qr.top)
                bottom.linkTo(qr.bottom)
                start.linkTo(qr.end)
            })

    }

我们来看下最后完成的效果。

至此，我们就通过ConstraintLayout完成了一个简单的效果，如果有传统布局的使用基础，Compose的使用起来还是可以很快上手的。

最后

ConstraintLayout 最基础的用法我们就写到这里，另外还有一些进阶用法会在后续的文章中给大家详细介绍。