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

Text コンポーザブルには、コンテンツのスタイル設定を行うためのオプションのパラメータが複数用意されています。以下に、テキストに関する最も一般的なユースケースに対応するパラメータを示します。 Text のすべてのパラメータについては、Compose Text ソースコードをご覧ください。

これらのパラメータを設定すると、テキスト値全体にスタイルが適用されます。同じ行や段落内に複数のスタイルを適用する必要がある場合は、複数のインライン スタイルのセクションをご覧ください。

一般的なテキストのスタイル設定

以下のセクションでは、テキストのスタイルを設定する一般的な方法について説明します。

テキストの色を変更する

@Composable
fun BlueText() {
    Text("Hello World", color = Color.Blue)
}
TextSnippets.kt

単語

文字サイズを変更する

@Composable
fun BigText() {
    Text("Hello World", fontSize = 30.sp)
}
TextSnippets.kt

キーワード

テキストを斜体にする

テキストを斜体にするには fontStyle パラメータを使用します（または別の FontStyle を設定します）。

@Composable
fun ItalicText() {
    Text("Hello World", fontStyle = FontStyle.Italic)
}
TextSnippets.kt

キーワード

テキストを太字にする

テキストを太字にするには、fontWeight パラメータを使用します（または別の FontWeight を設定します）。

@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}
TextSnippets.kt

単語

シャドウを追加

style パラメータを使用すると、TextStyle タイプのオブジェクトを設定できます。 複数のパラメータ（シャドウなど）を構成できます。 Shadow は、シャドウの色、オフセット、Text に対するシャドウの相対位置、ぼかしの程度を表すぼかし半径を受け取ります。

@Composable
fun TextShadow() {
    val offset = Offset(5.0f, 10.0f)
    Text(
        text = "Hello world!",
        style = TextStyle(
            fontSize = 24.sp,
            shadow = Shadow(
                color = Color.Blue, offset = offset, blurRadius = 3f
            )
        )
    )
}
TextSnippets.kt

単語

テキストに複数のスタイルを追加する

同じ Text 内で異なるスタイルを設定するには コンポーザブルの場合は、AnnotatedString を使用します。 任意のアノテーションのスタイルでアノテーションを付けられる文字列。

AnnotatedString は、以下を含むデータクラスです。

  • Text 値
  • SpanStyleRange の List（テキスト値内の位置範囲を使用したインライン スタイル設定と同等です）
  • ParagraphStyleRange の List（テキストの配置、テキスト方向、行の高さ、テキストのインデント スタイルを指定します）

TextStyle は、 Text コンポーザブルですが、SpanStyle は および ParagraphStyle AnnotatedString で使用します。複数のスタイルについて詳しくは、 段落で複数のスタイルを追加するをご覧ください。

AnnotatedString にはタイプセーフ ビルダー buildAnnotatedString を簡単に作成できるようになりました。

@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")
        }
    )
}
TextSnippets.kt

キーワード

Brush で高度なスタイル設定を有効にする

より高度なテキスト スタイルを有効にするには、Brush API を TextStyle と SpanStyle とともに使用します。通常は TextStyle または SpanStyle を使用する代わりに、Brush も使用できるようになりました。

テキストのスタイル設定にブラシを使用する

TextStyle 内で組み込みブラシを使用してテキストを設定します。たとえば、 テキストに linearGradient ブラシを次のように設定できます。

val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/)

Text(
    text = text,
    style = TextStyle(
        brush = Brush.linearGradient(
            colors = gradientColors
        )
    )
)
TextSnippets.kt

定義された色のリストで Brush API の `linearGradient` 関数を使用する。
図 2. 定義された色のリストを使用して Brush API の linearGradient 関数を使用する。

このカラーパターンやスタイルに限定されません。ハイライト表示の簡単な例を示しましたが、組み込みのブラシや SolidColor を使用してテキストを強調することもできます。

統合

Brush は TextStyle と SpanStyle の両方と一緒に使用できるため、 TextField および buildAnnotatedString はシームレスに統合されます。

TextField 内でブラシ API を使用する方法について詳しくは、以下をご覧ください。 Brush API による入力のスタイルの設定

SpanStyle を使用した追加のスタイル設定

テキストの範囲にブラシを適用する

テキストの一部にのみブラシを適用するには、 buildAnnotatedString と SpanStyle API、およびブラシ 勾配を選択できます

Text(
    text = buildAnnotatedString {
        append("Do not allow people to dim your shine\n")
        withStyle(
            SpanStyle(
                brush = Brush.linearGradient(
                    colors = rainbowColors
                )
            )
        ) {
            append("because they are blinded.")
        }
        append("\nTell them to put some sunglasses on.")
    }
)
TextSnippets.kt

テキストのスタイルとして linearGradient でデフォルトのブラシを使用する。
図 4. Text のスタイルとしてデフォルトのブラシ linearGradient を使用する。
テキストスパンの不透明度

特定のテキスト範囲の不透明度を調整するには、SpanStyle のオプションの alpha パラメータを使用します。同じブラシを 両方の部分に適用し、対応するスパンの alpha パラメータを変更する必要があります。 コードサンプルでは、テキストの最初のスパンが半透明度で表示されます （alpha =.5f）、2 番目の要素は完全な不透明度（alpha = 1f）で表示されます。

val brush = Brush.linearGradient(colors = rainbowColors)

buildAnnotatedString {
    withStyle(
        SpanStyle(
            brush = brush, alpha = .5f
        )
    ) {
        append("Text in ")
    }
    withStyle(
        SpanStyle(
            brush = brush, alpha = 1f
        )
    ) {
        append("Compose ❤️")
    }
}
TextSnippets.kt

buildAnnotatedString と SpanStyle の alpha パラメータと linearGradient を使用して、テキストの範囲に不透明度を追加します。
図 5. buildAnnotatedString と SpanStyle の alpha パラメータと linearGradient を使用して、テキストのスパンに不透明度を追加する。

参考情報

その他のカスタマイズの例については、Compose テキストの色付けのブラッシングに関するブログ投稿をご覧ください。Brush を Animations API と統合する方法について詳しくは、Compose でブラシテキストの色をアニメーション化するをご覧ください。

テキストにマーキー効果を適用する

任意のコンポーザブルに basicMarquee 修飾子を適用すると、アニメーション化されたスクロール効果を生成できます。コンテンツの幅が広すぎて使用可能な制約内に収まらない場合に、マーキー効果が発生します。basicMarquee にはデフォルトで 特定の設定（速度や初期遅延など）は設定されますが、 パラメータを変更して効果をカスタマイズします。

次のスニペットは、Text コンポーザブルに基本的なマーキー効果を実装しています。

@Composable
fun BasicMarqueeSample() {
    // Marquee only animates when the content doesn't fit in the max width.
    Column(Modifier.width(400.dp)) {
        Text(
            "Learn about why it's great to use Jetpack Compose",
            modifier = Modifier.basicMarquee(),
            fontSize = 50.sp
        )
    }
}
TextSnippets.kt

図 6. テキストに適用された basicMarquee 修飾子。