このページは 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

テキストにリンクを含む HTML を表示する

AnnotatedString.fromHtml() を使用すると、Jetpack Compose アプリケーションでクリック可能なリンクを含む HTML 形式のテキストを表示できます。この関数は、HTML タグを含む文字列を AnnotatedString に変換し、スタイル設定とリンク処理を可能にします。

例: スタイルの設定されたリンクを含む HTML

このスニペットは、リンク付きの HTML 形式のテキストをレンダリングし、リンクに特定のスタイルを適用します。

@Composable
fun AnnotatedHtmlStringWithLink(
    modifier: Modifier = Modifier,
    htmlText: String = """
       <h1>Jetpack Compose</h1>
       <p>
           Build <b>better apps</b> faster with <a href="https://www.android.com">Jetpack Compose</a>
       </p>
    """.trimIndent()
) {
    Text(
        AnnotatedString.fromHtml(
            htmlText,
            linkStyles = TextLinkStyles(
                style = SpanStyle(
                    textDecoration = TextDecoration.Underline,
                    fontStyle = FontStyle.Italic,
                    color = Color.Blue
                )
            )
        ),
        modifier
    )
}HtmlStyling.kt

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

AnnotatedString.fromHtml() は htmlText 文字列を AnnotatedString に変換します。linkStyles パラメータは、リンクの外観をカスタマイズします。
TextLinkStyles は、HTML 内のリンクのスタイルを定義します。SpanStyle は、リンクのテキスト装飾、フォントスタイル、色を設定します。
Text コンポーザブルは、結果の AnnotatedString を表示します。

結果

このスニペットでは、「Jetpack Compose」がクリック可能なリンクとして有効になり、青色で下線付きの斜体でスタイル設定されます。

H1 見出し「Jetpack Compose」の後に「Build better apps with Jetpack Compose」が続きます。ここで、Jetpack Compose は青色、下線、斜体でスタイル設定されたクリック可能なリンクです。 — **図 2.** 見出しと段落。段落内の「Jetpack Compose」はクリック可能なスタイル付きのリンクです。

`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

**図 3.** 定義された色のリストで 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

Text のスタイルとして 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` を使用して、テキストの範囲に不透明度を追加します。

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

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
グラフィック修飾子