Appliquer un style à un paragraphe

Cette page explique comment styliser le texte de vos paragraphe. Pour définir un style au niveau du paragraphe, vous pouvez configurer des paramètres tels que textAlign et lineHeight, ou définissez votre propre ParagraphStyle.

Définir l'alignement du texte

Le paramètre textAlign vous permet de définir l'axe horizontal alignement de la dans une zone composable Text.

Par défaut, Text sélectionne l'alignement de texte naturel en fonction de la valeur de son contenu :

• Bord gauche du conteneur Text pour les alphabets de gauche à droite tels que le latin, le cyrillique ou le hangûl
• Bord droit du conteneur Text pour les alphabets de droite à gauche tels que l'arabe ou l'hébreu

@Composable
fun CenterText() {
    Text(
        "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp)
    )
}
TextSnippets.kt

Si vous souhaitez définir manuellement l'alignement du texte d'un composable Text, préférez avec TextAlign.Start et TextAlign.End au lieu de TextAlign.Left, et TextAlign.Right respectivement, lorsqu'elles se résolvent vers le bord droit de Text en fonction de l'orientation du texte de la langue préférée. Par exemple, TextAlign.End aligne le texte français vers la droite et le texte arabe vers la gauche, mais TextAlign.Right aligne le texte vers la droite, quel que soit l'alphabet utilisé.

Remarque : L'alignement du texte est différent de l'alignement de la mise en page, qui consiste à positionner un composable dans un conteneur tel que Row ou Column. Pour plus consultez la section Principes de base de la mise en page dans Compose.

Ajouter plusieurs styles dans un paragraphe

Pour ajouter plusieurs styles dans un paragraphe, vous pouvez utiliser ParagraphStyle dans une AnnotatedString, qui peut être annotée avec des styles d'annotations arbitraires. Lorsqu'une partie de votre texte est marquée à l'aide d'un ParagraphStyle, elle est séparés du texte restant, comme s'il comportait des sauts de ligne au début et à la fin.

Pour en savoir plus sur l'ajout de plusieurs styles dans un texte, consultez Ajouter plusieurs styles au texte

AnnotatedString possède une protection avec sûreté du typage professionnel pour faciliter la création: buildAnnotatedString. L'extrait suivant utilise buildAnnotatedString pour définir ParagraphStyle:

@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

Ajuster la hauteur de la ligne et la marge intérieure

includeFontPadding est une ancienne propriété qui ajoute une marge intérieure supplémentaire en fonction les métriques de police en haut de la première ligne et en bas de la dernière ligne d'un texte. À partir de la version 2024.01.01 de la nomenclature Compose, includeFontPadding est défini à false par défaut, ce qui permet d'aligner la mise en page de texte par défaut sur celle les outils de conception courants.

La possibilité de configurer lineHeight n'est pas nouvelle : elle était déjà disponible depuis Android Q. Vous pouvez configurer lineHeight pour Text à l'aide de la lineHeight, qui répartit la hauteur de la ligne dans chaque ligne de texte. Vous pouvez ensuite utiliser le nouveau LineHeightStyle API pour configurer davantage l'alignement de ce texte dans l'espace, puis supprimez les espaces.

Vous pouvez ajuster lineHeight en utilisant l'unité de texte "em" (police relative). ) au lieu de "sp" (pixels mis à l'échelle) pour une meilleure précision. Pour en savoir plus sur pour sélectionner une unité de texte appropriée, consultez TextUnit.

<ph type="x-smartling-placeholder">

</ph>

Figure 1. Utilisez les options "Alignement" et "Couper" pour ajuster le texte dans le lineHeight défini et supprimer l'espace supplémentaire si nécessaire.

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

En plus d'ajuster lineHeight, vous pouvez désormais centrer et styliser davantage le texte En utilisant des configurations avec l'API expérimentale LineHeightStyle: LineHeightStyle.Alignment et LineHeightStyle.Trim (includeFontPadding doit être défini sur false pour Couper pour ajuster au travail). L'alignement et l'outil Couper utilisent l'espace mesuré entre les lignes de du texte pour le répartir de manière plus appropriée sur toutes les lignes, y compris sur une seule ligne et la ligne supérieure d'un bloc de texte.

LineHeightStyle.Alignment définit comment aligner la ligne dans l'espace. fournies par la hauteur des lignes. Sur chaque ligne, vous pouvez aligner le texte haut, bas, centre ou proportionnellement. LineHeightStyle.Trim vous permet ensuite pour laisser ou supprimer l'espace supplémentaire en haut de la première ligne et en bas de la dernière ligne de votre texte, générée à partir de n'importe quel élément lineHeight et alignement ; des ajustements. Les exemples suivants montrent à quoi ressemble un texte multiligne dans Différentes configurations LineHeightStyle.Trim lorsque l'alignement est centré (LineHeightStyle.Alignment.Center).

LineHeightStyle.Trim.None	LineHeightStyle.Trim.Both
LineHeightStyle.Trim.FirstLineTop	LineHeightStyle.Trim.LastLineBottom

Avertissement :Ces ajustements à l'aide de l'API LineHeightStyle (Trim) ne peuvent fonctionner lorsque vous les utilisez avec la configuration includeFontPadding = false.

Pour en savoir plus, consultez l'article de blog Corriger la marge intérieure de la police dans le texte Compose. plus d'informations sur le contexte de ce changement et sur le fonctionnement de includeFontPadding dans la vue système, et les modifications apportées à Compose et au nouveau LineHeightStyle API.

Insérer des sauts de ligne

L'API LineBreak définit les critères de répartition du texte. plusieurs lignes. Vous pouvez spécifier le type de saut de ligne souhaité dans la Bloc TextStyle de votre composable Text. Types de saut de ligne prédéfinis incluent les éléments suivants:

• Simple : saut de ligne simple et rapide. Option recommandée pour les champs de saisie de texte.
• Heading : rupture de ligne avec des règles plus strictes. Recommandé pour les Shorts du texte, comme les titres.
• Paragraph : saut de ligne plus lent et de meilleure qualité pour une meilleure lisibilité. Cette option est recommandée pour les grandes quantités de texte, telles que les paragraphes.

L'extrait de code suivant utilise à la fois Simple et Paragraph pour spécifier saut de ligne sur un long bloc de texte:

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

Figure 1. Bloc de texte avec une stratégie simple de saut de ligne (en haut) par rapport à une bloc de texte avec saut de ligne optimisé pour les paragraphes (bas).

Dans le résultat ci-dessus, notez que le comportement de saut de ligne Paragraph génère offre un résultat plus équilibré visuellement que le saut de ligne Simple.

Personnaliser les sauts de ligne

Vous pouvez également créer votre propre configuration LineBreak avec le Strategy. . Le Strategy peut être l'un des éléments suivants:

• Balanced : tente d'équilibrer la longueur des lignes du texte, en appliquant également le trait d'union automatique s'il est activé. Pour les petits écrans, comme les montres, afin d'optimiser la quantité de texte affichée.
• HighQuality : optimise un paragraphe pour le rendre plus lisible, y compris tiret s'il est activé. (Doit être utilisé par défaut pour tout ce qui n'est pas Balanced ou Simple.)
• Simple : stratégie basique et rapide Si cette option est activée, le trait d'union n'est effectué que pour des mots qui ne tiennent pas sur une ligne entière. Utile pour modifier du texte pour éviter de changer de position lors de la saisie.

Remarque :Vous pouvez également personnaliser le comportement des sauts de ligne à l'aide de Strictness et WordBreak. Ces paramètres sont conçus pour les langues CJK. vous ne verrez peut-être pas l'effet escompté si vous les utilisez dans des langues autres que le CJK. Pour Pour en savoir plus, consultez la section Considérations relatives à CJK.

L'extrait de code suivant montre la différence entre un paragraphe utilisant les paramètres par défaut et un paragraphe optimisé pour les petits écrans avec le saut de ligne Balanced stratégie:

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

Figure 2. Paragraphe mis en forme avec une stratégie de saut de ligne Balanced (haut) par rapport à un paragraphe mis en forme sans stratégie de saut de ligne.

Considérations relatives à CJK

Vous pouvez également personnaliser LineBreak avec Strictness et Les API WordBreak, conçues spécifiquement pour les langages CJK. Il est possible que vous ne voyiez pas toujours les effets de ces API dans des langues autres que le CJK. Globalement, les règles de saut de ligne sont définies en fonction des paramètres régionaux.

Strictness décrit la sévérité de la ligne, avec l'expression suivante : propriétés:

Remarque :La valeur par défaut recommandée pour Strictness varie en fonction des paramètres régionaux.

• Default : règles destructives par défaut pour les paramètres régionaux. Peut correspondre à Normal ou Strict.
• Loose : règles les moins restrictives. (Convient aux lignes courtes).
• Normal : règles les plus courantes pour les sauts de ligne.
• Strict : règles les plus strictes pour le saut de ligne.

WordBreak définit la manière dont les sauts de ligne doivent être insérés dans les mots avec l'élément les propriétés suivantes:

• Default : règles destructives par défaut pour les paramètres régionaux.
• Phrase : les sauts de ligne s'appuient sur des expressions.

L'extrait de code suivant utilise une sévérité Strict et une rupture de mot Phrase pour un texte en japonais:

Remarque :Pour tester l'extrait suivant, choisissez les paramètres régionaux japonais sur votre appareil (Paramètres > Système > Langues et saisie > Langues > japonais).

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

Figure 3. Texte mis en forme avec les paramètres Strictness et WordBreak (en haut) par rapport au texte mis en forme uniquement avec LineBreak.Heading (en bas).

Trait d'union du texte réparti sur plusieurs lignes

L'API Hyphens vous permet d'ajouter une prise en charge des tirets dans votre application. Un trait d'union consiste à insérer un signe de ponctuation en tiret pour indiquer qu'un le mot est divisé sur plusieurs lignes de texte. Lorsque cette option est activée, un trait d'union est ajouté entre les syllabes d'un mot aux points de trait d'union appropriés.

Par défaut, les traits d'union ne sont pas activés. Pour activer les traits d'union, ajoutez Hyphens.Auto en tant que paramètre dans un bloc TextStyle:

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

Figure 4. Un paragraphe sans trait d'union activé (en haut) ou un paragraphe avec les tirets activés (en bas).

Lorsque cette option est activée, le trait d'union ne se produit que dans les conditions suivantes:

• Un mot ne tient pas sur une ligne. Si vous utilisez une stratégie de saut de ligne Simple, le trait d'union d'un mot ne se produit que si une ligne est plus courte que l'unique d'un mot.
• Les paramètres régionaux appropriés sont définis sur votre appareil, en fonction du trait d'union approprié déterminé à l'aide des dictionnaires présents dans le système.