【Android】Jetpack Compose 入門講座 第7回「Rowレイアウト内の配置」
![](https://codeforfun.jp/wp-content/uploads/2024/05/thumb-jetpack-compose-intro.png)
はじめに
前回は Column 内の UI の配置を決めるパラメータを紹介しました。
今回は Row レイアウト内の配置を決めるパラメータを設定してみましょう。
開始コード
以下のように、Row レイアウト内にテキストが3つある状態からスタートします。
また配置が分かりやすいようにプレビュー画面のサイズを追加しています。(25行目)
1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3 Row {
4 Text(
5 text = "Hello",
6 modifier = modifier
7 .background(Color.Yellow)
8 .padding(12.dp)
9 )
10 Text(
11 text = "こんにちは",
12 modifier = modifier
13 .background(Color.Cyan)
14 .padding(12.dp)
15 )
16 Text(
17 text = "Hola",
18 modifier = modifier
19 .background(Color.Green)
20 .padding(12.dp)
21 )
22 }
23}
24
25@Preview(showBackground = true, widthDp = 320, heightDp = 200)
26@Composable
27fun GreetingPreview() {
28 MyApplicationTheme {
29 Greeting("Android")
30 }
31}
プレビューはこのようになっています。
![](https://codeforfun.jp/wp-content/uploads/2024/06/jetpack-compose-basic-7-2-1024x849.png)
HorizontalArrangement:水平方向の配置
中央に配置する
Row はレイアウト内の要素をヨコ方向に並べるレイアウトでした。
今は左上を基準に並んでいるので中央(センター)になるようにパラメータを追加します。
3行目の Column の後ろに () を追加して、4行目のパラメータを追加します。
1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3 Row(
4 horizontalArrangement = Arrangement.Center
5 ) {
6 Text(
7 text = "Hello",
8 /* 省略 */
3つのテキストが水平方向中央に配置されました。
![](https://codeforfun.jp/wp-content/uploads/2024/06/jetpack-compose-basic-7-3-1024x693.png)
いろいろな値
Center 以外にも以下の値を使用することができます。
値 | ||
---|---|---|
Arrangement.Start | 左揃え | ![]() |
Arrangement.Center | 中央揃え | ![]() |
Arrangement.End | 右揃え | ![]() |
Arrangement.SpaceAround | 左右に余白をつける | ![]() |
Arrangement.SpaceBetween | 均等に配置する(最初と最後の要素に余白なし) | ![]() |
Arrangement.SpaceEvenly | 均等に配置する(最初と最後の要素に余白あり) | ![]() |
Arrangement.spacedBy(数値.dp) | 余白のサイズを指定 | ![]() |
VerticalAlignment:垂直方向の配置
垂直方向の配置は VerticalAlignment パラメータを使って決めることができます。
4行目のコードを追加します。
1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3 Column(
4 verticalAlignment = Alignment.CenterVertically
5 ) {
6 Text(
7 text = "Hello",
8 /* 省略 */
ここでは中央に配置しましたが、他にも Top / Bottom を指定できます。
水平と垂直方向を指定する
水平方向と垂直方向の両方のパラメータを使用することもできます。
4行目で水平方向は均等に、5行目で垂直方向は中央に配置しています。
1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3 Column(
4 horizontalArrangement = Arrangement.SpaceBetween,
5 verticalAlignment = Alignment.CenterVertically
6 ) {
7 Text(
8 text = "Hello",
9 /* 省略 */
プレビューはこのようになります。
![](https://codeforfun.jp/wp-content/uploads/2024/06/jetpack-compose-basic-7-12.png)
次に行うこと
次回からは画像を追加したアプリ画面を作ってみましょう。