Jetpack Compose 中的约束布局：动态创建复杂且响应迅速的 android 布局

介绍

• 构建 UI 是 Android 应用程序必不可少但又必不可少的事情之一。

• 在使用 XML 时，我们使用线性布局、相对布局、框架布局和约束布局来构建布局。一般来说，我们更喜欢约束布局而不是其他布局，因为它为您提供了构建响应式但复杂布局的充分灵活性。

注意：本博客不会介绍约束布局的概念，但会介绍如何在 Jetpack Compose 中实现它。

先说基础！

• 我们可以使用在使用约束布局时默认可组合使用的各种边界来实现约束布局。

start = 可组合的左侧

end = 可组合的右侧

• 这些特定的边界用于根据我们在布局中的需要来对齐和重新排列组合。如果我们想要构建具有所有所需 UI 元素的复杂布局，它也会使事情变得更容易。

image.png

我们真的每次都需要一个约束布局吗？

在使用 jetpack-compose 时，我们可能可以使用 Row/Column/Box 构建大部分 UI 内容，这使得事情变得非常简单，但我们可以构建一个很棒的 UI，如下所示：

• 在 Jetpack compose 中构建 UI 比 XML 简单得多（在大多数情况下）。如您所见，我们在这里没有使用任何类型的约束布局。我们只是根据我们的 UI 要求使用了可组合、行、框等。

• 这里的重点是，我们不需要每次构建 UI 时都使用约束布局；即使在 jetpack compose 中没有约束布局，我们也可以构建一个非常好的 UI。

但是，如果我们想构建一个复杂的布局，其中包括我们想要的可组合物的排列，如下所示？

• 这就是约束布局进入游戏的地方。

ConstraintLayout 是一种布局，允许您相对于屏幕上的其他可组合项放置可组合项。它是使用多个嵌套行、列、框和自定义布局元素的替代方法。ConstraintLayout 在实现具有更复杂对齐要求的较大布局时很有用。

Jetpack Compose 中约束布局的实现

依赖项

• 约束布局默认不可用；我们必须添加一个依赖项才能继续进行。

implementation "androidx.constraintlayout:constraintlayout-compose:[version]"

• 将[version]替换为当前可用的最新版本。

执行

• 如果你还记得，我们以前在 XML 中实现约束布局如下，我们指定了id、约束边界、边距、填充等：

• 由于我们正在使用 jetpack-compose，我们不能像在 XML 中那样拖放，但是在 jetpack-compose 中实现约束布局实际上是一件简单的事情。

这是我们将用于在 jetpack compose 中实现约束布局的映射：

我们需要创建一个称为“ ConstraintSet{ } ”的东西，我们将在其中编写如何根据需要排列组合的代码。

val constraintsSet = ConstraintSet {
...
}

在 Jetpack-compose 中，我们需要通过createRefFor()为可组合对象创建一个引用，稍后我们可以使用修饰符将其添加到可组合对象中以访问其排列/对齐方式

val constraintsSet = ConstraintSet {
    val composable1= createRefFor("composable1")
    val composable2= createRefFor("composable2")
    val composable3= createRefFor("composable3")
}

为了根据我们的需要安排可组合项，我们需要通过constrain(variableName){ }附加可组合项的边界，并通过linkTo()将它们链接到相应的可组合项

val constraintsSet = ConstraintSet {  // constraint set
    val composable1= createRefFor("composable1")  // creating refernce
    val composable2= createRefFor("composable2")  // creating refernce
    val composable3= createRefFor("composable3")  // creating refernce

     constrain(composable1) {   // arranging "composable 1" bounds
                top.linkTo(parent.top)    // linking "composable1" top to "parent" top
                start.linkTo(parent.start)  // linking "composable1" start to "parent" start
                end.linkTo(parent.end)   // linking "composable1" end to "parent" end
     }

   constrain(composable2) {    // arranging "composable 2" bounds
                top.linkTo(composable1.bottom)    // linking "composable2" top to "composable1" bottom
                start.linkTo(composable1.start)  // linking "composable2" start to "composable1" start
     }

   constrain(composable3) {   // arranging "composable 3" bounds
                top.linkTo(composable1.bottom)    // linking "composable3" top to "composable1" bottom
                end.linkTo(composable1.end)  // linking "composable3" end to "composable1" end
     }

}

如果我们可视化上面的代码，我们的 UI 应该是这样的：

• 但它不会是这样的，因为我们还没有添加对约束布局和可组合项的引用

• 我们可以通过调用ConstraintLayout( ) { }并传递constraintsSet 变量来访问我们在其中创建的引用来创建约束布局。

ConstraintLayout(
     constraintSet = constraintsSet,  // Don't forget to add "constraintsSet" variable
         modifier = Modifier  // The modifier assignment is upon you
                    .fillMaxSize()
    ) {
   // UI code
}

• 现在，根据需要，将可组合项添加到约束布局块中，并且不要忘记*通过修饰符*****包含.layoutId（“refID”） ，以便我们可以将相应的可组合项链接到我们之前创建的引用。

ConstraintLayout(
        constraintSet = constraintSet, modifier = Modifier
            .fillMaxSize()          
    ) {
        Box(     // composable1
            modifier = Modifier
                .padding(top=20.dp)
                .requiredWidth(250.dp)
                .requiredHeight(100.dp)
                .background(Color.White)
                .layoutId("composable1")   // reference 'id'
        )
        Box(     // composable2
            modifier = Modifier
                .padding(top=20.dp)
                .size(100.dp)
                .background(Color.LightGray)
                .layoutId("composable2")   // reference 'id'
        )
        Box(     // composable3
            modifier = Modifier
                .padding(top=20.dp)
                .size(100.dp)
                .background(Color.LightGray)
                .layoutId("composable3")   // reference 'id'
        )
    }

您的最终代码应与此类似

就这样结束了

撰写预览：

在移动设备上启动应用程序：

文章来源：https://saketh001.hashnode.dev/constraint-layout-in-jetpack-compose#heading-launching-the-application-on-a-mobile-device