Diese Seite wurde von der Cloud Translation API übersetzt.

Absatzstil

Auf dieser Seite wird beschrieben, wie Sie Text für Ihren Absatz formatieren können. Um das Format auf Absatzebene festzulegen, können Sie Parameter wie textAlign und lineHeight konfigurieren oder eine eigene ParagraphStyle definieren.

Textausrichtung festlegen

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

Standardmäßig wird mit Text die natürliche Textausrichtung je nach Inhaltswert ausgewählt:

Linker Rand des Text-Containers für Alphabete, die von links nach rechts geschrieben werden, z. B. Lateinisch, Kyrillisch oder Hangul
Rechter Rand des Text-Containers für rechtsläufige Alphabete wie Arabisch oder Hebräisch

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

Der Text

Wenn Sie die Textausrichtung eines Text-Kompositionselements manuell festlegen möchten, verwenden Sie TextAlign.Start und TextAlign.End anstelle von TextAlign.Left und TextAlign.Right, da sie je nach bevorzugter Textausrichtung der Sprache auf den rechten Rand des Text-Kompositionselements verweisen. Beispielsweise wird TextAlign.End bei französischem Text rechts und bei arabischem Text links ausgerichtet, TextAlign.Right hingegen unabhängig vom verwendeten Alphabet rechts.

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 des Textes mit einem ParagraphStyle markiert ist, wird dieser Teil vom Rest des Textes getrennt, als ob er am Anfang und Ende Zeilenumbrüche hätte.

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

AnnotatedString hat einen typsicheren Builder, der die Erstellung erleichtert: buildAnnotatedString. Im folgenden Snippet wird ParagraphStyle mit buildAnnotatedString festgelegt:

@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")
            }
        }
    )
}TextSnippets.kt

Drei Absätze in drei verschiedenen Stilen: blau, rot und fett und normal schwarz

Zeilenhöhe und Abstand anpassen

includeFontPadding ist eine ältere Property, mit der oben in der ersten Zeile und unten in der letzten Zeile eines Textes zusätzliche Ränder basierend auf Schriftmetriken hinzugefügt werden. 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, wodurch die Zeilenhöhe auf jede Textzeile verteilt wird. Mit dem neuen Symbol LineHeightStyle API können Sie dann die Ausrichtung des Textes im Bereich weiter konfigurieren und Leerräume 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 die LineHeight als Maßeinheit zeigt, basierend auf den Linien direkt darüber und darunter — **Abbildung 1** Mit den Optionen „Ausrichtung“ und „Zuschneiden“ kannst du den Text innerhalb des `lineHeight`-Sets anpassen und bei Bedarf zusätzlichen Abstand 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
            )
        )
    )
)TextSnippets.kt

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, mittig oder proportional ausrichten. Mit LineHeightStyle.Trim können Sie dann das zusätzliche Leerzeichen oben in der ersten Zeile und unten in der letzten Zeile des Textes beibehalten oder entfernen, das durch Anpassungen von lineHeight und Ausrichtung generiert wurde. Die folgenden Beispiele zeigen, wie mehrzeiliger Text mit verschiedenen LineHeightStyle.Trim-Konfigurationen aussieht, wenn die Ausrichtung zentriert (LineHeightStyle.Alignment.Center) ist.


`LineHeightStyle.Trim.None`	`LineHeightStyle.Trim.Both`

`LineHeightStyle.Trim.FirstLineTop`	`LineHeightStyle.Trim.LastLineBottom`

Im Blogpost Fixing Font Padding in Compose Text (Schriftabstand im Tool zum Verfassen von Text korrigieren) erfahren Sie mehr über den Kontext dieser Änderung, die Funktionsweise von includeFontPadding im Ansichtssystem und die Änderungen, die für das Tool zum Verfassen von Text und die neuen LineHeightStyle APIs vorgenommen wurden.

Zeilenumbrüche einfügen

Die LineBreak API definiert die Kriterien, nach denen Text in mehrere Zeilen aufgeteilt wird. Sie können die gewünschte Art der Zeilenumbruchs im TextStyle-Block Ihres Text-Kompositionselements angeben. Zu den voreingestellten Arten der Zeilenumbruch-Optimierung gehören:

Simple – Schnelle, einfache Zeilenumbrüche. Empfohlen für Textfelder.
Heading – Zeilenumbruch mit lockereren Umbruchregeln. Empfohlen für kurzen Text, z. B. Titel.
Paragraph: Langsamere, hochwertigere Zeilentrennung 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
                )
            )
        }
    )
)TextSnippets.kt

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 einfachen Strategie für den Zeilenumbruch hat eine größere Variabilität bei den Zeilenlängen. — **Abbildung 1.** Ein Textblock mit einer einfachen Strategie für den Zeilenumbruch (oben) im Vergleich zu einem Textblock mit für den Absatz optimiertem Zeilenumbruch (unten).

In der obigen Ausgabe sehen Sie, dass das Zeilenumbruchsverhalten von Paragraph ein visuell ausgewogeneres Ergebnis liefert als das von Simple.

Zeilenumbrüche anpassen

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

Balanced: Die Zeilenlängen des Textes werden ausgeglichen und bei aktivierter Option wird auch automatisch getrennt. Empfohlen für kleine Displays wie Uhren, um die Menge des angezeigten Textes zu maximieren.
HighQuality: Optimiert einen Absatz für eine bessere Lesbarkeit, einschließlich Silbentrennung, sofern aktiviert. (Sollte der Standardwert für alles sein, was nicht Balanced oder Simple ist.)
Simple – einfache, schnelle Strategie. Wenn diese Option aktiviert ist, wird nur bei Wörtern getrennt, die nicht alleine auf eine ganze Zeile passen. Hilfreich beim Bearbeiten von Text, um beim Tippen die Position nicht ändern zu müssen.

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

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
            )
        }
    )
)TextSnippets.kt

Ein Absatz mit einer ausgewogenen Strategie für Zeilenumbrüche und ein Absatz, der ohne Strategie formatiert wurde. Der Absatz mit der Strategie für ausgewogene Zeilenumbrüche hat eine gleichmäßigere Zeilenlänge als die Standardeinstellung. — **Abbildung 2**: Ein Absatz, der mit einer `Balanced` Zeilenumbruchstrategie (oben) und ein Absatz ohne Zeilenumbruchstrategie

CJK-Hinweise

Sie können LineBreak auch mit den APIs Strictness und WordBreak anpassen, die speziell für CJK-Sprachen entwickelt wurden. In Sprachen, die nicht zu den CJK-Sprachen gehören, sind die Auswirkungen dieser APIs möglicherweise nicht immer zu sehen. Die Regeln für den Zeilenumbruch werden insgesamt basierend auf dem Gebietsschema definiert.

Strictness beschreibt die Strenge des Zeilenumbruchs mit den folgenden Eigenschaften:

Default: Standard-Umbruchregeln für die Sprache. Kann Normal oder Strict entsprechen.
Loose: Die am wenigsten einschränkenden Regeln. Geeignet für kurze Zeilen.
Normal: Die häufigsten Regeln für Zeilenumbrüche.
Strict – Die strengsten Regeln für den Zeilenumbruch.

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

Default: Standard-Umbruchregeln für die Sprache.
Phrase – Zeilenumbrüche basieren auf Wortgruppen.

Im folgenden Snippet werden für einen japanischen Text die Einstellungen Strict für die Strenge und Phrase für das Worttrennung verwendet:

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
    )
)TextSnippets.kt

Japanischer Text mit Einstellungen für „Strenge“ und „WordBreak“ im Vergleich zum Standardtext. — **Abbildung 3**: Text, der mit den Einstellungen `Strictness` und `WordBreak` formatiert ist (oben), im Vergleich zu Text, der nur mit `LineBreak.Heading` formatiert ist (unten).

Text, der über mehrere Zeilen hinweg geht, trennen

Mit der Hyphens API können Sie Ihrer App Unterstützung für Trennlinien hinzufügen. Trennlinien sind Satzzeichen, die einfügen, um anzugeben, dass ein Wort über mehrere Textzeilen verteilt ist. Wenn diese Option aktiviert ist, wird an den entsprechenden Trennpunkten ein Trennstrich zwischen den Silben eines Wortes 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
                )
            )
        }
    )
)TextSnippets.kt

Ein Absatz ohne und ein Absatz mit aktivierter Silbentrennung
Wenn die Silbentrennung aktiviert ist, wird ein Wort mit einem Bindestrich getrennt und auf zwei Zeilen aufgeteilt. — **Abbildung 4**: Ein Absatz ohne aktivierte Silbentrennung (oben) und ein Absatz mit aktivierter Silbentrennung (unten).

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

Ein Wort passt nicht auf eine Zeile. Wenn Sie eine Simple-Zeilenumbruchstrategie verwenden, wird ein Wort nur dann getrennt, wenn eine Zeile kürzer als das einzelne 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.

Empfehlungen für dich

Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
Text gestalten
Grundlagen des Layouts
Intrinsische Maße in Compose-Layouts