Column コンポーザブル は、縦方向にUI部品を配置するために使います。
目次
Column Composableを使うための準備
Column composableを使用するために、androidx.compose.foundation.layout.Column
をインポートします。
import androidx.compose.foundation.layout.Column
Column Composableの使い方
Column{
子Composable1 // TextやButtonなど
子Composable2
子Composable3
・・・
}
簡単な例として、テキストを縦にいくつか並べてみましょう。
@Composable
fun MyColumn() {
Column {
Text(text = "Item 1")
Text(text = "Item 2")
Text(text = "Item 3")
}
}
![](https://seeds-digital.com/wp-content/uploads/2024/03/ca309fc22604ebbb56227eaa47a2bc43.png)
このようにColumの中にUI部品を追加していくだけで、それぞれが縦1列に並びます。
modifierを使ってスタイルを調整する
背景色や余白などのスタイルの設定にはmodifier
を使います。
背景色を定義
@Composable
fun MyColumn() {
Column(
modifier = Modifier.background(Color.Yellow) // 背景色を黄色に
) {
Text(text = "Hello,")
Text(text = "Android!")
}
}
![](https://seeds-digital.com/wp-content/uploads/2024/03/efbe4dd14b8a3ea4d97ed5d25cc3cb0c.png)
余白を定義
@Composable
fun MyColumn() {
Column(
modifier = Modifier.padding(20.dp) // 余白を追加
) {
Text(text = "Hello,")
Text(text = "Android!")
}
}
![](https://seeds-digital.com/wp-content/uploads/2024/03/2a39965162d0e6688d748b3edbe5244b.png)
Column内の要素の配置方法を変更する
要素を水平方向に中央に寄せる
デフォルトではColum内の要素は左寄せになっています。
これを中央に寄せるには引数horizontalAlignment
にArrangement.CenterHorizontally
を指定します。
Column(
modifier = Modifier.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Text(text = "Hello,")
Text(text = "world!")
}
![](https://seeds-digital.com/wp-content/uploads/2024/03/1a81fedf1800d2b70b9a5f555666ed69.png)
右側に寄せたい場合は、Arrangement.End
を指定するとできます。
![](https://seeds-digital.com/wp-content/uploads/2024/03/0dedc6e671a40468c56454221be5edef.png)
要素を垂直方向に中央に寄せる
垂直方向に中央に寄せるには引数verticalArrangement
にArrangement.Center
を指定します。
@Composable
fun MyColumn() {
Column(
verticalArrangement = Arrangement.Center,
) {
Text(text = "Hello,")
Text(text = "Android!")
}
}
![](https://seeds-digital.com/wp-content/uploads/2024/03/ff97264b2d45f7c9fee194d16a900dfe.png)
他にも、Arrangement.Top
、Arrangement.Bottom
、Arrangement.SpaceEvenly
など色々あるので、実際に試してどう動くのか見てみてください。
Comment