2024.06.05 2024.08.19

【Android】Jetpack Compose 入門講座第３回「テキストのアレンジ」

Sara

はじめに
テキストのアレンジ
次に行うこと
- 講座の最新情報はこちら

はじめに

現在 Hello Android! というテキストが表示されています。

Jetpack Compose のコードの書き方に慣れるために、今回はテキストの色やサイズを変更してみましょう。

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

テキストのアレンジ

文字の色を変える

まずは文字の色を赤くしてみましょう。

５行目のコードを追加します。

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
        Text(
            text = "Hello $name!",
            color = Color.Red,
            modifier = modifier
        )
}

右側のプレビューが更新されて、文字が赤くなりましたか？

プレビューは自動的に更新される設定になっていますが、更新されない場合は右上に Out of date と表示されるので緑色のマークをクリックします。

Text 関数の確認

ここでは color = “Color.Red” と書きましたが、これをパラメータと言います。

color 以外にも様々なパラメータが用意されていて、これを使って見た目や配置を整えていきます。

Text 関数にはどのようなパラメータがあるか調べてみましょう。

Windows の方は Ctrl キー、Mac の方は command キーを押しながら、Text の文字列をクリックしてください。

Text.kt ファイルに書いてある Text 関数が表示されました。

color 以外にもサイズ・スタイル・種類など、多くのパラメータが用意されていることがわかります。

さらにカスタマイズする

他のパラメータも使ってみましょう。

６〜８行目のコードを追加します。６行目 .sp の部分が赤くエラーになってしまう場合は、一度コードを消して再度書いてみてください（それでもダメな場合は後述あり）。

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
        Text(
            text = "Hello $name!",
            color = Color.Red,
            fontSize = 28.sp,
            fontStyle = FontStyle.Italic,
            fontWeight = FontWeight.ExtraBold,
            modifier = modifier
        )
}

このような画面になったでしょうか？