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) ) }
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") } } ) }
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
.
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
).
LineHeightStyle.Trim.None |
LineHeightStyle.Trim.Both |
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 ) ) } ) )
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 nichtBalanced
oderSimple
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 ) } ) )
Ü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. KannNormal
oderStrict
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 ) )
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 ) ) } ) )
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.
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Text gestalten
- Grundlagen des E-Mail-Layouts
- Intrinsische Messungen in „Layouts erstellen“