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 der
Text innerhalb einer Text
zusammensetzbaren Fläche.
Standardmäßig wählt Text
die natürliche Textausrichtung je nach
Inhaltswert:
- Linker Rand des
Text
-Containers für rechtsläufige Alphabete wie Lateinisch, 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 Text
-zusammensetzbaren Funktion manuell festlegen möchten,
mit TextAlign.Start
und TextAlign.End
anstelle von TextAlign.Left
und
TextAlign.Right
, da sie zum rechten Rand von Text
aufgelöst werden
komponierbar, abhängig von der bevorzugten Sprachausrichtung. Beispiel:
TextAlign.End
wird für französischen Text auf der rechten Seite und an der linken Seite ausgerichtet
für arabischen Text, wobei TextAlign.Right
aber trotzdem am rechten Rand ausgerichtet wird
Alphabet verwendet wird.
Mehrere Stile in einem Absatz hinzufügen
Wenn Sie einem Absatz mehrere Stile hinzufügen möchten, können Sie ParagraphStyle
in einer
AnnotatedString
, das mit beliebigen Stilen annotiert werden kann.
Sobald ein Teil Ihres Textes mit 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 zu einem Text finden Sie unter Fügen Sie mehrere Stile für den Text hinzu.
AnnotatedString
hat einen typsicheren
Tool
, um das Erstellen zu vereinfachen: buildAnnotatedString
. Im folgenden Snippet wird
Mit buildAnnotatedString
legen Sie ParagraphStyle
fest:
@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 alte Property, die basierend auf
Schriftartmesswerten oben in der ersten Zeile und unter der letzten Zeile eines Textes unten angezeigt.
Ab Version 2024.01.01
von „Compose BOM“ ist includeFontPadding
festgelegt
auf false
. Dadurch wird das Standardtextlayout stärker an die
gängige Designtools.
lineHeight
kann jetzt konfiguriert werden
seit Android Q. Sie können lineHeight
für Text
konfigurieren. Verwenden Sie dazu die
lineHeight
, mit dem die Zeilenhöhe auf jede
Text. Mit dem neuen LineHeightStyle API
können Sie dann
wie dieser Text innerhalb des Leerzeichens ausgerichtet wird, und entfernen Sie Leerzeichen.
lineHeight
können Sie mit dem Textblock „em“ (relative Schriftart)
Größe) statt „sp“ (skalierte Pixel) verwenden, um die Genauigkeit zu verbessern. Weitere Informationen zu
den richtigen Textblock auswählen, siehe TextUnit
.
![Bild, das „lineHeight“ als Maß für die Linien direkt darüber und darunter zeigt.](https://developer.android.com/static/develop/ui/compose/images/text-lineheightv3.png?authuser=9&hl=de)
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 ) ) ) )
Zusätzlich zum Anpassen von lineHeight
können Sie Text jetzt weiter zentrieren und gestalten
mithilfe von Konfigurationen mit der experimentellen LineHeightStyle
API: LineHeightStyle.Alignment
und LineHeightStyle.Trim
(includeFontPadding
muss auf false
für
zuschneiden. 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 definiert, wie die Linie im Gruppenbereich ausgerichtet werden soll
aus der Zeilenhöhe. Innerhalb jeder Zeile können Sie den Text an den
oben, unten, zentriert oder proportional angeordnet. 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 mit
verschiedene LineHeightStyle.Trim
-Konfigurationen, wenn die Ausrichtung zentriert ist
(LineHeightStyle.Alignment.Center
)
![]() |
![]() |
LineHeightStyle.Trim.None |
LineHeightStyle.Trim.Both |
![]() |
![]() |
LineHeightStyle.Trim.FirstLineTop |
LineHeightStyle.Trim.LastLineBottom |
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 aufgeteilt wird.
mehrere Linien. Sie können die gewünschte Art des Zeilenumbruchs in den
TextStyle
-Block Ihrer zusammensetzbaren Funktion Text
. Voreingestellte Zeilenumbrüche
umfassen Folgendes:
Simple
: schneller, einfacher Zeilenumbruch. Empfohlen für Texteingabefelder.Heading
: Bahnbrechende Regeln. Empfohlen wie 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 ) ) } ) )
![Ein Textblock, der einen einfachen Zeilenumbruch im Vergleich zu einem Text zeigt
mit einer Absatz-optimierten Absatzstrategie. Der Textblock mit den einfachen
Bei dieser Strategie
sind größere Schwankungen bei den Linienlängen möglich.](https://developer.android.com/static/develop/ui/compose/images/text/simple-paragraph.png?authuser=9&hl=de)
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
: Es wird versucht, die Zeilenlänge des Texts auszugleichen. Dabei wird ebenfalls versucht, die Zeilenlänge auszugleichen. automatische Bindestrichsetzung, falls aktiviert. Empfohlen für kleine Displays, z. B. Uhren, 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
oderSimple
.)Simple
: einfache, schnelle Strategie. Wenn diese Option aktiviert ist, erfolgt die Bindestrichsetzung nur bei die nicht auf eine ganze Zeile passen. Nützlich zum Bearbeiten von Text um zu vermeiden, dass sich die Position während der Eingabe ändert.
Im folgenden Snippet sehen Sie den Unterschied zwischen einem Absatz mit Standardeinstellungen
und einem Absatz, der für kleine Bildschirme optimiert ist, mit dem Zeilenumbruch für Balanced
Strategie:
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 ) } ) )
![Ein Absatz mit einer ausgewogenen Strategie für Zeilenumbrüche
ohne Strategie formatiert. Der Absatz mit dem gleichmäßigen Zeilenumbruch
hat eine einheitlichere Linienlänge als die Standardstrategie.](https://developer.android.com/static/develop/ui/compose/images/text/balanced-default.png?authuser=9&hl=de)
Balanced
formatiert wurde
(oben) im Vergleich zu einem Absatz, der ohne Zeilenumbrüche formatiert ist.Überlegungen zu CJK
Sie können LineBreak
auch mit Strictness
und
WordBreak
APIs, die speziell für CJK-Sprachen entwickelt wurden.
Die Auswirkungen dieser APIs werden möglicherweise nicht immer in anderen Sprachen als CJK angezeigt. Insgesamt
Regeln für Zeilenumbrüche werden
basierend auf dem Gebietsschema definiert.
Strictness
beschreibt die Strenge des Zeilenumbruchs wie folgt:
Eigenschaften:
Default
: standardmäßige Bruchregeln für die Sprache. KannNormal
entsprechen oderStrict
.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 dem
folgenden Properties:
Default
: standardmäßige Bruchregeln 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:
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 ) )
![Japanischer Text mit Einstellungen für „Strenge“ und „WordBreak“ im Vergleich zum Standardtext.](https://developer.android.com/static/develop/ui/compose/images/text/cjk-line-break.png?authuser=9&hl=de)
Strictness
und WordBreak
formatierter Text (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.
Die Bindestrichsetzung ist standardmäßig nicht aktiviert. Um die Bindestrichsetzung zu aktivieren, fügen Sie
Hyphens.Auto
als Parameter in einem TextStyle
-Block:
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 ) ) } ) )
![Ein Absatz ohne und mit aktivierter Bindestrichsetzung.
Wenn die Bindestrichsetzung aktiviert ist, werden Wörter mit Bindestrich dargestellt und auf zwei Zeilen aufgeteilt.](https://developer.android.com/static/develop/ui/compose/images/text/hyphens.png?authuser=9&hl=de)
Wenn diese Option aktiviert ist, erfolgt die Bindestricheung nur unter den folgenden Bedingungen:
- Ein Wort passt nicht auf eine Zeile. Wenn Sie eine
Simple
-Strategie zum Zeilenumbruch verwenden, Die Bindestricheung eines Wortes tritt nur auf, wenn eine Zeile kürzer ist als das einzelne Wort . - Die entsprechende Sprache ist auf Ihrem Gerät eingestellt, wie z. B. mit im System vorhandenen Wörterbüchern ermittelt.
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“