Auf dieser Seite wird beschrieben, wie Sie Text für Ihren Absatz formatieren können. Wenn Sie Stile auf Absatzebene festlegen möchten, können Sie Parameter wie textAlign und lineHeight konfigurieren oder Ihre eigenen ParagraphStyle definieren.
Textausrichtung festlegen
Mit dem Parameter textAlign können Sie die horizontale Ausrichtung des Texts innerhalb einer zusammensetzbaren Oberfläche von Text festlegen.
Standardmäßig wählt Text die natürliche Textausrichtung abhängig vom Inhaltswert aus:
- Linker Rand des
Text-Containers für rechtsläufige Buchstaben wie Latein, Kyrillisch oder Hangeul - Rechter Rand des
Text-Containers für linksläufige Buchstaben 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 bzw. TextAlign.Right verwenden, da sie je nach bevorzugter Sprachtextausrichtung zum rechten Rand der zusammensetzbaren Funktion Text aufgelöst werden. Beispielsweise wird TextAlign.End bei französischem Text an der rechten und bei arabischen Texten an der linken Seite ausgerichtet, aber TextAlign.Right wird bei Texten auf der rechten Seite ausgerichtet, unabhängig davon, welches Alphabet verwendet wird.
Mehrere Stile in einem Absatz hinzufügen
Um einem Absatz mehrere Stile hinzuzufügen, können Sie ParagraphStyle in einem AnnotatedString verwenden, das mit Stilen beliebiger Annotationen annotiert werden kann.
Nachdem Sie einen Teil Ihres Texts mit ParagraphStyle markiert haben, wird dieser Teil vom restlichen Text getrennt, so als hätte er am Anfang und Ende Zeilenvorschübe.
Weitere Informationen zum Hinzufügen mehrerer Stile in einem Text finden Sie unter Mehrere Stile für Text hinzufügen.
AnnotatedString hat einen typsicheren Builder, um die Erstellung zu vereinfachen: buildAnnotatedString. Im folgenden Snippet wird mit buildAnnotatedString ParagraphStyle 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")
}
}
)
}
Zeilenhöhe und Abstand anpassen
includeFontPadding ist eine Legacy-Property, die einen zusätzlichen Innenrand basierend auf den Schriftmesswerten am Anfang und Ende der letzten Zeile eines Textes hinzufügt.
Ab Version 2024.01.01 der BOM-Erstellung für die Datei ist includeFontPadding standardmäßig auf false festgelegt. Dadurch wird das Standardtextlayout besser mit gängigen Designtools abgestimmt.
Die Möglichkeit, lineHeight zu konfigurieren, ist nicht neu. Sie ist seit Android Q verfügbar. Sie können lineHeight für Text mithilfe des Parameters lineHeight konfigurieren. Dieser verteilt die Zeilenhöhe auf jede Textzeile. Mit dem neuen LineHeightStyle API können Sie dann weiter konfigurieren, wie der Text innerhalb des Raums ausgerichtet wird, und Leerzeichen entfernen.
Für eine bessere Genauigkeit können Sie lineHeight mit der Texteinheit „em“ (relative Schriftgröße) anstelle von „sp“ (skalierte Pixel) anpassen. Weitere Informationen zum Auswählen einer geeigneten Texteinheit finden Sie unter TextUnit.
lineHeight anpassen und bei Bedarf zusätzlichen Platz kürzen.
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
)
)
)
)
Zusätzlich zum Anpassen von lineHeight kannst du Text mithilfe von Konfigurationen mit der LineHeightStyle experimentellen API weiter zentrieren und gestalten: LineHeightStyle.Alignment und LineHeightStyle.Trim (includeFontPadding muss auf false gesetzt sein, damit das Zuschneiden funktioniert.) Für die Ausrichtung und das Zuschneiden wird der gemessene Abstand zwischen den Textzeilen genutzt, um ihn besser 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 von der Zeilenhöhe vorgegebenen Platz ausgerichtet werden soll. 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 Rand der ersten Zeile und des unteren Rands der letzten Zeile Ihres Textes verlassen oder entfernen, der aus allen lineHeight- und Ausrichtungsanpassungen generiert wurde. Die folgenden Beispiele zeigen, wie mehrzeiliger Text mit verschiedenen LineHeightStyle.Trim-Konfigurationen aussieht, wenn die Ausrichtung zentriert ist (LineHeightStyle.Alignment.Center).
 |
 |
LineHeightStyle.Trim.None |
LineHeightStyle.Trim.Both |
 |
 |
LineHeightStyle.Trim.FirstLineTop |
LineHeightStyle.Trim.LastLineBottom |
Im Blogpost Korrektur des Schriftabstands in Compose-Text finden Sie weitere Informationen zum Kontext dieser Änderung, dazu, wie includeFontPadding im View-System funktioniert hat, sowie zu den Änderungen, die für Compose und die neuen LineHeightStyle-APIs vorgenommen wurden.
Zeilenumbrüche einfügen
Die LineBreak API definiert die Kriterien, nach denen Text auf mehrere Zeilen aufgeteilt wird. Sie können die gewünschte Art des Zeilenumbruchs im TextStyle-Block Ihrer zusammensetzbaren Funktion Text angeben. Zu den voreingestellten Zeilenumbruchtypen gehören:
Simple: schneller, einfacher Zeilenumbruch. Empfohlen für Texteingabefelder.Heading: Zeilenumbruch mit lockereren Regeln. Empfohlen für kurzen Text wie Titel.Paragraph: Langsamerer Zeilenumbruch mit höherer Qualität für eine bessere Lesbarkeit. Empfohlen für größere Textmengen, z. B. Absätze.
Im folgenden Snippet werden sowohl Simple als auch Paragraph verwendet, um einen Zeilenumbruch für einen langen Textblock festzulegen:
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 in der obigen Ausgabe, dass das Ergebnis mit dem Zeilenumbruch bei Paragraph ein optisch ausgewogeneres Ergebnis erzielt als der Zeilenumbruch bei Simple.
Zeilenumbrüche anpassen
Sie können auch eine eigene LineBreak-Konfiguration mit dem Parameter Strategy erstellen. Strategy kann Folgendes sein:
Balanced: Versucht, die Zeilenlängen des Textes auszugleichen. Wenn diese Option aktiviert ist, wird auch die automatische Bindestriche angewendet. Empfohlen für kleine Bildschirme, wie z. B. Uhren, um die Textmenge zu maximieren.HighQuality: Optimiert einen Absatz für lesbareren Text, einschließlich Bindestrichen, wenn diese Option aktiviert ist. (Sollte ein Standardwert für alles sein, das nichtBalancedoderSimpleist.)Simple— eine einfache, schnelle Strategie. Wenn diese Option aktiviert ist, wird die Bindestriche nur für Wörter verwendet, die nicht in eine ganze Zeile passen. Hilfreich beim Bearbeiten von Text, um Positionsänderungen während der Eingabe zu vermeiden.
Das folgende Snippet zeigt den Unterschied zwischen einem Absatz mit Standardeinstellungen und einem Absatz, der für kleine Bildschirme optimiert ist, wobei die Zeilenumbruchstrategie Balanced verwendet wird:
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
)
}
)
)
Balanced-Strategie für Zeilenumbruch formatiert ist (oben) im Vergleich zu einem Absatz, der ohne Zeilenumbrüche formatiert istÜberlegungen zum CJK
Sie können LineBreak auch mit den APIs Strictness und WordBreak anpassen, die speziell für CJK-Sprachen entwickelt wurden.
In anderen Sprachen als CJK sind die Auswirkungen dieser APIs nicht immer zu sehen. Grundsätzlich werden Regeln für Zeilenumbrüche basierend auf der Sprache definiert.
Strictness beschreibt die Strenge der Zeilenumbruch mit folgenden Eigenschaften:
Default: Standardmäßige Regeln für die Ausnahme von der Sprache. KannNormaloderStrictentsprechen.Loose: Die Regeln mit der geringsten Einschränkung. Geeignet für kurze Zeilen.Normal: Die gängigsten Regeln für Zeilenumbrüche.Strict: Die strengsten Regeln für Zeilenumbruch.
WordBreak definiert, wie Zeilenumbrüche in Wörter mit den folgenden Eigenschaften eingefügt werden:
Default: Standardmäßige Regeln für die Ausnahme von der Sprache.Phrase: Zeilenumbruch basiert auf Wortgruppen.
Das folgende Snippet verwendet für japanischen Text einen Strict-strengen Modus und eine Phrase-Einstellung zur Worttrennung:
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
)
)
Strictness“ und „WordBreak“ (oben) formatiert wurde, im Gegensatz zu Text, der nur mit LineBreak.Heading (unten) formatiert istÜber Zeilen geteilter Bindestrich als Text
Mit der Hyphens API können Sie Ihrer App Unterstützung für Bindestriche hinzufügen. Bindestrich bedeutet, dass ein Wort mit einem Bindestrich in die Textzeilen unterteilt wird. Wenn diese Option aktiviert ist, wird zwischen den Silben eines Wortes an entsprechenden entsprechenden Stellen eine Bindestriche eingefügt.
Die Bindestriche sind standardmäßig nicht aktiviert. Um die Verwendung von Bindestrichen 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, wird die Bindestriche nur unter den folgenden Bedingungen verwendet:
- Ein Wort passt nicht in eine Zeile. Wenn Sie eine
Simple-Strategie für Zeilenumbruch verwenden, wird ein Wort nur dann mit Bindestrichen versehen, wenn eine Zeile kürzer als das einzelne Wort ist. - Die entsprechende Sprache wird auf Ihrem Gerät festgelegt. Die richtige Bindestriche wird anhand der im System vorhandenen Wörterbücher festgelegt.
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Text formatieren
- Grundlagen zum Verfassen von Layouts
- Intrinsische Messungen in Compose-Layouts