前面几篇中介绍了布局相关的:布局基础知识、Material组件和布局、自定义布局。
本篇我们继续来介绍下布局的最后一个知识点:Compose中使用ConstraintLayout
。
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()
}
效果图:到这里Compose的ConstrantLayout内容介绍完了。
欢迎留言,一起学习,共同进步!