🎨

【Android】ComposeのRowで一部のViewを右に寄せる

2022/07/13に公開約1,300字

以下のようなレイアウトで、選択中という文字を右に寄せます。

row_item

Rowの要素を「色が付いた円と色の名前」「選択中」の2要素に分け、horizontalArrangementArrangement.SpaceBetweenをセットします。

space_between

@Composable
fun ColorItem() {
    Row(
        modifier = Modifier
            .padding(10.dp)
            .fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            CircleColor()
            ColorName()
        }
        SelectedText()
    }
}

@Composable
private fun CircleColor() {
    Box(
        modifier = Modifier
            .size(30.dp)
            .clip(CircleShape)
            .background(Color(0xFFff6f60))
    )
}

@Composable
private fun ColorName() {
    Text(
        modifier = Modifier.padding(start = 20.dp),
        text = "レッド",
        color = Color(0xFF333333)
    )
}

@Composable
private fun SelectedText() {
    Text(
        text = "選択中",
        modifier = Modifier.padding(end = 15.dp),
        color = Color(0xFF333333)
    )
}

@Preview(showBackground = true)
@Composable
fun PreviewColorItem() {
    ColorItem()
}

Discussion

ログインするとコメントできます