このページは Cloud Translation API によって翻訳されました。

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

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 内での Brush 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 =.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 修飾子。

あなたへのおすすめ

注: JavaScript がオフになっている場合はリンクテキストが表示されます
段落にスタイルを適用する
Compose のマテリアルデザイン 2
グラフィック修飾子