Jetpack Compose 教學上課講義【從零開始學 Jetpack Compose 程式設計】ConstraintLayout 約束佈局方式

 

【從零開始學 Jetpack Compose 程式設計】

線上教學課程目錄: https://bit.ly/3JF4SFA
Youtube 課程播放清單：https://bit.ly/3tFjRbx
Udemy 線上課程：https://bit.ly/3MbVnhO

Layout basics
https://developer.android.com/jetpack/compose/layouts/basics#scrollable

constraintlayout
https://developer.android.com/jetpack/compose/layouts/constraintlayout

ConstraintLayoutBaseScope
https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createabsoluteleftbarrier

Gradle

要額外宣告

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

ConstraintLayout

ConstraintLayout(
        modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth()
    ) {
        val (yellowBox, greenBox, redBox) = createRefs()

        //對齊父容器
        Box(modifier = Modifier
            .size(50.dp)
            .background(Color.Yellow)
            .constrainAs(redBox) {
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            }
        )

        //對齊父容器，加入 margin 間距
        Box(modifier = Modifier
            .size(50.dp)
            .background(Color.Green)
            .constrainAs(greenBox) {
                top.linkTo(parent.top,150.dp)
                bottom.linkTo(parent.bottom)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            })

         //對齊其他元件，並加入 margin 間距
        Box(modifier = Modifier
            .size(50.dp)
            .background(Color.Red)
            .constrainAs(yellowBox) {
                top.linkTo(greenBox.bottom)
                start.linkTo(greenBox.end, 20.dp)
            })
    }

作業

Guideline

ConstraintLayout(
    modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth()
) {
    val (yellowBox) = createRefs()

    val topGuideline = createGuidelineFromTop(0.1f)

    Box(modifier = Modifier
        .size(50.dp)
        .background(Color.Yellow)
        .constrainAs(yellowBox) {
            top.linkTo(topGuideline)
            start.linkTo(parent.start)
            end.linkTo(parent.end)

        })
}

Chains

ConstraintLayout(
        modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth()
    ) {
        val (yellowBox, greenBox, redBox) = createRefs()

        Box(modifier = Modifier
            .size(50.dp)
            .background(Color.Yellow)
            .constrainAs(redBox) {})

        Box(modifier = Modifier
            .size(50.dp)
            .background(Color.Green)
            .constrainAs(greenBox) {})

        Box(modifier = Modifier
            .size(50.dp)
            .background(Color.Red)
            .constrainAs(yellowBox) {})

        //水平
        createHorizontalChain(redBox, greenBox, yellowBox, chainStyle = ChainStyle.Spread)
//        createHorizontalChain(redBox, greenBox, yellowBox, chainStyle = ChainStyle.SpreadInside)
//        createHorizontalChain(redBox, greenBox, yellowBox, chainStyle = ChainStyle.Packed)

        //垂直
//        createVerticalChain(redBox, greenBox, yellowBox,chainStyle = ChainStyle.Spread) 
//        createVerticalChain(redBox, greenBox, yellowBox, chainStyle = ChainStyle.SpreadInside)
//        createVerticalChain(redBox, greenBox, yellowBox, chainStyle = ChainStyle.Packed)