2024.06.07 2024.06.11

【Android】Jetpack Compose 入門講座第５回「テキストを並べる」

Sara

はじめに
テキストを追加する
レイアウトを使う
次に行うこと
- 講座の最新情報はこちら

はじめに

ここまでは１つのテキストしかありませんでしたが、アプリ画面には複数のテキストや画像、ボタンが並ぶのが通常です。

まずは２つのテキストを並べてみましょう。

>> ここまでの記事はこちら

テキストを追加する

まずは Text を１つ追加します。現在 Hello Android! となっている箇所も Hello だけに変更します。

４行目のコードを変更して、７〜９行目のコードを追加します。

1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3    Text(
4        text = "Hello",
5        modifier = modifier.background(Color.Yellow).padding(48.dp)
6    )
7    Text(
8        text = "こんにちは",
9        modifier = modifier.background(Color.Cyan)
10    )
11}

プレビューを確認すると「こんにちは」が左上に配置されました。

何も設定をしていないと、このように左上に揃えて UI が配置されていきます。

２つのテキストが重ないように修正してみましょう。

レイアウトを使う

UI を並べるにはレイアウトを使います。

レイアウトには大きく３種類あって、Column はタテ並び、Row はヨコ並び、Box は UI を重ねるときに使います。

Column：タテに並べる

まずは Column を使ってテキストをタテに並べてみましょう。

Text 関数を使っている39〜46行目のコードを選択した状態にすると黄色い豆電球のマークが出てくるのでクリック、Surround with widget を選択します。

Surround with Column を選択します。

２つの Text が Column で囲まれてタテ並びになりました。

Column：ヨコに並べる

Column を Row に変更して横並びにしてみましょう。（３行目）

1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3    Row {
4        Text(
5            text = "Hello",
6            /* 省略 */

テキストが横並びになりました。

Box：重ねる

次は Box に変更してみましょう。（３行目）

1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3    Box {
4        Text(
5            text = "Hello",
6            /* 省略 */