Absatzstil

Auf dieser Seite wird beschrieben, wie Sie Text für Ihre Absatz. Um den Stil auf Absatzebene festzulegen, können Sie Parameter wie textAlign und lineHeight oder definiere dein eigenes ParagraphStyle.

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 wählt Text die natürliche Textausrichtung je nach Inhaltswert:

• 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

Wenn Sie die Textausrichtung einer Text-zusammensetzbaren Funktion manuell festlegen möchten, mit TextAlign.Start und TextAlign.End anstelle von TextAlign.Left und TextAlign.Right, da sie sich zum rechten Rand von Text ergeben komponierbar, abhängig von der bevorzugten Sprachausrichtung. Beispiel: TextAlign.End wird bei französischem Text auf der rechten Seite und bei Text links ausgerichtet für arabischen Text, wobei TextAlign.Right aber trotzdem am rechten Rand ausgerichtet wird Alphabet verwendet wird.

Hinweis: Die Textausrichtung unterscheidet sich von der Layoutausrichtung, bei der es darum geht, ein Composed-Element in einem Container wie Row oder Column zu platzieren. Weitere Informationen finden Sie unter Grundlagen des Layouts erstellen.

Mehrere Stile in einem Absatz hinzufügen

Wenn Sie mehrere Stile in einem Absatz hinzufügen möchten, können Sie ParagraphStyle in einer AnnotatedString, das mit beliebigen Stilen annotiert werden kann. Sobald ein Teil Ihres Textes mit einem ParagraphStyle markiert ist, wird dieser Teil getrennt vom restlichen Text, als ob dieser am Anfang einen Zeilenvorschub hätte. enden.

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 vereinfacht: 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

Zeilenhöhe und Abstand anpassen

includeFontPadding ist eine alte Property, die basierend auf die Schriftwerte oben in der ersten Zeile und unten in der letzten Zeile eines Textes stehen. Ab Version 2024.01.01 von „Compose BOM“ ist includeFontPadding festgelegt auf false. Dadurch wird das Standardtextlayout stärker an die gängige Designtools.

Die Möglichkeit, lineHeight zu konfigurieren, ist nicht neu – sie ist seit Android Q verfügbar. Sie können lineHeight für Text mit dem Parameter lineHeight konfigurieren. Dadurch wird die Zeilenhöhe auf jede Textzeile verteilt. 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 der Texteinheit „em“ (relative Schriftgröße) anstelle von „sp“ (skalierte Pixel) anpassen, um eine bessere Genauigkeit zu erzielen. Weitere Informationen zu den richtigen Textblock auswählen, siehe TextUnit.

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

Zusätzlich zur Anpassung von lineHeight können Sie Text jetzt mithilfe von Konfigurationen mit der experimentellen API LineHeightStyle weiter zentrieren und formatieren: LineHeightStyle.Alignment und LineHeightStyle.Trim. includeFontPadding muss auf false gesetzt sein, damit das Trimmen funktioniert. Für die Ausrichtung und das Zuschneiden wird der gemessene Abstand zwischen den Zeilen Text, um ihn auf alle Zeilen zu verteilen, einschließlich einer einzelnen Zeile und die oberste Zeile eines Textblocks.

Mit LineHeightStyle.Alignment wird festgelegt, wie die Linie im Gruppenbereich ausgerichtet werden soll aus der Zeilenhöhe. Innerhalb jeder Zeile können Sie den Text oben, unten, mittig oder proportional ausrichten. Anschließend können Sie mit LineHeightStyle.Trim um den zusätzlichen Platz am oberen und unteren Rand der ersten Zeile Letzte Zeile Ihres Textes, generiert über lineHeight und Ausrichtung Anpassungen. Die folgenden Beispiele zeigen, wie mehrzeiliger Text bei 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

Warnung: Diese Anpassungen mit der LineHeightStyle API (Trim) funktionieren nur, wenn du sie zusammen mit der Konfiguration includeFontPadding = false. verwendest.

Weitere Informationen finden Sie im Blogpost Fixing Font Padding in Compose Text. Weitere Informationen zum Kontext dieser Änderung, zur Funktionsweise von includeFontPadding in der Datenansicht und den Änderungen, die beim Schreiben und am neuen LineHeightStyle vorgenommen wurden, APIs

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: schneller, einfacher Zeilenumbruch. Empfohlen für Textfelder.
• Heading – Zeilenumbruch mit lockereren Umbruchregeln. Empfohlen für kurzen Text, z. B. 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 anzugeben, bei einem langen Textblock:

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

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

Beachten Sie in der obigen Ausgabe, dass das Zeilenumbruchverhalten Paragraph zu ein optisch ausgewogeneres Ergebnis als der Zeilenumbruch von Simple.

Zeilenumbrüche anpassen

Sie können auch Ihre eigene LineBreak-Konfiguration mit dem 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 Smartwatches, um die Textmenge zu maximieren.
• HighQuality: optimiert einen Absatz für besser lesbaren Text, einschließlich Bindestrich, wenn diese Option aktiviert ist. (Sollte als Standard für alles verwendet werden, Balanced oder Simple.)
• Simple – einfache, schnelle Strategie. Wenn diese Option aktiviert ist, erfolgt die Bindestrichsetzung nur bei die nicht auf eine ganze Zeile passen. Hilfreich beim Bearbeiten von Text, um beim Tippen die Position nicht ändern zu müssen.

Hinweis: Sie können das Zeilenumbruchsverhalten auch mit den Parametern Strictness und WordBreak anpassen. Diese Parameter sind für CJK-Sprachen vorgesehen. Bei anderen Sprachen als CJK wird möglicherweise nicht die gewünschte Wirkung angezeigt. Für Weitere Informationen finden Sie unter Überlegungen zu CJK.

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

Abbildung 2: Ein Absatz, der mit einer Balanced Zeilenumbruchstrategie (oben) und ein Absatz ohne Zeilenumbruchstrategie

CJK-Hinweise

Sie können LineBreak auch mit Strictness und WordBreak APIs, 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. Insgesamt Regeln für Zeilenumbrüche werden basierend auf dem Gebietsschema definiert.

Strictness beschreibt die Strenge des Zeilenumbruchs wie folgt: Eigenschaften:

Hinweis: Der empfohlene Standardwert für Strictness variiert je nach Sprache.

• Default: Standardzeilenenden für die Sprache. Kann Normal entsprechen oder Strict.
• Loose: Die Regeln mit der geringsten Einschränkung. Für kurze Zeilen geeignet.
• Normal – Die gängigsten Regeln für den Zeilenumbruch.
• Strict – Die strengsten Regeln für den Zeilenumbruch.

Mit WordBreak wird festgelegt, wie Zeilenumbrüche innerhalb von Wörtern eingefügt werden sollen. Dazu stehen die folgenden Eigenschaften zur Verfügung:

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

Das folgende Snippet verwendet den strikten Wert Strict und den Worttrennvorgang Phrase Einstellung für einen japanischen Text:

Hinweis: Wenn Sie das folgende Snippet testen möchten, wählen Sie auf Ihrem Gerät die japanische Sprache aus (Einstellungen > System > Sprachen und Eingabe > Sprachen > Japanisch).

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

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 über Zeilen Bindestrich setzen

Mit der Hyphens API können Sie Ihrer App die Unterstützung für Bindestriche hinzufügen. Bindestrich bedeutet, dass ein Bindestrich wie ein Satzzeichen eingefügt wird, um anzugeben, dass ein Wort auf mehrere Textzeilen verteilt ist. Wenn diese Option aktiviert ist, wird zwischen die Silben eines Wortes an entsprechenden Bindestrichen setzen.

Standardmäßig ist die Silbentrennung deaktiviert. Wenn Sie die Silbentrennung aktivieren möchten, fügen Sie Hyphens.Auto als Parameter in einen TextStyle-Block ein:

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

Abbildung 4: Absatz ohne aktivierte Bindestrichsetzung (oben) und Absatz im Vergleich mit aktivierter Bindestrichsetzung (unten).

Wenn die Silbentrennung aktiviert ist, erfolgt sie 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 ist auf Ihrem Gerät eingestellt, wie z. B. mit im System vorhandenen Wörterbüchern ermittelt.