【Android】Jetpack Compose 入門講座 第６回「Columnレイアウト内の配置」
Sara
目次
はじめに
前回はレイアウト（Column と Row）を使ってテキストをタテ・ヨコに並べました。
今回はレイアウト内のテキストの配置を決めるパラメータを紹介します。
開始コード
以下のように、Column レイアウト内にテキストが３つある状態からスタートします。
また配置が分かりやすいようにプレビュー画面のサイズを追加しています。（25行目）
1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3 Column {
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 = 240, heightDp = 240)
26@Composable
27fun GreetingPreview() {
28 MyApplicationTheme {
29 Greeting("Android")
30 }
31}
プレビューはこのようになっています。
VerticalArrangement：垂直方向の配置
中央に配置する
Column はレイアウト内の要素をタテ方向に並べるレイアウトでした。
今は左上を基準に並んでいるので中央（センター）になるようにパラメータを追加します。
３行目の Column の後ろに () を追加して、４行目のパラメータを追加します。
1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3 Column(
4 verticalArrangement = Arrangement.Center
5 ) {
6 Text(
7 text = "Hello",
8 /* 省略 */３つのテキストが垂直方向中央に配置されました。
いろいろな値
Center 以外にも以下の値を使用することができます。
| 値 | ||
|---|---|---|
| Arrangement.Top | 上揃え |  |
| Arrangement.Center | 中央揃え |  |
| Arrangement.Bottom | 下揃え |  |
| Arrangement.SpaceAround | 上下に余白をつける |  |
| Arrangement.SpaceBetween | 均等に配置する（最初と最後の要素に余白なし） |  |
| Arrangement.SpaceEvenly | 均等に配置する（最初と最後の要素に余白あり） |  |
| Arrangement.spacedBy(数値.dp) | 余白のサイズを指定 |  |
HorizontalAlignment：水平方向の配置
水平方向の配置は HorizontalAlignment パラメータを使って決めることができます。
４行目のコードを追加します。
1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3 Column(
4 horizontalAlignment = Alignment.CenterHorizontally
5 ) {
6 Text(
7 text = "Hello",
8 /* 省略 */ここでは中央に配置しましたが、他にも Start / End を指定できます。
垂直と水平方向を指定する
垂直方向と水平方向の両方のパラメータを使用することもできます。
４行目で垂直方向は均等に、５行目で水平方向は中央に配置しています。
1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3 Column(
4 verticalArrangement = Arrangement.SpaceBetween,
5 horizontalAlignment = Alignment.CenterHorizontally
6 ) {
7 Text(
8 text = "Hello",
9 /* 省略 */プレビューはこのようになります。
次に行うこと
次回は同じように Row レイアウトの配置について紹介します。
講座の最新情報はこちら
Subscribe
0 Comments
古い順
ABOUT ME
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました！
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました！
