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.
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).
 |
 |
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 nichtBalancedoderSimpleist.)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
)
}
)
)
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. KannNormaloderStrictentsprechen.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
)
)
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
)
)
}
)
)
Wenn diese Option aktiviert ist, erfolgt die Bindestricheung nur unter den folgenden Bedingungen:
- Ein Wort passt nicht auf eine Zeile. Wenn Sie die Zeilenumbruchstrategie
Simpleverwenden, 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“