レイアウト管理：Column、Row、Boxの配置と応用【Jetpack Compose入門④】

Jetpack Composeにおけるレイアウト管理
1. Jetpack Composeの特徴
Columnの基本と応用
1. Columnとは？
2. Columnのプロパティ
Rowの基本と応用
1. Rowとは？
2. Rowのプロパティ
Boxの基本と応用
1. Boxとは？
2. Boxのプロパティ
Column、Row、Boxの組み合わせ
まとめ

Jetpack Composeにおけるレイアウト管理

Jetpack Composeの特徴

Jetpack Composeは、AndroidのUIを作成するための宣言型UIフレームワークです。従来のXMLベースのUI構築に比べて、Kotlinコードのみでレイアウトを記述できるため、柔軟かつ効率的にUIを作成できます。

Jetpack Composeでは、Column、Row、Boxという基本的なコンポーネントを使用してレイアウトを管理します。本記事では、それぞれの役割と活用方法について詳しく解説します。

Columnの基本と応用

Columnとは？

Columnは、子要素を縦方向（上から下）に配置するレイアウトコンポーネントです。

@Composable
fun ColumnExample() {
    Column {
        Text(text = "アイテム1")
        Text(text = "アイテム2")
        Text(text = "アイテム3")
    }
}

このコードを実行すると、テキストが縦に並びます。

Columnのプロパティ

Columnには、modifierパラメータを使用して配置やスタイルを設定できます。

@Composable
fun StyledColumnExample() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "中央揃えのテキスト1")
        Text(text = "中央揃えのテキスト2")
    }
}

fillMaxWidth()：親の最大幅に広がる
padding(16.dp)：余白を設定
verticalArrangement：縦方向の配置（Top、Center、Bottom など）
horizontalAlignment：横方向の配置（Start、CenterHorizontally、End など）

Rowの基本と応用

Rowとは？

Rowは、子要素を横方向（左から右）に配置するコンポーネントです。

@Composable
fun RowExample() {
    Row {
        Text(text = "アイテムA")
        Text(text = "アイテムB")
        Text(text = "アイテムC")
    }
}

このコードを実行すると、テキストが横に並びます。

Rowのプロパティ

Rowでもmodifierを活用することで、スタイルや配置を調整できます。

@Composable
fun StyledRowExample() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "左")
        Text(text = "中央")
        Text(text = "右")
    }
}

fillMaxWidth()：親の最大幅に広がる
padding(16.dp)：余白を設定
horizontalArrangement：横方向の配置（Start、Center、End、SpaceBetween など）
verticalAlignment：縦方向の配置（Top、CenterVertically、Bottom など）

Boxの基本と応用

Boxとは？

Boxは、子要素を重ねるためのレイアウトコンポーネントです。例えば、背景画像の上にテキストを配置する場合などに使用します。

@Composable
fun BoxExample() {
    Box {
        Image(
            painter = painterResource(id = R.drawable.sample_image),
            contentDescription = "背景画像"
        )
        Text(
            text = "重ねたテキスト",
            color = Color.White,
            modifier = Modifier.align(Alignment.Center)
        )
    }
}

Boxのプロパティ

Boxでは、modifierを活用して子要素の配置を設定できます。

@Composable
fun StyledBoxExample() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Gray)
    ) {
        Text(
            text = "中央揃えのテキスト",
            modifier = Modifier.align(Alignment.Center)
        )
    }
}

fillMaxSize()：親のサイズに広がる
background(Color.Gray)：背景色を設定
align(Alignment.Center)：中央に配置

Column、Row、Boxの組み合わせ

これらのレイアウトコンポーネントを組み合わせることで、複雑なUIを構築できます。

@Composable
fun ComplexLayout() {
    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Text(text = "左")
            Text(text = "右")
        }
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "中央のテキスト", fontSize = 24.sp)
        }
    }
}

このコードでは、Column内にRowとBoxを配置し、それぞれの特性を活かしてレイアウトを作成しています。