Jetpack Compose学习(14)——ConstraintLayout约束布局使用

原文地址: Jetpack Compose学习(14)——ConstraintLayout约束布局使用-Stars-One的杂货小窝

本文阅读之前,需要了解ConstraintLayout的使用!

各位可查阅我的ConstraintLayout使用一文

本系列以往文章请查看此分类链接Jetpack compose学习

引入依赖

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

可在下方链接查看官方的最新版本

Constraintlayout | Jetpack | Android Developers

简单示例

在compose里的约束布局,需要先通过createRef()方法创建ref对象,之后通过Modifier.constrainAs()来进行对应的约束对齐,如下简单例子:

2个组件,图片和文本,文本与图片的top和bottom对齐,位于图片的右侧,间距16dp

注意: createRef(),createRefs(),Modifier.constrainAs()这个ConstraintLayoutScope作用域才能使用!下面的其他的方法也是如此,之后不再赘述!

ConstraintLayout(modifier= Modifier
	.fillMaxWidth()
	.height(100.dp)
	.background(Color.Blue)) {//这里是ConstraintLayoutScope作用域
	
	//createRef
	//val portraitImageRef = remember {
	//    createRef()
	//}
	//val userNameTextRef = remember {
	//    createRef()
	//}

	//这个可以快速创建多个引用(但一次最多只能支持16个变量!)
	val (portraitImageRef,userNameTextRef) = remember{ createRefs()}

	Image(painter = painterResource(id = R.drawable.ic_auto), contentDescription =null ,modifier=Modifier.size(50.dp).constrainAs(portraitImageRef){
		top.linkTo(parent.top)
		start.linkTo(parent.start)
		bottom.linkTo(parent.bottom)
	})

	Text("myname",modifier=Modifier.constrainAs(userNameTextRef){
		top.linkTo(portraitImageRef.top)
		//还可以设置margin和goneMargin,这里我只设置了margin属性
		start.linkTo(portraitImageRef.end, margin = 16.dp)
		bottom.linkTo(portraitImageRef.bottom)
	})

}

constrainAs的函数体中,我们还可以设置当前组件的width和height属性,具体有下面几个选项

一个简单示例(某个组件占满剩余宽度):

ConstraintLayout(modifier= Modifier
	.fillMaxWidth()
	.height(100.dp)
	.background(Color.Blue)) {
	

	val (tv1Ref,tv2Ref) = remember{ createRefs()}

	Text("一个字",modifier=Modifier.constrainAs(tv1Ref){
		top.linkTo(parent.top)
		start.linkTo(parent.start)
	})
	

	Text("右侧文本内容",modifier=Modifier.constrainAs(tv2Ref){
		start.linkTo(tv1Ref.end)
		end.linkTo(parent.end)
		//占满剩余空间,实际等同于普通约束布局中,给width属性设置为0dp
		width = Dimension.fillToConstraints
	}.background(Color.Yellow))
}

除了上面几个start.linkTo,还有基线的对齐

baseline.linkTo(parent.baseline)

动态更改约束条件

除了上面说到的createRef方法,我们还可以通过Modifier.layoutId(id)和createRefFor(id)来联用进行创建ref对象

ConstraintSet对象就表明了当前的布局里的各组件的对齐关系,我们只需要构造ConstraintLayout的时候,传递此对象即可达到动态更新约束条件的效果!

下面是一个简单的示例:

private fun decoupledConstraints(margin: Dp): ConstraintSet {
    return ConstraintSet {
        val button = createRefFor("button")
        val text = createRefFor("text")

        constrain(button) {
            top.linkTo(parent.top, margin = margin)
        }
        constrain(text) {
            top.linkTo(button.bottom, margin)
        }
    }
}

@Composable
fun SettingPage(modifier: Modifier = Modifier) {
    val constraints = decoupledConstraints(margin = 32.dp)

    ConstraintLayout(constraints) {
        Button(
            onClick = { /* Do something */ }, modifier = Modifier.layoutId("button")
        ) {
            Text("Button")
        }

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

Barrier

平时在约束布局,不是很常用这个,一般用的GuideLine多些,不过也是记录下

这个需要依托存在的组件才能创建

ConstraintLayout{
	val (tv1Ref,tv2Ref,iv1Ref) = remember{ createRefs()}
	//创建位于组件右边的一个屏障
	val barrier = createEndBarrier(tv1Ref,tv2Ref)
	
	Text("一个字",modifier=Modifier.constrainAs(tv1Ref){
		top.linkTo(parent.top)
		start.linkTo(parent.start)
	})
	
	Text("十四个字",modifier=Modifier.constrainAs(tv2Ref){
		top.linkTo(tv1Ref.bottom)
		start.linkTo(tv1Ref.start)
	})
	
	//image始终位于2个文本的最右边(以最长文本为准)
	Image(painter = painterResource(id = R.drawable.ic_auto), contentDescription =null,modifier=Modifier.size(50.dp).constrainAs(iv1Ref){
		start.linkTo(barrier)
	} )
}

createEndBarrier方法即在组件的右边位置创建屏障,除此之外还有其他3个方向的

• createStartBarrier()
• createTopBarrier()
• createBottomBarrier()

GuideLine

引导线可以通过createGuidelineFromTop()方法直接创建,个人一般用此来进行百分比宽度等划分,然后让组件占满

于上面一样,还有其他方向,这里就不补充了,就是换个名字,代码提示直接可以搜到了

方法可接受一个0-1f范围之间的百分比或者固定的偏移量dp,如下面例子:

val guide = createGuidelineFromTop(0.2f)
val guide = createGuidelineFromTop(20.dp)

一个完整使用示例:

ConstraintLayout(modifier= Modifier
        .fillMaxSize()
        .background(Color.Blue)) {

        val (tv2Ref) = remember { createRefs() }
        
        val guide = createGuidelineFromTop(0.2f)

        Text("底下占满",modifier= Modifier
            .constrainAs(tv2Ref) {
                top.linkTo(guide)
                bottom.linkTo(parent.bottom)
                width = Dimension.matchParent
                height = Dimension.fillToConstraints
            }
            .background(Color.Yellow))
    }

Chain

熟悉约束布局使用都知道这个了,有水平或垂直2种,然后ChainStyle类型有3种,这里不赘述了

• createVerticalChain()
• createHorizontalChain()

createVerticalChain(imageOneRef, imageTwoRef, chainStyle = ChainStyle.Spread)

参考

• Jetpack Compose(八)-常用的布局组件 - 掘金
• Compose 中的 ConstraintLayout  |  Jetpack Compose  |  Android Developers