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)
)
}
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 einem Absatz mehrere Stile hinzufügen möchten, können Sie ParagraphStyle in einem AnnotatedString verwenden, das mit beliebigen Annotationsstilen annotiert 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 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")
}
}
)
}
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 Compose BOM-Version 2024.01.01 ist includeFontPadding standardmäßig auf false festgelegt. Dadurch entspricht das Standardtextlayout gängigen 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 zur Auswahl einer geeigneten Texteinheit finden Sie unter TextUnit.
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
)
)
)
)
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. Bei der Ausrichtung und dem Zuschneiden wird der gemessene Abstand zwischen den Textzeilen verwendet, um ihn auf alle Zeilen zu verteilen, einschließlich einer einzelnen Textzeile und der ersten Zeile eines Textblocks.
Mit LineHeightStyle.Alignment wird festgelegt, wie die Linie im durch die Zeilenhöhe vorgegebenen 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 wird sowohl Simple als auch Paragraph verwendet, um das Zeilenumbruchsverhalten für einen 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
)
)
}
)
)
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 Smartwatches, um die maximale Textmenge anzuzeigen.HighQuality: Optimiert einen Absatz für eine bessere Lesbarkeit, einschließlich Silbentrennung, sofern aktiviert. (Sollte der Standardwert für alles sein, was nichtBalancedoderSimpleist.)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
)
}
)
)
Balanced Zeilenumbruchstrategie (oben) und ein Absatz ohne ZeilenumbruchstrategieCJK-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. KannNormaloderStrictentsprechen.Loose: Die am wenigsten einschränkenden Regeln. Geeignet für kurze Zeilen.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.
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
)
)
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, werden an den entsprechenden Stellen Trennlinien zwischen den Silben eines Wortes eingefügt.
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
)
)
}
)
)
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 festgelegt, da die entsprechende Silbentrennung anhand von Wörterbüchern im System bestimmt wird.
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Text formatieren
- Grundlagen des Layouts
- Intrinsische Maße in Compose-Layouts