Jetpack Compose——ConstraintLayout简单使用

首先导入依赖

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-beta02"

看看参数：

ConstraintLayout(
    modifier: Modifier = Modifier,//布局修饰
    optimizationLevel: Int = Optimizer.OPTIMIZATION_STANDARD,//布局修饰
    crossinline content: @Composable ConstraintLayoutScope.() -> Unit//内容
)

ConstraintLayout(
    constraintSet: ConstraintSet,//子布局约束
    modifier: Modifier = Modifier,//布局修饰
    optimizationLevel: Int = Optimizer.OPTIMIZATION_STANDARD,//布局修饰
    animateChanges: Boolean = false,//动画的变化
    animationSpec: AnimationSpec = tween(),//动画配置
    noinline finishedAnimationListener: (() -> Unit)? = null,//动画结束回调
    noinline content: @Composable () -> Unit//内容
)

引导线，从特定位置（某一方向上的偏移量或者某一方向上的比例）创建一条实际并不可见的参考线：

    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val guideline = createGuidelineFromStart(0.2f)//布局20%位置创建
        val (box1, box2) = createRefs()
        Box(modifier = Modifier
            .fillMaxSize()
            .background(Color.Yellow)
            .constrainAs(box1) {
                end.linkTo(guideline)
            }) {

        }
        Box(modifier = Modifier
            .fillMaxSize()
            .background(Color.Red)
            .constrainAs(box2) {
                start.linkTo(guideline)
            }) {

        }

    }

效果如图：

屏障：两个长短不一样的排列以最长的为基准进行对齐

        ConstraintLayout(ConstraintSet {
            val box1 = createRefFor("box1")
            val box2 = createRefFor("box2")
            val box3 = createRefFor("box3")
            constrain(box1) {
                top.linkTo(parent.top)
                start.linkTo(parent.start)
            }

            constrain(box2) {
                top.linkTo(box1.bottom)
                start.linkTo(parent.start)
            }

            val barrier = createEndBarrier(box1, box2)

            constrain(box3) {
                start.linkTo(barrier)
                top.linkTo(box1.top)
                bottom.linkTo(box2.bottom)
            }
        }) {
            Box(
                modifier = Modifier
                    .layoutId("box1")
                    .background(color = Color.Red)
                    .width(100.dp)
                    .height(100.dp)
            )
            Box(
                modifier = Modifier
                    .layoutId("box2")
                    .background(color = Color.Yellow)
                    .width(150.dp)
                    .height(100.dp)
            )
            Box(
                modifier = Modifier
                    .layoutId("box3")
                    .background(color = Color.Blue)
                    .width(200.dp)
                    .height(100.dp)
            )
        }

效果如图：

链，将组件顺序打包成一行或一列，目前就两种

createHorizontalChain(
        vararg elements: ConstrainedLayoutReference,//打包控件编号
        chainStyle: ChainStyle = ChainStyle.Spread//链的类型
    )

createVerticalChain(
        vararg elements: ConstrainedLayoutReference,//打包控件编号
        chainStyle: ChainStyle = ChainStyle.Spread//链的类型
    ) 

链的类型目前有三种
Spread：所有控件平均分布在父布局空间中，是默认的类型
SpreadInside：第一个和最后一个分布在链条的两端，其余的控件平均分布剩下的空间
Packed：所有控件打包在一起，并放置在链条的中间

        ConstraintLayout(modifier = Modifier.fillMaxSize()) {
            val (box1, box2, box3,box4) = createRefs()
            //设置chainStyle类型为SpreadInside
            createHorizontalChain(box1, box2, box3,box4, chainStyle = ChainStyle.SpreadInside)
            Box(modifier = Modifier
                .size(100.dp)
                .background(Color.Red)
                .constrainAs(box1) {})
            Box(modifier = Modifier
                .size(100.dp)
                .background(Color.Yellow)
                .constrainAs(box2) {})
            Box(modifier = Modifier
                .size(100.dp)
                .background(Color.Blue)
                .constrainAs(box3) {})
            Box(modifier = Modifier
                .size(100.dp)
                .background(Color.Green)
                .constrainAs(box4) {})
        }