android compose ConstraintLayout

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"
@Preview
@Composable
fun Greeting() {
    ConstraintLayout(Modifier.fillMaxSize(1f)) {
        val (text1,text2)=createRefs()
        val guideLine = createGuidelineFromStart(0f)    // 左
        val guideLine2 = createGuidelineFromEnd(0.9f)   // 右
        Text(text = "text1",  Modifier.constrainAs(text1){
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }.background(color = Color.Black), color = Color.White)
        Text(text = "test2",  Modifier.constrainAs(text2){
            top.linkTo(text1.top)
            bottom.linkTo(text1.bottom)
            start.linkTo(text1.start)
            end.linkTo(parent.end)
            linkTo(start = guideLine,end = guideLine2)
        }.background(color = Color.Blue), color = Color.Red)
    }
}

createGuidelineFromStart或者其他的指导线来替代layout_constraintVertical_bias或者layout_constraintHorizontal_bias

2.用链条来实现多个控件居中平分

    @Preview
    @Composable
    fun constrainLayout(){
        ConstraintLayout(Modifier.fillMaxSize(1f)) {
            val (text1,text2,text3,text4)=createRefs()
            createHorizontalChain(text1,text2,text3,text4,chainStyle = ChainStyle.Spread)//Spread SpreadInside Packed
            Text(text = "测试1", modifier =Modifier.constrainAs(text1){
                top.linkTo(parent.top)
            })
            Text(text = "测试2",modifier = Modifier.constrainAs(text2){
                top.linkTo(parent.top)
            })
            Text(text = "测试3",modifier = Modifier.constrainAs(text3){
                top.linkTo(parent.top)
            })
            Text(text = "测试4",modifier = Modifier.constrainAs(text4){
                top.linkTo(parent.top)
            })
        }
    }

ConstraintLayoutAndroid 开发中的一种布局系统,它允许开发者更方便地通过约束(Constraints)来控制 UI 元素之间的相对位置。要在项目中开始使用 ConstraintLayout,你需要按照以下步骤操作: 1. **引入依赖**:如果你使用的是 Gradle,确保在 `build.gradle` 文件的 app 目录下的 `dependencies` 部分添加了以下约束布局库的引用: ```groovy implementation 'com.android.support.constraint:constraint-layout:2.x.y' ``` 或者如果使用的是 Jetpack Compose,则需要对应的版本: ```kotlin imports(com.google.android.material CONSTRAINT_LAYOUT_VERSION) implementation("androidx.constraintlayout:constraintlayout-compose:$CONSTRAINT_LAYOUT_VERSION") ``` 2. **添加视图**:在 XML 文件中,你可以像平常那样创建 TextView、ImageView 等控件。 3. **设置约束**:使用 `<ConstraintSet>` 标签或者 ConstraintLayout 的 API 来设置元素之间的约束关系,例如对齐、垂直或水平居中、间距等。例如: ```xml <androidx.constraintlayout.widget.ConstraintLayout> <TextView android:id="@+id/textView" android:text="Hello World!" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" /> <!-- 更多约束 --> </androidx.constraintlayout.widget.ConstraintLayout> ``` 4. **布局文件中使用**:在 Activity 或 Fragment 的布局文件中,将 ConstraintLayout 设置为根布局,并放置你的控件。 5. **运行检查**:在运行时查看效果,可以在设计时间使用 Android Studio 的 Design 视图预览约束效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值