テキストの一部にスタイルを設定する

テキストの一部にスタイルを適用すると、読みやすさを高め、ユーザー エクスペリエンスを向上させ、色やフォントを使用して創造性を高めることができます。

バージョンの互換性

この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。

依存関係

テキストの一部にスタイルを設定する

次のコードは、「H」に青、「W」に赤、残りのテキストに黒を使用して、「Hello World」という文字列を表示します。1 つの Text コンポーザブル内に異なるスタイルを設定するには、次のコードを使用します。

@Composable
fun MultipleStylesInText() {
    Text(
        buildAnnotatedString {
            withStyle(style = SpanStyle(color = Color.Blue)) {
                append("H")
            }
            append("ello ")

            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
                append("W")
            }
            append("orld")
        }
    )
}

コードに関する主なポイント

  • AnnotatedString 文字列を返す buildAnnotatedString を使用して、テキスト内に異なるスタイルを設定します。
  • テキストの一部に SpanStyle を使用してスタイル設定します。これは、文字レベルのスタイル設定を可能にする構成です。

結果

 複数のスタイルの Hello World テキスト
図 1. 複数のスタイルが適用された 1 行のテキスト。

このガイドを含むコレクション

このガイドは、Android 開発の幅広い目標を網羅する、厳選されたクイックガイド コレクションの一部です。

テキストは UI の主要な構成要素です。アプリでテキストを表示して優れたユーザー エクスペリエンスを提供するさまざまな方法を学びます。

ご質問やフィードバックがある場合

よくある質問のページでクイックガイドをご覧になるか、お問い合わせフォームからご意見をお寄せください。