Stiltext

Die zusammensetzbare Funktion Text hat mehrere optionale Parameter, mit denen Sie den Inhalt gestalten können. Im Folgenden sind Parameter aufgeführt, die die häufigsten Anwendungsfälle für Text abdecken. Alle Parameter von Text finden Sie im Compose Text Quellcode.

Wenn Sie einen dieser Parameter festlegen, wird der Stil auf den gesamten Textwert angewendet. Wenn Sie mehrere Stile in derselben Zeile oder in Absätzen anwenden müssen, lesen Sie den Abschnitt zu mehreren Inline Stilen.

Häufige Textstile

In den folgenden Abschnitten werden gängige Möglichkeiten zum Gestalten von Text beschrieben.

Schriftfarbe ändern

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

Der Text

Schriftgröße ändern

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

Der Text

Text kursiv formatieren

Verwenden Sie den fontStyle Parameter, um Text kursiv zu formatieren oder einen anderen FontStyle festzulegen.

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

Der Text

Text fett formatieren

Verwenden Sie den fontWeight Parameter, um Text in Fettdruck zu formatieren oder einen anderen FontWeight festzulegen.

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

Der Text

Schatten hinzufügen

Mit dem style Parameter können Sie ein Objekt vom Typ TextStyle festlegen und mehrere Parameter konfigurieren, z. B. Schatten. Shadow erhält eine Farbe für den Schatten, den Offset oder die Position in Bezug auf den Text und den Unschärferadius, der angibt, wie verschwommen der Schatten aussieht.

@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

Der Text

Mehrere Stile in Text hinzufügen

Wenn Sie verschiedene Stile innerhalb derselben Text zusammensetzbaren Funktion verwenden möchten, verwenden Sie AnnotatedString, einen String, der mit Stilen beliebiger Annotationen versehen werden kann.

AnnotatedString ist eine Datenklasse, die Folgendes enthält:

  • Einen Text-Wert
  • Eine List von SpanStyleRange, die der Inline-Formatierung mit Positionsbereich innerhalb des Textwerts entspricht
  • Eine List von ParagraphStyleRange, die die Textausrichtung, die Textrichtung, die Zeilenhöhe und die Formatierung des Texteinzugs angibt

TextStyle wird in der zusammensetzbaren Funktion Text verwendet, während SpanStyle und ParagraphStyle in AnnotatedString verwendet werden. Weitere Informationen zu mehreren Stilen in einem Absatz finden Sie unter Mehrere Stile in einem Absatz hinzufügen.

AnnotatedString hat einen typsicheren Builder, um die Erstellung zu erleichtern: 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

Der Text

HTML mit Links in Text anzeigen

Verwenden Sie AnnotatedString.fromHtml(), um HTML-formatierten Text mit anklickbaren Links in Ihrer Jetpack Compose-Anwendung anzuzeigen. Diese Funktion konvertiert einen String mit HTML-Tags in einen AnnotatedString, der Formatierung und Link-Verarbeitung ermöglicht.

Beispiel: HTML mit formatiertem Link

Dieses Snippet rendert HTML-formatierten Text mit einem Link und wendet eine bestimmte Formatierung auf den Link an:

@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

Wichtige Punkte zum Code

  • AnnotatedString.fromHtml() konvertiert den htmlText String in ein AnnotatedString. Mit dem Parameter linkStyles wird das Erscheinungsbild des Links angepasst.

  • TextLinkStyles definiert den Stil für Links im HTML-Code. SpanStyle legt die Textdekoration, den Schriftstil und die Farbe für die Links fest.

  • Die Text zusammensetzbare Funktion zeigt den resultierenden AnnotatedString an.

Ergebnis

Dieses Snippet aktiviert „Jetpack Compose“ als anklickbaren Link, der blau, unterstrichen und kursiv formatiert ist:

Eine H1-Überschrift „Jetpack Compose“ gefolgt von „Bessere Apps mit Jetpack Compose erstellen“, wobei „Jetpack Compose“ ein klickbarer Link ist, der blau, unterstrichen und kursiv formatiert ist.
Abbildung 2. Eine Überschrift und ein Absatz, wobei „Jetpack Compose“ im Absatz ein anklickbarer, formatierter Link ist.

Erweiterte Formatierung mit Brush aktivieren

Für eine erweiterte Textformatierung können Sie die Brush API mit TextStyle und SpanStyle verwenden. An jeder Stelle, an der Sie normalerweise TextStyle oder SpanStyle verwenden würden, können Sie jetzt auch Brush verwenden.

Pinsel für die Textformatierung verwenden

Konfigurieren Sie Ihren Text mit einem integrierten Pinsel in TextStyle. Sie können beispielsweise einen linearGradient-Pinsel wie folgt für Ihren Text konfigurieren:

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

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

Verwendung der Funktion „linearGradient“ der Brush API mit einer definierten Liste von Farben.
Abbildung 3. Verwendung der Funktion linearGradient der Brush API mit einer definierten Liste von Farben.

Sie sind nicht auf dieses bestimmte Farbschema oder diesen Stil der Farbgebung beschränkt. Wir haben ein einfaches Beispiel zur Hervorhebung bereitgestellt. Sie können aber auch einen der integrierten Pinsel oder einfach nur eine SolidColor verwenden, um Ihren Text zu verbessern.

Integrationen

Da Sie Brush sowohl mit TextStyle als auch mit SpanStyle verwenden können, ist die Integration mit TextField und buildAnnotatedString nahtlos.

Weitere Informationen zur Verwendung der Brush API in einem TextField finden Sie unter Eingabe mit der Brush API gestalten.

Zusätzliche Formatierung mit SpanStyle

Pinsel auf einen Textbereich anwenden

Wenn Sie einen Pinsel nur auf Teile Ihres Textes anwenden möchten, verwenden Sie buildAnnotatedString und die SpanStyle API zusammen mit dem gewünschten Pinsel und Farbverlauf.

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

Verwenden eines Standardpinsels mit „linearGradient“ als Stil für Text.
Abbildung 4. Verwendung eines Standardpinsels mit linearGradient als Stil für Text.
Deckkraft in einem Textbereich

Verwenden Sie den optionalen Parameter alpha von SpanStyle's, um die Deckkraft eines bestimmten Textbereichs anzupassen. Verwenden Sie denselben Pinsel für beide Teile eines Textes und ändern Sie den Alphaparameter im entsprechenden Bereich. Im Codebeispiel wird der erste Textbereich mit halber Deckkraft (alpha =.5f) angezeigt, während der zweite Bereich mit voller Deckkraft (alpha = 1f) angezeigt wird.

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

Mit buildAnnotatedString und dem Alphaparameter von SpanStyle sowie mit linearGradient können Sie einem Textbereich Transparenz hinzufügen.
Abbildung 5. Verwendung von buildAnnotatedString und dem Alphaparameter von SpanStyle zusammen mit linearGradient, um einem Textbereich Deckkraft hinzuzufügen.

Laufschrifteffekt auf Text anwenden

Sie können den Modifikator basicMarquee auf jede zusammensetzbare Funktion anwenden, um einen animierten Scrolling-Effekt zu erzeugen. Der Laufschrifteffekt tritt auf, wenn der Inhalt zu breit ist, um in die verfügbaren Einschränkungen zu passen. Standardmäßig sind für basicMarquee bestimmte Konfigurationen (z. B. Geschwindigkeit und anfängliche Verzögerung) festgelegt. Sie können diese Parameter jedoch ändern, um den Effekt anzupassen.

Das folgende Snippet implementiert einen einfachen Laufschrifteffekt auf eine zusammensetzbare Funktion 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

Abbildung 6. Der Modifikator basicMarquee wird auf Text angewendet.

Zusätzliche Ressourcen