Jetpack Compose ConstraintLayoutの基本的な利用方法

AndroidのJetpack ComposeでConstraintLayoutの基本的な利用方法です。
この記事は以下のバージョンに対応しています。

	バージョン
Jetpack Compose	1.0.4
androidx.constraintlayout:constraintlayout-compose	1.0.0-beta02
AndroidStudio	ArcticFox 2020.3.1 Patch 3

基本的な利用方法

Jetpack ComposeでConstraintLayoutを利用するために固有のandroidx.constraintlayout:constraintlayout-composeというライブラリを導入する必要があります。

ConstraintLayoutSampleを例に基本的な利用方法を説明します。

ConstraintLayoutSample.kt

@Preview(showBackground = true)
@Composable
fun ConstraintLayoutSample() {
    ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
        val (icon, title, bar) = createRefs() // (1)
        Icon(
            modifier = Modifier
                .padding(4.dp)
                .constrainAs(icon) { // (2)
                    top.linkTo(title.top) // (3)
                    bottom.linkTo(title.bottom)
                    start.linkTo(parent.start) // (4)
                },
            imageVector = Icons.Rounded.Info,
            contentDescription = "Info"
        )
        Text(
            modifier = Modifier.constrainAs(title) {
                start.linkTo(icon.end)
            },
            text = "タイトル",
            fontSize = 32.sp
        )
        Spacer(
            modifier = Modifier
                .constrainAs(bar) {
                    top.linkTo(title.bottom)
                    start.linkTo(title.start)
                    end.linkTo(title.end)
                    width = Dimension.fillToConstraints // (5)
                    height = Dimension.percent(0.1f) // (6)
                }
                .background(color = Color.DarkGray)
        )
    }
}

• (1) createRefs()でConstraintLayoutの子要素となるComposeを参照するためのオブジェクトを作成します。
• (2) 子要素となるComposeのmodifierに、(1)で作成したオブジェクトを引数に指定したconstrainAs()を指定します。
• (3) constrainAs()のラムダでConstraintLayoutの制約を指定します。
• (4) parentというオブジェクトはConstraintLayoutが持つオブジェクトです。親を指します。
• (5) widthにDimension.fillToConstraintsを指定することで、startとendに指定した制約にもとづいて可能な限り横幅を広げる制約となっています。heightにDimension.fillToConstraintsを指定した場合、topとbottomに指定した制約にもとづいて可能な限り高さを広げる制約となります。
• (6) widthにDimension.percentを指定することで、親の横幅に対する割合で横幅を決めています。heightにDimension.percentを指定すると、親の高さに対する割合で高さを決めることができます。