[Compose 系列 - 3] Compose UI - ConstraintLayout

val constraint_ver = "1.0.0-alpha07"
val compose_ver = "1.0.0-beta07"

dependencies {
    ...
    implementation("androidx.constraintlayout:constraintlayout-compose:${constraint_ver}")

}

@Composable
fun ConstraintLayoutContent() {
    ConstraintLayout(modifier = Modifier.background(Color.Gray)) {
        // 創造元件id
        val (buttonId, textId) = createRefs()

        Button(
            onClick = { /* Do something */ },
            // 透過 ConstraintLayoutScope 底下的 constrainAs(id)
            // 指定該component id: buttonId
            modifier = Modifier.constrainAs(buttonId) {
                // 將 btn 上緣指定至 parent 上緣
                // 並保持16.dp 距離
                top.linkTo(parent.top, margin = 16.dp)
            }
        ) {
            Text("Button")
        }

        // 一樣將 textId 塞進 Text 元件
        Text("Text", Modifier.background(Color.White).constrainAs(textId) {
            // 將 text 上緣 指定至 btn 下緣, 並保持 16.dp 距離
            top.linkTo(buttonId.bottom, margin = 16.dp)
//             將text 左右, 對齊 btn 左右
            start.linkTo(buttonId.start)
            end.linkTo(buttonId.end)
        })
    }
}

@Composable
fun ConstraintWithConstraintSet() {
    ConstraintLayout(
        modifier = Modifier.background(Color.Gray),
        constraintSet = ConstraintSet {
//         建立關係
            val buttonId = createRefFor("btnId")
            val textId = createRefFor("textId")

            constrain(buttonId) {
                top.linkTo(parent.top, 16.dp)
            }
            
            constrain(textId) {
                top.linkTo(buttonId.bottom, margin = 16.dp)
                start.linkTo(buttonId.start)
                end.linkTo(buttonId.end)
            }
        }
    ) {
//     賦予 compontent id
        Button(
            onClick = { /* Do something */ },
            modifier = Modifier.layoutId("btnId")
        ) {
            Text(text = "Button")
        }

        Text("Text",
            Modifier
                .background(Color.White)
                .layoutId("textId"))

    }
}

@Composable
fun createGuide() {
    ConstraintLayout {
        val textId = createRefs()
//     創建 水平guideLine, 距離parent上緣20dp
        val absTop = createGuidelineFromTop(20.dp)
//     創建 水平guideLine, 距離parent上緣20dp
        val perTop = createGuidelineFromTop(0.4f)
        
        Text("Text", Modifier.constrainAs(textId) {
            top.linkTo(absTop)
        }
    }
}

@Composable
fun ConstraintChain() {
    ConstraintLayout(
        modifier = Modifier.background(Color.Gray),
        constraintSet = ConstraintSet {
            val text1Id = createRefFor("text1")
            val text2Id = createRefFor("text2")
            val text3Id = createRefFor("text3")
            
            createHorizontalChain(
                text1Id,
                text2Id,
                text3Id,
                chainStyle = ChainStyle.Spread
                // ChainStyle 有三種預設模式: 
                // Spread: 平均分配空間, 左右留空白
                // SpreadInside: 平均分配空間, 左右不留空白
                // Packed: 元件互相緊連, 並 水平置中
                // 而 Packed 可以放置bias 參數, 控制水平位移
            ) 
        }
    ) {
        Text("test1", Modifier.layoutId("text1"))
        Text("test2", Modifier.layoutId("text2"))
        Text("test3", Modifier.layoutId("text3"))
    }
}