Zenn
✍️

【Jetpack Compose】Textをカスタマイズする

2024/12/24に公開
Android
Kotlin
Jetpack Compose
text
tech

初めに

今回は Jetpack Compose で Text をカスタマイズする方法についてまとめてみたいと思います。
筆者は普段 Flutter をメインで扱っているため、「Flutter ではこのように実装するが Jetpack Compose ではどのように実装すれば良いか？」という場面がよくあります。
今回は特に Text について取り上げて、より詳しくみていきたいと思います。

記事の対象者

  • Jetpack Composer 初学者

目的

今回は上記の通り、 Jetpack Compose における Text の扱い方についてまとめていきたいと思います。実装にあたっては、 Flutter との実装方法と並べてみていきたいと思います。

実装

Jetpack Compose の Text には以下のようなプロパティがあります。
それぞれ詳しく見ていきます。

  1. text
  2. color
  3. fontSize
  4. fontStyle
  5. fontWeight
  6. fontFamily
  7. letterSpacing
  8. textDecoration
  9. textAlign
  10. lineHeight
  11. maxLines
  12. overflow
  13. softWrap
  14. style
  15. 一文字ずつのスタイル指定

1. text

text では テキストとして表示する文字列 を指定することができます。
この Text では text プロパティのみが必須のプロパティとなっています。
以下のように指定することでテキストが表示できます。

Text(text = "Hello, Jetpack Compose!")

なお、以下のように String のリソースから呼び出して表示させることもできます。

Text(stringResource(R.string.greeting))

この場合は res/values/strings.xml のファイルに以下のようにテキストを追加しておくことで呼び出せるようになります。

<resources>
    <string name="greeting">Hello, Jetpack Compose!</string>
</resources>

なお、Flutter の場合は以下のようなコードになります。

Text('Hello, Jetpack Compose!'),

2. color

color では フォントカラー を設定することができます。
以下のようなコードで実装することができます。

Text(text = "Hello, Jetpack Compose!", color = Color.Blue)

なお、Flutter の場合は以下のようなコードになります。
この辺りは Jetpack Compose の方が短く書けそうです。

Text(
  'Hello, Jetpack Compose!',
  style: TextStyle(
    color: Colors.blue,
  ),
),

3. fontSize：グリフのサイズを指定

fontSize では フォントの大きさ を指定することができます。
以下のようなコードで実装することができます。

なお、テキストのサイズには sp を使用します。
各種のピクセル密度をサポートする のドキュメントによると、 sp を用いると、ユーザーの好みのフォントサイズの設定によって、サイズが変更されるようになるようです。「scale-independent pixel」と呼ばれます。

Text(text = "Hello, Jetpack Compose!", fontSize = 30.sp)

以下のように、通常よりもフォントが大きくなっていることがわかります。

なお、 Flutter の場合は以下のようなコードになります。

Text(
  'Hello, Jetpack Compose!',
  style: TextStyle(
    fontSize: 30,
  ),
),

4. fontStyle：斜体または通常。書体の指定

fontStyle では、テキストの書体 を指定できます。具体的には、斜体に設定することなどが可能です。
以下のようなコードで実装することができます。

Text(
    text = "Hello, Jetpack Compose!",
    fontSize = 30.sp,
    fontStyle = FontStyle.Italic,
)

以下のように斜体になっていることがわかります。

なお、 Flutter の場合は以下のようなコードになります。

Text(
  'Hello, Jetpack Compose!',
  style: TextStyle(
    fontSize: 30,
    fontStyle: FontStyle.italic,
  ),
),

5. fontWeight

fontWeight では フォントの太さ を指定できます。
以下のようなコードで実装することができます。

Text(
    text = "Hello, Jetpack Compose!",
    fontSize = 30.sp,
    fontWeight = FontWeight.Bold
)

以下のように通常よりもフォントが太くなっていることがわかります。

なお、 Flutter の場合は以下のようなコードになります。

Text(
  'Hello, Jetpack Compose!',
  style: TextStyle(
    fontSize: 30,
    fontWeight: FontWeight.bold,
  ),
),

6. fontFamily

fontFamily では テキストのフォントの種類 を指定することができます。
以下のようなコードで実装することができます。このコードではすでに用意されているFontFamily.Serif を適用させています。

Text(
    text = "Hello, Jetpack Compose!",
    fontSize = 30.sp,
    fontFamily = FontFamily.Serif
)

なお、 Flutter の場合は以下のようなコードになります。
Flutter では基本的にフォントをダウンロードして、その名前を指定する形で使用できます。

Text(
  'Hello, Jetpack Compose!',
  style: TextStyle(
    fontSize: 30,
    fontFamily: 'Serif',
  ),
),

7. letterSpacing

letterSpacing では 文字の間のスペース を調整できます。
以下のようなコードで実装することができます。

Text(
    text = "Hello, Jetpack Compose!",
    fontSize = 30.sp,
    letterSpacing = 3.sp
)

文字の間隔が広がっていることがわかります。

なお、 Flutter の場合は以下のようなコードになります。

Text(
  'Hello, Jetpack Compose!',
  style: TextStyle(
    fontSize: 30,
    letterSpacing: 3
  ),
),

8. textDecoration

textDecoration では テキストへの装飾を追加 することができます。
以下のようなコードで下線を実装することができます。なお、 TextDecoration.LineThrough を指定すると打ち消し線を表示することができます。

Text(
    text = "Hello, Jetpack Compose!",
    fontSize = 30.sp,
    textDecoration = TextDecoration.Underline
)

以下では下線が追加されていることがわかります。

なお、 Flutter の場合は以下のようなコードになります。

Text(
  'Hello, Jetpack Compose!',
  style: TextStyle(
    fontSize: 30,
    decoration: TextDecoration.underline,
  ),
),

9. textAlign

textAlign では テキストを寄せる方向 を調整することができます。
以下のようなコードでは、テキストを左側に寄せる実装することができます。

Text(
    text = "Hello, Jetpack Compose!\nHello World !",
    fontSize = 30.sp,
    textAlign = TextAlign.Left
)

なお、 Flutter の場合は以下のようなコードになります。

Text(
  'Hello, Jetpack Compose!',
  style: TextStyle(
    fontSize: 30,
  ),
  textAlign: TextAlign.left,
),

10. lineHeight：テキストボックスの高さを指定する

lineHeight では テキストの領域の高さ を指定することができます。
以下のコードでは、テキストの領域の高さを 50.sp に指定しています。フォントの大きさが 30.sp であるため、上下に 10.sp ずつ余裕を持って表示させるようにしています。

Column {
    Text("Sample")
    Text(
        text = "Hello, Jetpack Compose!",
        fontSize = 30.sp,
        lineHeight = 50.sp
    )
    Text("Sample")
}

以下のように、テキストの高さを十分に確保して、間隔を開けて表示できます。

なお、 Flutter の場合は以下のようなコードになります。
Flutter の場合は、行間の高さ　＝　FontSize　* height として計算されます。
したがって、 height は行間の高さを直接設定するのではなく、フォントサイズの何倍にすべきかで指定することができます。 Jetpack Compose と同様に height: 50 とすると、フォントサイズの 50倍が行間の高さとなり、オーバーフローが起きるので、注意が必要です。

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('Sample'),
    Text(
      'Hello, Jetpack Compose!',
      style: TextStyle(
        fontSize: 30,
        height: 2,
      ),
    ),
    Text('Sample'),
  ],
),

11. maxLines：テキスト表示の最大行数

maxLines では テキストを表示させる最大行数 を設定できます。
後述する overflow と合わせて使用されることが多いかと思います。

以下のようなコードで、テキストの表示させる行数を1行に制限することができます。

Text(
    text = "Too long long long long long long long",
    fontSize = 30.sp,
    maxLines = 1,
)

なお、 Flutter の場合は以下のようなコードになります。

Text(
  'Too long long long long long long long',
  style: TextStyle(
    fontSize: 30,
  ),
  maxLines: 1,
),

12. overflow

overflow では、テキストが表示できなくなった際の対処方法 を設定できます。
以下のようなコードで、1行で表示できなくなった場合の挙動を実装することができます。

Text(
    text = "Too long long long long long long long",
    fontSize = 30.sp,
    maxLines = 1,
    overflow = TextOverflow.Ellipsis
)

以下のように、表示できなかったテキストが、「 ... 」と表示されていることがわかります。

なお、 Flutter の場合は以下のようなコードになります。

Text(
  'Too long long long long long long long',
  style: TextStyle(
    fontSize: 30,
  ),
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
),

13. softWrap

softWrap では 改行するかどうか を指定することができます。
以下のようなコードでは、 maxLine などを指定しなくても、改行しないように指定することができます。

Text(
    text = "Too long long long long long long long",
    fontSize = 30.sp,
    softWrap = false
)

以下のように改行されずに見切れていることがわかります。

なお、 Flutter の場合は以下のようなコードになります。

Text(
  'Too long long long long long long long',
  style: TextStyle(
    fontSize: 30,
  ),
  softWrap: false,
),

14. style

style では テキストのスタイル を指定することができます。
style には TextStyle を割り当ててスタイルの指定を行います。
TextStyle のコードは以下のようになっており、今回紹介した以外のカスタマイズが複数可能です。

constructor TextStyle(
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontWeight: FontWeight? = null,
    fontStyle: FontStyle? = null,
    fontSynthesis: FontSynthesis? = null,
    fontFamily: FontFamily? = null,
    fontFeatureSettings: String? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    baselineShift: BaselineShift? = null,
    textGeometricTransform: TextGeometricTransform? = null,
    localeList: LocaleList? = null,
    background: Color = Color.Unspecified,
    textDecoration: TextDecoration? = null,
    shadow: Shadow? = null,
    drawStyle: DrawStyle? = null,
    textAlign: TextAlign? = null,
    textDirection: TextDirection? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    textIndent: TextIndent? = null,
    platformStyle: PlatformTextStyle? = null,
    lineHeightStyle: LineHeightStyle? = null,
    lineBreak: LineBreak? = null,
    hyphens: Hyphens? = null,
    textMotion: TextMotion? = null
)

15. 一文字ずつのスタイル指定

最後に、一文字ずつスタイル指定を変更する場合は buildAnnotatedString で指定できます。

Text(
    buildAnnotatedString {
        withStyle(
            style = SpanStyle(
                color = Color.Green,
                fontSize = 30.sp,
            )
        ) {
            append("H")
        }
        append("ello ")

        withStyle(
            style = SpanStyle(
                color = Color.Green,
                fontSize = 30.sp,
            )
        ) {
            append("J")
        }
        append("etpack Compose!")
    }
)

以下のように、特定の文字だけにスタイルを当てることができるようになります。

なお、 Flutter の場合は以下のようなコードになります。

Text.rich(
  TextSpan(
    children: [
      TextSpan(
        text: 'H',
        style: TextStyle(
          fontSize: 30,
          color: Colors.green,
        ),
      ),
      TextSpan(text: 'ello '),
      TextSpan(
        text: 'J',
        style: TextStyle(
          fontSize: 30,
          color: Colors.green,
        ),
      ),
      TextSpan(text: 'etpack Compose'),
    ],
  ),
),

以上です。

まとめ

最後まで読んでいただいてありがとうございました。

今回はテキストのカスタマイズ方法についてまとめました。
Flutter の書き方とかなり似ている部分もあることがわかりました。
どう書けば良いか迷った時の備忘録として使っていただければと思います。

誤っている点やもっと良い書き方があればご指摘いただければ幸いです。

参考

https://developer.android.com/develop/ui/compose/text/style-text?hl=ja

https://techbooster.org/android/ui/18458/

Discussion