Cette page explique comment styliser le texte de votre paragraphe. Pour définir un style au niveau du paragraphe, vous pouvez configurer des paramètres tels que textAlign et lineHeight, ou définir vos propres ParagraphStyle.
Définir l'alignement du texte
Le paramètre textAlign vous permet de définir l'alignement horizontal du texte dans une zone de surface 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
Textpour les alphabets de gauche à droite tels que le latin, le cyrillique ou le hangûl - Bord droit du conteneur
Textpour 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)
)
}
Si vous souhaitez définir manuellement l'alignement du texte d'un composable Text, il est préférable d'utiliser TextAlign.Start et TextAlign.End au lieu de TextAlign.Left et TextAlign.Right respectivement, car ils se résolvent vers le bord droit du composable Text en fonction de l'orientation du texte dans 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é.
Ajouter plusieurs styles dans un paragraphe
Pour ajouter plusieurs styles à un paragraphe, vous pouvez utiliser ParagraphStyle dans un AnnotatedString, qui peut être annoté avec des styles d'annotations arbitraires.
Lorsqu'une partie du texte est marquée d'un ParagraphStyle, elle est séparée du texte restant comme s'il y avait des sauts de ligne au début et à la fin.
Pour savoir comment ajouter plusieurs styles dans un texte, consultez Ajouter plusieurs styles dans le texte.
AnnotatedString dispose d'un compilateur de sûreté du typage pour faciliter la création: buildAnnotatedString. L'extrait de code 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")
}
}
)
}
Ajuster la hauteur des lignes et la marge intérieure
includeFontPadding est une ancienne propriété qui ajoute une marge intérieure en fonction des 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 sur false par défaut, ce qui harmonise davantage la mise en page de texte par défaut avec les outils de conception courants.
La possibilité de configurer lineHeight n'est pas nouvelle. Elle est disponible depuis Android Q. Vous pouvez configurer lineHeight pour Text à l'aide du paramètre lineHeight, qui répartit la hauteur de chaque ligne de texte. Vous pouvez ensuite utiliser le nouveau LineHeightStyle API pour configurer davantage l'alignement de ce texte dans l'espace et supprimer les espaces blancs.
Pour améliorer la précision, vous pouvez ajuster lineHeight en utilisant l'unité de texte "em" (taille de police relative) au lieu de "sp" (pixels mis à l'échelle). Pour en savoir plus sur la sélection d'une unité de texte appropriée, consultez TextUnit.
lineHeight, et réduisez les espaces 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
)
)
)
)
En plus d'ajuster lineHeight, vous pouvez désormais centrer et styliser davantage le texte à l'aide de configurations avec l'API expérimentale LineHeightStyle: LineHeightStyle.Alignment et LineHeightStyle.Trim (includeFontPadding doit être défini sur false pour que l'outil Couper fonctionne). L'alignement et l'outil Couper utilisent l'espace mesuré entre les lignes de texte pour le répartir plus efficacement sur toutes les lignes, y compris une seule ligne de texte et la ligne supérieure d'un bloc de texte.
LineHeightStyle.Alignment définit comment aligner la ligne dans l'espace fourni par la hauteur de la ligne. Au sein de chaque ligne, vous pouvez aligner le texte en haut, en bas, au centre ou proportionnellement. LineHeightStyle.Trim vous permet ensuite de laisser ou de 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é à partir des ajustements lineHeight et d'alignement. Les exemples suivants montrent à quoi ressemble le texte multiligne avec 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 |
Consultez l'article de blog Corriger une marge intérieure de police dans le texte Compose pour en savoir plus sur le contexte de cette modification, sur le fonctionnement de includeFontPadding dans le système de vues, ainsi que sur les modifications apportées pour Compose et les nouvelles API LineHeightStyle.
Insérer des sauts de ligne
L'API LineBreak définit les critères de répartition du texte sur plusieurs lignes. Vous pouvez spécifier le type de saut de ligne souhaité dans le bloc TextStyle de votre composable Text. Les types de saut de ligne prédéfinis sont les suivants:
Simple: saut de ligne basique et rapide. Cette option est recommandée pour les champs de saisie de texte.Heading: saut de ligne avec des règles plus larges. Recommandé pour les textes courts, tels que les titres.Paragraph: saut de ligne plus lent et de meilleure qualité pour une meilleure lisibilité. Recommandé pour les grandes quantités de texte, comme les paragraphes.
L'extrait de code suivant utilise à la fois Simple et Paragraph pour spécifier le comportement de 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
)
)
}
)
)
Dans le résultat ci-dessus, notez que le comportement de saut de ligne Paragraph produit 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 paramètre Strategy. Le Strategy peut être l'un des éléments suivants:
Balanced: tente d'équilibrer la longueur des lignes du texte, en appliquant également un trait d'union automatique si cette option est activée. Recommandé pour les petits écrans, comme les montres, afin d'optimiser la quantité de texte affiché.HighQuality: optimise un paragraphe pour rendre le texte plus lisible, y compris le trait d'union, si cette option est activée. (Doit être une valeur par défaut pour tout ce qui n'est pasBalancedouSimple.)Simple: stratégie simple et rapide Si cette option est activée, le trait d'union n'est utilisé que pour les mots qui ne tiennent pas seuls sur une ligne entière. Utile pour modifier du texte afin d'éviter de changer de position lors de la saisie.
L'extrait de code suivant montre la différence entre un paragraphe doté des paramètres par défaut et un paragraphe optimisé pour les petits écrans avec la stratégie de saut de ligne Balanced:
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 (en haut) par rapport à un paragraphe mis en forme sans stratégie de saut de ligne.Considérations sur le langage CJK
Vous pouvez également personnaliser LineBreak avec les API Strictness et WordBreak, qui ont été conçues spécifiquement pour le langage CJK.
Il est possible que vous ne voyiez pas toujours les effets de ces API dans les langages autres que le CJK. De manière générale, les règles de saut de ligne sont définies en fonction des paramètres régionaux.
Strictness décrit la sévérité du saut de ligne avec les propriétés suivantes:
Default: règles non conformes par défaut pour les paramètres régionaux. Peut correspondre àNormalouStrict.Loose: règles les moins restrictives. Convient aux lignes courtes.Normal: règles de saut de ligne les plus courantes.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 les propriétés suivantes:
Default: règles non conformes par défaut pour les paramètres régionaux.Phrase: le saut de ligne est basé sur les expressions.
L'extrait de code suivant utilise une sévérité Strict et un paramètre de scission de mots Phrase pour un texte 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
)
)
Strictness et WordBreak (haut), par rapport au texte mis en forme uniquement avec LineBreak.Heading (en bas).Trait d'union divisé sur plusieurs lignes
L'API Hyphens vous permet d'ajouter une fonctionnalité de trait d'union à votre application. Le terme trait d'union consiste à insérer un signe de ponctuation en forme de tiret pour indiquer qu'un 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 appropriés.
Par défaut, le trait d'union n'est pas activé. Pour activer la tirets, ajoutez Hyphens.Auto comme 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
)
)
}
)
)
Lorsque cette option est activée, le trait d'union n'est utilisé que dans les cas suivants:
- 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 n'a lieu que si une ligne est plus courte que le mot en question. - Les paramètres régionaux appropriés sont définis sur votre appareil, car le trait d'union est déterminé à l'aide des dictionnaires présents sur le système.
Recommandations personnalisées
- Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
- Appliquer un style au texte
- Principes de base de la mise en page dans Compose
- Mesures intrinsèques dans les mises en page Compose