このページは 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` で高度なスタイル設定を有効にする

より高度なテキストのスタイル設定を有効にするには、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 内で 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` のアルファパラメータ、`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 修飾子。

あなたへのおすすめ

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