Absatzstil

Auf dieser Seite wird beschrieben, wie Sie Text für Ihren Absatz gestalten können. Wenn Sie den Stil auf Absatzebene festlegen möchten, können Sie Parameter wie textAlign und lineHeight konfigurieren oder ein eigenes ParagraphStyle definieren.

Textausrichtung festlegen

Mit dem Parameter textAlign können Sie die horizontale Ausrichtung des Texts innerhalb einer zusammensetzbaren Oberfläche Text festlegen.

Standardmäßig wählt Text die natürliche Textausrichtung abhängig von seinem Inhaltswert aus:

  • Linker Rand des Text-Containers für rechtsläufige Alphabete wie Latein, Kyrillisch oder Hangul
  • Rechter Rand des Text-Containers für linksläufige Alphabete wie Arabisch oder Hebräisch

@Composable
fun CenterText() {
    Text(
        "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp)
    )
}

Der Text

Wenn Sie die Textausrichtung einer zusammensetzbaren Funktion Text manuell festlegen möchten, sollten Sie TextAlign.Start und TextAlign.End anstelle von TextAlign.Left und TextAlign.Right verwenden, da sie je nach bevorzugter Sprachausrichtung zum rechten Rand der zusammensetzbaren Funktion Text führen. Beispielsweise wird TextAlign.End bei französischem Text auf der rechten Seite und bei arabischem Text linksbündig ausgerichtet, während TextAlign.Right bei Texten unabhängig vom verwendeten Alphabet auf der rechten Seite ausgerichtet wird.

Mehrere Stile in einem Absatz hinzufügen

Wenn Sie mehrere Stile in einem Absatz hinzufügen möchten, können Sie ParagraphStyle in einem AnnotatedString-Objekt verwenden, das mit beliebigen Stilen für Anmerkungen versehen werden kann. Sobald ein Teil Ihres Textes mit einem ParagraphStyle markiert ist, wird dieser Teil so vom verbleibenden Text getrennt, als ob er am Anfang und am Ende Zeilenvorschüben hätte.

Weitere Informationen zum Hinzufügen mehrerer Stile zu einem Text finden Sie unter Mehrere Stile in Text einfügen.

Für AnnotatedString gibt es einen typsicheren Builder, der die Erstellung vereinfacht: buildAnnotatedString. Im folgenden Snippet wird buildAnnotatedString verwendet, um ParagraphStyle festzulegen:

@Composable
fun ParagraphStyle() {
    Text(
        buildAnnotatedString {
            withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
                withStyle(style = SpanStyle(color = Color.Blue)) {
                    append("Hello\n")
                }
                withStyle(
                    style = SpanStyle(
                        fontWeight = FontWeight.Bold, color = Color.Red
                    )
                ) {
                    append("World\n")
                }
                append("Compose")
            }
        }
    )
}

Drei Absätze in drei verschiedenen Stilen: Blau, Rot und Fett, einfaches Schwarz

Zeilenhöhe und Zeilenabstand anpassen

includeFontPadding ist eine Legacy-Property, mit der basierend auf Schriftmesswerten am oberen und unteren Rand der letzten Zeile eines Textes zusätzlicher Abstand hinzugefügt wird. Ab Version 2024.01.01 von „Compose BOM“ ist includeFontPadding standardmäßig auf false gesetzt. Dadurch entspricht das Standardtextlayout den gängigen Designtools mehr.

Die Möglichkeit, lineHeight zu konfigurieren, ist seit Android Q verfügbar. Sie können lineHeight für Text mit dem Parameter lineHeight konfigurieren, der die Zeilenhöhe auf jede Textzeile verteilt. Anschließend können Sie mit dem neuen LineHeightStyle API weiter konfigurieren, wie dieser Text innerhalb des Leerzeichens ausgerichtet wird, und Leerzeichen entfernen.

Sie können lineHeight mit dem Textblock „em“ (relative Schriftgröße) anstelle von „sp“ (skalierte Pixel) anpassen, um die Genauigkeit zu verbessern. Weitere Informationen zum Auswählen eines geeigneten Textblocks finden Sie unter TextUnit.

Bild, das „lineHeight“ als Maß für die Linien direkt darüber und darunter zeigt.
Abbildung 1. Über die Optionen „Ausrichtung“ und „Zuschneiden“ kannst du den Text innerhalb des Satzes lineHeight anpassen und bei Bedarf zusätzlichen Platz entfernen.

Text(
    text = text,
    style = LocalTextStyle.current.merge(
        TextStyle(
            lineHeight = 2.5.em,
            platformStyle = PlatformTextStyle(
                includeFontPadding = false
            ),
            lineHeightStyle = LineHeightStyle(
                alignment = LineHeightStyle.Alignment.Center,
                trim = LineHeightStyle.Trim.None
            )
        )
    )
)

Neben der Anpassung von lineHeight kannst du Text jetzt mithilfe von Konfigurationen mit der experimentellen LineHeightStyle API weiter zentrieren und gestalten: LineHeightStyle.Alignment und LineHeightStyle.Trim. includeFontPadding muss auf false gesetzt sein, damit das Zuschneiden funktioniert. Beim Formatieren und Zuschneiden wird der gemessene Abstand zwischen den Textzeilen verwendet, um ihn optimal auf alle Zeilen zu verteilen – einschließlich einer einzelnen Textzeile und der obersten Zeile eines Textblocks.

Mit LineHeightStyle.Alignment wird definiert, wie die Linie an dem durch die Zeilenhöhe bereitgestellten Bereich ausgerichtet wird. Innerhalb jeder Zeile können Sie den Text oben, unten, zentriert oder proportional ausrichten. Mit LineHeightStyle.Trim können Sie dann den zusätzlichen Abstand am oberen und unteren Rand der letzten Zeile Ihres Textes beibehalten oder entfernen, der durch lineHeight- und Ausrichtungsanpassungen generiert wurde. Die folgenden Beispiele zeigen, wie mehrzeiliger Text bei verschiedenen LineHeightStyle.Trim-Konfigurationen angezeigt wird, wenn die Ausrichtung zentriert ist (LineHeightStyle.Alignment.Center).

Ein Bild, das LineHeightStyle.Trim.None zeigt Ein Bild, das LineHeightStyle.Trim.Both zeigt
LineHeightStyle.Trim.None LineHeightStyle.Trim.Both
Ein Bild, das LineHeightStyle.Trim.FirstLineTop zeigt Ein Bild, das LineHeightStyle.Trim.LastLineBottom zeigt
LineHeightStyle.Trim.FirstLineTop LineHeightStyle.Trim.LastLineBottom

Im Blogpost Fixing Font Padding in Compose Text erfahren Sie mehr über den Kontext dieser Änderung, die Funktionsweise von includeFontPadding im Ansichtssystem und die Änderungen für Compose und die neuen LineHeightStyle APIs.

Zeilenumbrüche einfügen

Die LineBreak API definiert die Kriterien, nach denen Text auf mehrere Zeilen aufgeteilt wird. Sie können den gewünschten Zeilenumbruchtyp im Block TextStyle der zusammensetzbaren Funktion Text angeben. Zu den voreingestellten Zeilenumbruchtypen gehören:

  • Simple: schneller, einfacher Zeilenumbruch. Empfohlen für Texteingabefelder.
  • Heading: Bahnbrechende Regeln. Empfohlen für kurzen Text wie Titel.
  • Paragraph: Langsamerer, höherwertiger Zeilenumbruch für bessere Lesbarkeit. Empfohlen für größere Textmengen, z. B. Absätze.

Im folgenden Snippet werden sowohl Simple als auch Paragraph verwendet, um das Zeilenumbruchverhalten in einem langen Textblock anzugeben:

TextSample(
    samples = mapOf(
        "Simple" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Simple
                )
            )
        },
        "Paragraph" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph
                )
            )
        }
    )
)

Ein Textblock, der eine einfache Strategie zum Zeilenumbruch im Vergleich zu einem Textblock mit einer absatzoptimierten Strategie für den Zeilenumbruch darstellt. Der Textblock mit der Strategie für den einfachen Zeilenumbruch hat eine größere Variabilität bei den Zeilenlängen.
Abbildung 1. Ein Textblock mit einer einfachen Strategie für Zeilenumbrüche (oben) im Vergleich zu einem Textblock mit absatzoptimiertem Zeilenumbruch (unten).

Beachten Sie, dass in der obigen Ausgabe das Zeilenumbruchverhalten Paragraph zu einem optisch ausgewogeneren Ergebnis führt als der Zeilenumbruch von Simple.

Zeilenumbrüche anpassen

Mit dem Parameter Strategy können Sie auch Ihre eigene LineBreak-Konfiguration erstellen. Strategy kann Folgendes sein:

  • Balanced: versucht, die Zeilenlänge des Texts auszugleichen. Falls diese Option aktiviert ist, wird dabei auch die automatische Bindestrichsetzung angewendet. Empfohlen für kleine Displays wie Uhren, um die Textmenge zu maximieren.
  • HighQuality: optimiert einen Absatz für besser lesbaren Text, einschließlich Bindestrichen, sofern aktiviert. (Sollte als Standardeinstellung für alles verwendet werden, das nicht Balanced oder Simple ist.)
  • Simple: einfache, schnelle Strategie. Wenn diese Option aktiviert ist, erfolgt die Bindestrichsetzung nur bei Wörtern, die nicht in eine ganze Zeile passen. Nützlich zum Bearbeiten von Text, damit während der Eingabe nicht die Position gewechselt wird.

Das folgende Snippet zeigt den Unterschied zwischen einem Absatz mit Standardeinstellungen und einem Absatz, der für kleine Bildschirme mit der Zeilenumbruchstrategie Balanced optimiert ist:

TextSample(
    samples = mapOf(
        "Balanced" to {
            val smallScreenAdaptedParagraph =
                LineBreak.Paragraph.copy(strategy = LineBreak.Strategy.Balanced)
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(200.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = smallScreenAdaptedParagraph
                )
            )
        },
        "Default" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(200.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default
            )
        }
    )
)

Ein Absatz mit einer ausgewogenen Zeilenumbrüchenstrategie und ein Absatz, der ohne Strategie formatiert ist. Der Absatz mit der Strategie „Ausgeglichene Linienunterbrechung“ hat konsistentere Zeilenlängen als die Standardeinstellung.
Abbildung 2: Bei einem Absatz, der mit der Zeilenumbruchstrategie Balanced (oben) formatiert wurde, im Vergleich zu einem Absatz, der ohne Zeilenumbruchstrategie formatiert ist

Überlegungen zu CJK

Sie können LineBreak auch mit den APIs Strictness und WordBreak anpassen, die speziell für CJK-Sprachen entwickelt wurden. Die Auswirkungen dieser APIs werden möglicherweise nicht immer in anderen Sprachen als CJK angezeigt. Insgesamt werden Regeln für Zeilenumbrüche basierend auf dem Gebietsschema definiert.

Strictness beschreibt den strengen Zeilenumbruch mit den folgenden Attributen:

  • Default: standardmäßige Bruchregeln für die Sprache. Kann Normal oder Strict entsprechen.
  • Loose: Die Regeln mit der geringsten Einschränkung. Für kurze Zeilen geeignet.
  • Normal: Die häufigsten Regeln für Zeilenumbrüche.
  • Strict: Die strengsten Regeln für Zeilenumbrüche.

WordBreak definiert, wie Zeilenumbrüche innerhalb von Wörtern mit den folgenden Eigenschaften eingefügt werden:

  • Default: standardmäßige Bruchregeln für die Sprache.
  • Phrase: Zeilenumbrüche basieren auf Wortgruppen.

Das folgende Snippet verwendet eine strikte Strict- und eine Phrase-Wortbrucheinstellung für einen japanischen Text:

val customTitleLineBreak = LineBreak(
    strategy = LineBreak.Strategy.HighQuality,
    strictness = LineBreak.Strictness.Strict,
    wordBreak = LineBreak.WordBreak.Phrase
)
Text(
    text = "あなたに寄り添う最先端のテクノロジー。",
    modifier = Modifier.width(250.dp),
    fontSize = 14.sp,
    style = TextStyle.Default.copy(
        lineBreak = customTitleLineBreak
    )
)

Japanischer Text mit Einstellungen für „Strenge“ und „WordBreak“ im Vergleich zum Standardtext.
Abbildung 3: Mit den Einstellungen Strictness und WordBreak (oben) formatierter Text im Vergleich zu nur mit LineBreak.Heading formatiertem Text (unten).

Text über Zeilen Bindestrich setzen

Mit der Hyphens API können Sie die Unterstützung für Bindestriche hinzufügen. Bindestrich bedeutet, ein Bindestrich-ähnliches Satzzeichen einzufügen, um anzuzeigen, dass ein Wort über mehrere Textzeilen verteilt ist. Wenn diese Option aktiviert ist, wird die Bindestriche zwischen den Silben eines Wortes an entsprechenden Stellen eingefügt.

Die Bindestrichsetzung ist standardmäßig nicht aktiviert. Um die Bindestrichsetzung zu aktivieren, fügen Sie Hyphens.Auto als Parameter in einem TextStyle-Block hinzu:

TextSample(
    samples = mapOf(
        "Hyphens - None" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph,
                    hyphens = Hyphens.None
                )
            )
        },
        "Hyphens - Auto" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph,
                    hyphens = Hyphens.Auto
                )
            )
        }
    )
)

Ein Absatz ohne und mit aktivierter Bindestrichsetzung.
  Wenn die Bindestrichsetzung aktiviert ist, werden Wörter mit Bindestrich dargestellt und auf zwei Zeilen aufgeteilt.
Abbildung 4: Ein Absatz ohne aktivierte Bindestrichsetzung (oben) im Vergleich zu einem Absatz mit aktivierter Bindestrichsetzung (unten).

Wenn diese Option aktiviert ist, erfolgt die Bindestricheung nur unter den folgenden Bedingungen:

  • Ein Wort passt nicht auf eine Zeile. Wenn Sie die Zeilenumbruchstrategie Simple verwenden, tritt die Bindestrichsetzung eines Worts nur dann auf, wenn eine Zeile kürzer als ein einzelnes Wort ist.
  • Die entsprechende Sprache wird auf Ihrem Gerät festgelegt, so dass die entsprechende Bindestrichsetzung anhand der im System vorhandenen Wörterbücher ermittelt wird.