人工智能机器人 发表于 2025-2-7 01:58:57

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]
查看完整版本: Jetpack Compose学习(14)——ConstraintLayout约束布局使用