Kotlin 〜垂直方向と水平方向の配置〜

Jetpack Composeを使用してボタンを水平方向や垂直方向に配置する際、少し複雑だったためこちらの記事でまとめています。

どのように配置を制御するのか？

Jetpack Composeを使用してボタンを水平方向や垂直方向に配置するには、RowとColumnコンポーザブルを使用する。これらは子要素を指定した方向に並べることができる

例えば、このようなコードを実装することで下記のようなボタン配置となる。

@Composable
fun CombinedButtonLayout() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceEvenly
    ) {
        // 水平方向のボタン配置
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            Button(onClick = { /* アクション */ }) { Text("左") }
            Button(onClick = { /* アクション */ }) { Text("中央") }
            Button(onClick = { /* アクション */ }) { Text("右") }
        }
        
        // 垂直方向のボタン配置
        Column(
            modifier = Modifier.align(Alignment.CenterHorizontally),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Button(onClick = { /* アクション */ }) { Text("上") }
            Button(onClick = { /* アクション */ }) { Text("中") }
            Button(onClick = { /* アクション */ }) { Text("下") }
        }
    }
}

基本要素を知る

RowやColumn、Arrangement、Alignmentの使い方がピンとこなく、使用するのに苦戦したため1つ1つ分解して整理をします。

RowとColumn

• Rowを使用することで子要素を「横」に並べる
• Columnを使用することで子要素を「縦」に並べる

Excelなどでは、縦がRow、横がColumnで指定するため注意です

主軸と交差軸

主軸とは
要素が並ぶ方向のこと

Rowの場合：横方向
Columnの場合：縦方向

交差軸とは
主軸に対して垂直な方向のこと

Rowの場合：縦方向
Columnの場合：横方向

Arrangement（配置）

主軸に沿って、複数の要素をどのように配置するかを決める

要素	説明
Start	始点に寄せる
Center	中央に配置
End	終点に寄せる
SpaceBetween	両端に配置し、残りの空間を均等に配置
SpaceAround	各要素の両側に均等なスペースを配置
SpaceEvenly	すべての要素とエッジの間に均等なスペースを配置

Alignment（整列）

交差軸に沿って、個々の要素をどのように整列させるかを決める
RowとColumnの場合で指定する要素が異なるため注意する

（Columnの場合 / Rowの場合）

要素	説明
Start / Top	要素を始点（左 / 上）に整列
CenterHorizontally / CenterVertically	要素を水平/垂直方向の中央に整列
End / Bottom	要素を終了位置（右/下）に整列