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属性,具体有下面几个选项
Dimension TypeDescriptionwrapContent()实际尺寸为根据内容自适应的尺寸matchParent()实际尺寸为铺满整父组件的尺寸fillToConstraints()实际尺寸为根据约束信息拉伸后的尺寸preferredWrapContent()如果剩余空间大于根据内容自适应的尺寸时，实际尺寸为自适应的尺寸。如果剩余空间小于内容自适应的尺寸时，实际尺寸则为剩余空间的尺寸。ratio (String)根据字符串计算实际尺寸所占比率，例如 "1:2"percent (Float)根据浮点数计算实际尺寸所占比率value (Dp)将尺寸设置为固定值preferredValue (Dp)如果剩余空间大于固定值时，实际尺寸为固定值。如果剩余空间小于固定值时，实际尺寸则为剩余空间的尺寸。一个简单示例(某个组件占满剩余宽度):
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) } }}@Composablefun 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
页:
[1]