Stiltext

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

Wenn Sie einen dieser Parameter festlegen, wird der Stil auf den gesamten Textwert angewendet. Wenn Sie mehrere Stile innerhalb derselben Zeile oder desselben Absatzes anwenden müssen, lesen Sie den Abschnitt zu mehreren Inline-Stilen.

Häufige Textstile

In den folgenden Abschnitten werden gängige Methoden zum Formatieren von Text beschrieben.

Schriftfarbe ändern

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

Schriftgröße ändern

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

Text kursiv formatieren

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

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

Text fett formatieren

Verwenden Sie den Parameter fontWeight, um Text in Fettdruck zu formatieren (oder eine andere FontWeight festzulegen).

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

Schatten hinzufügen

Mit dem Parameter style 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 Versatz oder die Position in Bezug auf Text und den Unschärferadius, der angibt, wie unscharf 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

Mehrere Stile im Text hinzufügen

Wenn Sie innerhalb derselben Text-Komposition verschiedene Stile festlegen möchten, verwenden Sie einen AnnotatedString, einen String, der mit Stilen beliebiger Annotationen annotiert werden kann.

AnnotatedString ist eine Datenklasse, die Folgendes enthält:

• Einen Text-Wert
• Ein List von SpanStyleRange, entspricht dem Inline-Styling mit Positionsbereich innerhalb des Textwerts
• Ein List von ParagraphStyleRange, der die Textausrichtung, die Textrichtung, die Zeilenhöhe und den Texteinzug angibt

TextStyle ist für die Verwendung in der zusammensetzbaren Funktion Text vorgesehen, während SpanStyle und ParagraphStyle für die Verwendung in AnnotatedString vorgesehen sind. Weitere Informationen zu mehreren Stilen in einem Absatz finden Sie unter Mehrere Stile in einem Absatz hinzufügen.

AnnotatedString hat einen typsicheren Builder, um das Erstellen zu vereinfachen: 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 mit Links im Text anzeigen

Mit AnnotatedString.fromHtml() können Sie in Ihrer Jetpack Compose-Anwendung HTML-formatierten Text mit anklickbaren Links anzeigen lassen. Diese Funktion wandelt einen String mit HTML-Tags in ein AnnotatedString-Objekt um, sodass Stile und Links verarbeitet werden können.

Beispiel: HTML mit formatiertem Link

Dieses Snippet rendert HTML-formatierten Text mit einem Link und wendet einen bestimmten Stil 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 String htmlText in einen AnnotatedString. Mit dem Parameter linkStyles wird das Erscheinungsbild des Links angepasst.

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

• Die zusammensetzbare Funktion Text zeigt das resultierende AnnotatedString an.

Ergebnis

Mit diesem Snippet wird „Jetpack Compose“ als anklickbarer Link aktiviert, der blau, unterstrichen und kursiv formatiert ist:

Erweiterte Stile mit Brush aktivieren

Wenn Sie erweiterte Textstile verwenden möchten, können Sie die Brush API mit TextStyle und SpanStyle verwenden. Überall dort, wo Sie normalerweise TextStyle oder SpanStyle verwenden würden, können Sie jetzt auch Brush verwenden.

Pinsel für die Textformatierung verwenden

Konfiguriere deinen Text mit einem integrierten Pinsel in TextStyle. Sie können beispielsweise einen linearGradient-Pinsel für Ihren Text so konfigurieren:

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

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

Sie sind nicht auf dieses Farbschema oder diesen Farbstil beschränkt. Wir haben hier ein einfaches Beispiel zur Veranschaulichung verwendet. Sie können aber auch einen der integrierten Pinsel oder einfach ein SolidColor verwenden, um Ihren Text zu optimieren.

Integrationen

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

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

Zusätzliche Stile mit SpanStyle

Pinsel auf einen Textabschnitt anwenden

Wenn Sie einen Pinsel nur auf Teile des 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

Deckkraft in einem Textabschnitt

Wenn Sie die Deckkraft eines bestimmten Textabschnitts anpassen möchten, verwenden Sie den optionalen Parameter alpha von SpanStyle. Verwenden Sie für beide Teile eines Textes denselben Pinsel und ändern Sie den Alpha-Parameter im entsprechenden Span. Im Codebeispiel wird der erste Textabschnitt mit halber Deckkraft (alpha =.5f) und der zweite mit voller Deckkraft (alpha = 1f) angezeigt.

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

Laufschrifteffekt auf Text anwenden

Sie können den Modifikator basicMarquee auf jede zusammensetzbare Funktion anwenden, um einen animierten Scrolleffekt zu erzeugen. Der Lauftexteffekt 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 Lauftexteffekt für eine Text komponierbare Funktion:

@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, der auf Text angewendet wird.

Zusätzliche Ressourcen

• Brushing Up on Compose Text Coloring
• Animating brush Text coloring in Compose
• Mehrere Links in einem einzigen Textstring unterstützen