Compose约束布局的进阶使用

前言

在上篇文章中，简单介绍了一下在Compose中ConstraintLayout 的简单使用，以能够快速上手使用；今天就再介绍一下 一些进阶的用法，能够让大家在复杂环境下运用自如。

使用

在这里主要介绍一下ConstraintLayout中 Barrier ，GuideLine和Chain 三种工具的配合使用。

1.Barrier

Barrier 的作用主要是建立一个边界，我们其他组件可以用这个边界建立约束。

单纯的文字描述太抽象，我们用实际效果来展示一下

这里有两个动态长度的文本：“动态文本1”和“动态文本2”，还有一个“测试文本3”，其中动态文本长度是动态变化的，测试文本是贴在动态文本右侧，测试文本要跟随两个文本中最长文本长度的变化而变化。由于我们并不知道具体哪个文本会更长，所以我们不能准确选择哪个文本作为目标做出约束。如果不借助Barrier的话，我们可能会选择将“动态文本1”和“动态文本2”再多包裹一层布局，然后将测试文本对最外侧布局做出约束即可。

但是现在我们使用Barrier 就会非常简单。

首先我们对“动态文本1”和“动态文本2”创建引用，然后创建右侧Barrier，让"测试文本3"对Barrier做出对应约束即可。

    ConstraintLayout(modifier = Modifier.width(300.dp)
                     .height(80.dp).background(Color.LightGray)) {
        val (text1, text2, text3) = createRefs()
        //创建Barrier
        val barrier = createEndBarrier(text1, text2)
        Text("动态文本1", modifier = Modifier.constrainAs(text1) {
            top.linkTo(parent.top)
            start.linkTo(parent.start)
        })
        Text("动态文本2", modifier = Modifier.constrainAs(text2) {
            top.linkTo(text1.bottom)
            start.linkTo(text1.start)
        })
        Text("测试文本3", modifier = Modifier.constrainAs(text3) {
            top.linkTo(parent.top)
            //对Barrier 做出约束
            start.linkTo(barrier,10.dp)
        })
    }

这样无论是文本1增加长度还是文本2 增加长度，测试文本都能很好的进行动态调整。

例如这种情况：

亦或这种情况：

2.GuideLine

GuideLine的作用主要是帮我们创建一条标准线，可以理解为在我们没有合适参照物的情况下 创建一个参照物。

举个例子，有个需求是一个图片需要显示在距离顶部1/4的地方。

我们就可以利用GuideLine 创建一条距离顶部1/4的标准线，然后让图片上下对标准线做出约束。

    ConstraintLayout(modifier = Modifier.width(300.dp)
                     .height(80.dp).background(Color.LightGray)) {
        val (head) = createRefs()
        //创建标准线
        val guideLine = createGuidelineFromTop(0.25f)
        Image(painter = painterResource(R.drawable.logo8), "head",
            contentScale = ContentScale.Crop,
            modifier = Modifier.constrainAs(head) {
                start.linkTo(parent.start)
                end.linkTo(parent.end)
                //对标准线做出约束
                top.linkTo(guideLine)
                bottom.linkTo(guideLine)
            }.size(30.dp).clip(CircleShape)
        )
    }

3.Chain

Chain的作用是将几个组件组合在一起，然后进行均匀排列。

Chain一共有两个api：

// 横向的Chain
createHorizontalChain()
// 竖向的Chain
createVerticalChain()

例如：我们需要将三个文本组件均匀的横向排列。

利用chain，我们就可以将三个文本的引用连接起来，设置对应的排列模式就可以达到均匀排列的效果。

ConstraintLayout(modifier = Modifier.width(300.dp).height(80.dp).background(Color.LightGray)) {
    val (text1, text2, text3) = createRefs()
    //创建chain
    createHorizontalChain(text1, text2, text3, chainStyle = ChainStyle.Spread)
    Text("测试文本1",modifier=Modifier.background(Color.Red).padding(10.dp).constrainAs(text1) {

    })
    Text("测试文本2",modifier=Modifier.background(Color.Blue).padding(10.dp).constrainAs(text2) {

    })
    Text("测试文本3",modifier=Modifier.background(Color.Green).padding(10.dp).constrainAs(text3){

    })
}

其中排列模式有三种：Spread，SpreadInside，Packed；

• Spread 是所有空间均匀分布在父布局中
• SpreadInside 是第一个和最后一个分布在两端，其他组件均匀分布
• Packed是所有空间集中在一起，然后整体居中。

Spread

SpreadInside

Packed

其中Packed模式是可以自己自定义偏移量的，可以设置0~1f，来控制居中位置。

例如我们设置0.2f的偏移量：

createHorizontalChain(text1, text2, text3, chainStyle = ChainStyle.Packed(0.2f))

效果就是这个样子。

最后

在一般的场景下，可能单独使用约束布局就可以完成效果了，其他复杂效果结合其他布局来进行混合使用大部分也可以完成效果，这三种的工具是给我们一种更多的选择。