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

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 で高度なスタイル設定を有効にする

より高度なテキスト スタイル設定を有効にするには、TextStyle と SpanStyle で Brush API を使用します。通常は 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 =.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 のアルファ パラメータと linearGradient を使用して、テキストスパンに不透明度を追加します。

参考情報

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

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

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

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

@OptIn(ExperimentalFoundationApi::class)
@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 修飾子。