Diese Seite wurde von der Cloud Translation API übersetzt.

Absatzstil

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)
    )
}TextSnippets.kt

Der Text

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")
            }
        }
    )
}TextSnippets.kt

Drei Absätze in drei verschiedenen Stilen: Blau, Rot und Fett, einfaches Schwarz

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. — **Abbildung 1**: Über die Optionen „Ausrichtung“ und „Zuschneiden“ kannst du den Text innerhalb des Satzes `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
            )
        )
    )
)TextSnippets.kt

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
                )
            )
        }
    )
)TextSnippets.kt

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. — **Abbildung 1**: Ein Textblock mit einer einfachen Strategie für Zeilenumbrüche (oben) im Vergleich zu einem Textblock mit absatzoptimiertem Zeilenumbruch (unten)

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 oder Simple.)
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
            )
        }
    )
)TextSnippets.kt

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. — **Abbildung 2**: Ein Absatz, der mit der Zeilenumbrüchenstrategie `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. Kann Normal entsprechen oder Strict.
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
    )
)TextSnippets.kt

Japanischer Text mit Einstellungen für „Strenge“ und „WordBreak“ im Vergleich zum Standardtext. — **Abbildung 3**: Mit den Einstellungen `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
                )
            )
        }
    )
)TextSnippets.kt

Ein Absatz ohne und mit aktivierter Bindestrichsetzung.
Wenn die Bindestrichsetzung aktiviert ist, werden Wörter mit Bindestrich dargestellt und auf zwei Zeilen aufgeteilt. — **Abbildung 4**: Absatz ohne aktivierte Bindestrichsetzung (oben) und Absatz im Vergleich mit aktivierter Bindestrichsetzung (unten).

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“