Jetpack Compose入門(7) 文字列を表示する

Jetpack Compose /
この記事をシェア
(6) 基本編のベースとなるプロジェクト
目次
(8) コンポーネントを装飾する

今回はJetpack Composeの文字列表示の概要を学んでいきます。文字列表示のいろいろなオプションを設定しながら、どのような見た目になるかを確認していきましょう。ソースコードは、前回紹介したベースプロジェクトのAppScreen()の中身をいろいろ置き換えて書いていくという前提で進めます。

@Composable
fun AppScreen() {
    /* 以下のソースコードは、このAppScreen()の中身だけ記載します */
}

Textコンポーネント

Jetpack Composeで文字列を表示するには、Textコンポーネントを使います。Textはandroidx.compose.materialパッケージに定義されています。このパッケージにはText以外にもたくさんのUIコンポーネントが定義されているので、UIコンポーネントを探すときにはまずこのパッケージを探してみるとよいです。

とりあえず文字列を表示してみます。引数に文字列を指定するだけですね。簡単です。

Text("Hello")

string.xmlに定義した文字列リソースを表示する場合は、stringResource()を使います。

Text(stringResource(R.string.hello))

デフォルト引数

ここで一度Text()の定義を見てみましょう。

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
): @Composable Unit

とてもたくさんの引数が定義されていることが分かります。にもかかわらず上記のようにStringを一つ引数に指定するだけで動作するのは、Kotlinのデフォルト引数の機能のおかげです。Kotlinの関数の引数は、

引数名: 型 = デフォルト値

という形で定義します。デフォルト値が定義された引数は呼び出し元で省略できます。省略された場合、関数実行時には定義したデフォルト値が適用されます。改めてTextの定義を見ると、先頭のtext以外の引数にはすべてデフォルト値が定義されています。そのため、引数を一つ指定するだけで動作させることができるというわけです。

名前付き引数

Kotlinの関数の引数にはデフォルト引数に加えてもう一つ、名前付き引数という便利な機能があります。名前付き引数を使うと、デフォルト値が指定されている引数のうち、呼び出し元で値を変更したい引数だけを設定することができます。名前付き引数の構文は以下の通りです。

関数名(引数名 = 値)

Text()にはたくさんの引数がありますが、text以外はすべてデフォルト値が定義されているので、デフォルト値以外を指定したい引数だけを指定して呼び出すことができます。例えば文字色だけを指定したい場合は、次のように書くことができます。

Text(text = "Hello", color = Color.Red)

もちろんtext一つだけを引数に指定する場合でも、名前付きで次のように書くことができます。Jetpack Composeの関数は引数が多いので、名前付きで記述するのがおすすめです。

Text(text = "Hello")

Android Studioの自動補完も働くので、Tex…と入力して出てきた候補の中からText()を選ぶと、Text(text = )まで入力されます。

文字色

さてそれでは、実際にいくつかのパラメータを設定して、どのように変化するか見ていきましょう。まずは文字色です。colorパラメータにColorクラスオブジェクトを指定します。Columnはコンポーネントを縦に並べるための関数です。Columnについては「コンポーネントを配置する」で詳しく説明します。

Column {
    Text(text = "Hello", color = Color.Red)
    Text(text = "Hello", color = Color.Blue)
    Text(text = "Hello", color = Color(0xff77ddbb))
}

フォントサイズ

文字の大きさを指定するには、fontSizeパラメータを使います。フォントサイズは数値に.spをつけて指定します。spは数値をsp (Scaled Pixels)に変換する拡張プロパティです。Int, Float, Doubleが使えます。

Column {
    Text(text = "Hello")
    Text(text = "Hello", fontSize = 10.sp)
    Text(text = "Hello", fontSize = 30f.sp)
    Text(text = "Hello", fontSize = 80.0.sp)
}

複数行文字列

文字列の行数を指定するには、maxLinesパラメータを使います。maxLinesのデフォルト値はInt.MAX_VALUEなので、何も指定しないと文字列全体が複数行にわたって表示されます。行数を指定したい場合は任意の数値を指定します。

Column {
    val story = "昔々あるところにおじいさんとおばあさんがいました。" +
            "おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。" +
            "おばあさんが川で洗濯をしていると、大きな桃がどんぶらこどんぶらこと流れてきました。"
    Text(text = story, color = Color.Red)
    Text(text = story, color = Color.Blue, maxLines = 2)
    Text(text = story, color = Color.Green, maxLines = 1)
}

ちなみに、この例ではコンポーザブル関数内でstoryという変数を定義して使っています。コンポーザブル関数も普通の関数と同じように、ローカル変数を定義して使うことができます。もちろん足し算や引き算をはじめとした各種演算も行うことができます。

まとめ

ここまででTextコンポーネントの使い方を学びました。文字色や文字サイズも変更できるようになりました。でも、背景色を設定したり、テキストエリアに枠を表示したりというように、もっと見た目を変更したいときはどうすればよいでしょうか。次回はそういった見た目の装飾を実現するModifierについて説明します。

(6) 基本編のベースとなるプロジェクト
目次
(8) コンポーネントを装飾する
この記事をシェア

関連投稿