[Android] 002. ConstraintLayout

@Composable
fun Screen(modifier: Modifier = Modifier) {
    Column(
        modifier.fillMaxSize().padding(44.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        Content1("1234567890")
        // TextがfillWidthになってbuttonが画面外に...
        Content1("1234567890".repeat(10))

        // 違う、そうじゃない
        Content2("1234567890")
        Content2("1234567890".repeat(10))

        // Good!
        Content3("1234567890")
        Content3("1234567890".repeat(10))
    }
}

@Composable
fun Content1(text: String) {
    Row(
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Text(
            text,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
        Button(onClick = {}) {
            Text("ok")
        }
    }
}

@Composable
fun Content2(text: String) {
    Row(
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Text(
            text,
            Modifier.weight(1f),
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
        Button(onClick = {}) {
            Text("ok")
        }
    }
}

@Composable
fun Content3(text: String) {
    ConstraintLayout {
        val (left, right) = createRefs()

        Text(
            text,
            Modifier.constrainAs(left) {
                start.linkTo(parent.start)
                end.linkTo(right.start, margin = 8.dp)
                width = Dimension.preferredWrapContent
                centerVerticallyTo(parent)
            },
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )

        Button(
            onClick = {},
            Modifier.constrainAs(right) {
                end.linkTo(parent.end)
                centerVerticallyTo(parent)
            }
        ) {
            Text("ok")
        }
    }
}

Rowで左側のコンポーネントの幅が可変で右側が固定で、左寄せレイアウトがRowできないorz
RowのModifireでできれば楽なのに…
https://developer.android.com/develop/ui/compose/layouts/constraintlayout

[versions]
constraintlayoutCompose = "1.1.1"

[libraries]
androidx-constraintlayout-compose = { group = "androidx.constraintlayout", name = "constraintlayout-compose", version.ref = "constraintlayoutCompose" }

Android Studio Meerkat 2024.3.1 Patch 1 built on March 13, 2025