2025/1/17

【Jetpack Compose】Column・Row・Boxでのレイアウト実装方法と違い！

この記事からわかること

Kotlin/Android Jetpack Composeの使い方
Column・Row・Boxでのレイアウト実装方法と違い

index

[open]

Jetpack Composeにおけるレイアウト実装
Column
要素間に余白を設ける
Row
Box

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Android Studio：Koala
Kotlin：1.9.0

Jetpack Compose自体の基本的な使用方法に関しては以下の記事を参考にしてください。

Jetpack Composeにおけるレイアウト実装

Jetpack ComposeではUIコンポーネント(Composable関数)のレイアウト実装を制御するためのComposable関数が用意されています。代表的なものにColumn、Row、Boxという3つのComposable関数があります。公式の解説画像がわかりやすいので引用しておきましたが、それぞれ以下のようなレイアウトでの実装が簡単に行えるようになります。

【Kotlin/Android/Jetpack Compose】Column・Row・Boxでのレイアウト実装方法と違い！

引用：公式リファレンス：6. 列と行を作成する

実際にそれぞれの実装方法をまとめていきたいと思います。

Column

ColumnはUIコンポーネントを縦に並べて配置することができるレイアウトコンテナです。ブロックの中には複数のComposable関数を配置することが可能です。

@Preview(showBackground = true)
@Composable
fun ColumnPreview() {
    TestComposeAppTheme {
        Column(Modifier.padding(12.dp), horizontalAlignment = Alignment.End) {
            ItemText("Hello World!!", Modifier.fillMaxWidth().padding(24.dp))
            ItemText("Let's Develop!", Modifier.padding(24.dp))
        }
    }
}

@Composable
fun ItemText(text: String, modifier: Modifier = Modifier) {
    Surface(color = MaterialTheme.colorScheme.primary) {
        Text(text, modifier)
    }
}

定義

@Composable
inline fun Column(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable ColumnScope.() -> Unit
)

modifier・・・任意の修飾
verticalArrangement・・・縦方向の配置
horizontalAlignment・・・横方向の配置
content・・・レイアウト対象のUI

要素間に余白を設ける

要素間に余白を設けたい場合はverticalArrangementにArrangement.spacedBy(XX.dp)を指定します。

Column(
    Modifier.padding(12.dp),
    horizontalAlignment = Alignment.End,
    verticalArrangement = Arrangement.spacedBy(16.dp)
) {
    ItemText("1", Modifier.fillMaxWidth().padding(24.dp))
    ItemText("2", Modifier.fillMaxWidth().padding(24.dp))
    ItemText("3", Modifier.fillMaxWidth().padding(24.dp))
    ItemText("4", Modifier.fillMaxWidth().padding(24.dp))
}

Row

RowはUIコンポーネントを横に並べて配置することができるレイアウトコンテナです。

@Preview(showBackground = true)
@Composable
fun ColumnPreview() {
    TestComposeAppTheme {
        Row(Modifier.padding(12.dp), verticalAlignment = Alignment.CenterVertically) {
            ItemText("Hello World!!", Modifier.height(150.dp).padding(24.dp))
            ItemText("Let's Develop!", Modifier.padding(24.dp))
        }
    }
}

定義

@Composable
inline fun Row(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    content: @Composable  RowScope.() -> Unit
)

modifier・・・任意の修飾
horizontalArrangement・・・横方向の配置
verticalAlignment・・・縦方向の配置
content・・・レイアウト対象のUI

Box

BoxはUIコンポーネントを重ねて配置することができるレイアウトコンテナです。子要素の位置は子要素に対してModifier.align(Alignment.TopStart)などを指定することで制御することができます。

@Preview(showBackground = true)
@Composable
fun BoxPreview() {
    TestComposeAppTheme {
        Box(
            Modifier
                .width(150.dp)
                .height(150.dp)
                .padding(24.dp)
        ) {
            ItemText("1", Modifier.align(Alignment.TopStart))
            ItemText("2", Modifier.align(Alignment.TopEnd))
            ItemText("3", Modifier.align(Alignment.BottomStart))
            ItemText("4", Modifier.align(Alignment.BottomEnd))
        }
    }
}

@Composable
fun ItemText(text: String, modifier: Modifier = Modifier) {
    Surface(
        color = when (text) {
            "1" -> MaterialTheme.colorScheme.primary.copy(alpha = 0.5f)
            "2" -> MaterialTheme.colorScheme.secondary.copy(alpha = 0.5f)
            "3" -> MaterialTheme.colorScheme.tertiary.copy(alpha = 0.5f)
            "4" -> MaterialTheme.colorScheme.error.copy(alpha = 0.5f)
            else -> MaterialTheme.colorScheme.primary
        },
        modifier = modifier
    ) {
        Text(
            text,
            Modifier
                .width(50.dp)
                .height(50.dp),
            color = MaterialTheme.colorScheme.onPrimary,
            textAlign = TextAlign.Center
        )
    }
}