Le composable Text
comporte plusieurs paramètres facultatifs pour styliser son contenu.
Vous trouverez ci-dessous la liste des paramètres qui couvrent les cas d'utilisation de texte les plus courants.
Pour connaître tous les paramètres de Text
, consultez la documentation Compose Text
le code source.
Lorsque vous définissez l'un de ces paramètres, vous appliquez le style à l'ensemble de la valeur de texte. Si vous devez appliquer plusieurs styles sur la même ligne ou paragraphes, reportez-vous à la section sur l'affichage de plusieurs styles de texte.
Styles de texte courants
Les sections suivantes décrivent les manières courantes de styliser votre texte.
Modifier la couleur du texte
@Composable fun BlueText() { Text("Hello World", color = Color.Blue) }
Modifier la taille du texte
@Composable fun BigText() { Text("Hello World", fontSize = 30.sp) }
Mettre le texte en italique
Utilisez le paramètre fontStyle
pour mettre du texte en italique (ou définissez un autre style de police avec FontStyle
).
@Composable fun ItalicText() { Text("Hello World", fontStyle = FontStyle.Italic) }
Mettre le texte en gras
Utilisez le paramètre fontWeight
pour mettre du texte en gras (ou définissez une autre épaisseur de police avec FontWeight
).
@Composable fun BoldText() { Text("Hello World", fontWeight = FontWeight.Bold) }
Ajouter une ombre
Le paramètre style
vous permet de définir un objet de type TextStyle
.
et configurer plusieurs paramètres, comme l'ombre.
Shadow
reçoit une couleur pour l'ombre, le décalage (ou l'emplacement où elle se trouve par rapport à l'élément Text
) et le rayon de floutage, qui détermine le niveau de floutage de l'ombre.
@Composable fun TextShadow() { val offset = Offset(5.0f, 10.0f) Text( text = "Hello world!", style = TextStyle( fontSize = 24.sp, shadow = Shadow( color = Color.Blue, offset = offset, blurRadius = 3f ) ) ) }
Ajouter plusieurs styles au texte
Pour définir différents styles au sein d'une même Text
utilisez un élément AnnotatedString
,
une chaîne qui peut être annotée avec
des styles d'annotations arbitraires.
AnnotatedString
est une classe de données contenant les éléments suivants :
- Une valeur
Text
- Une
List
deSpanStyleRange
, qui équivaut au style intégré avec une plage de positions dans la valeur de texte - Une
List
deParagraphStyleRange
, spécifiant l'alignement, la direction, la hauteur et le style du retrait du texte
TextStyle
est destiné à être utilisé
dans le composable Text
, alors que SpanStyle
et ParagraphStyle
doit être utilisé dans AnnotatedString
. Pour en savoir plus sur les styles multiples dans
à un paragraphe, consultez Ajouter plusieurs styles dans un paragraphe.
AnnotatedString
possède une protection avec sûreté du typage
professionnel
pour faciliter la création: buildAnnotatedString
.
@Composable fun MultipleStylesInText() { Text( buildAnnotatedString { withStyle(style = SpanStyle(color = Color.Blue)) { append("H") } append("ello ") withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) { append("W") } append("orld") } ) }
Activer les styles avancés avec Brush
Pour activer un style de texte plus avancé, vous pouvez utiliser l'API Brush
avec
TextStyle
et SpanStyle
. Où que vous soyez,
utiliser TextStyle
ou SpanStyle
, vous pouvez maintenant utiliser Brush
.
Appliquer un style au texte à l'aide d'un pinceau
Configurez votre texte à l'aide d'un pinceau intégré dans TextStyle
. Par exemple :
pouvez configurer un pinceau linearGradient
pour votre texte comme suit:
val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/) Text( text = text, style = TextStyle( brush = Brush.linearGradient( colors = gradientColors ) ) )
![Utilisation de la fonction `linearGradient` de l'API Brush avec une liste définie de couleurs.](https://developer.android.google.cn/static/develop/ui/compose/images/text-designmain.png?authuser=19&hl=fr)
linearGradient
de l'API Brush avec une liste définie de couleursVous n'êtes pas limité à ce jeu de couleurs ou à ce style de coloration particulier. Alors que
nous avons fourni un exemple simple à mettre en évidence. Utilisez l'une des
pinceaux ou même simplement une SolidColor
pour améliorer votre texte.
Intégrations
Étant donné que vous pouvez utiliser Brush
avec TextStyle
et SpanStyle
,
l'intégration à TextField
et buildAnnotatedString
est parfaite.
Pour en savoir plus sur l'utilisation de l'API pinceau dans un TextField
, consultez
Saisie de style avec l'API Brush.
Ajout de styles avec SpanStyle
Appliquer un pinceau sur une zone de texte
Si vous souhaitez n'appliquer le pinceau qu'à certaines parties de votre texte, utilisez
buildAnnotatedString
et l'API SpanStyle
, ainsi que votre pinceau
et le gradient de votre choix.
Text( text = buildAnnotatedString { append("Do not allow people to dim your shine\n") withStyle( SpanStyle( brush = Brush.linearGradient( colors = rainbowColors ) ) ) { append("because they are blinded.") } append("\nTell them to put some sunglasses on.") } )
![Utilisation d'un pinceau par défaut avec le style linearGradient pour le texte.](https://developer.android.google.cn/static/develop/ui/compose/images/text-style.png?authuser=19&hl=fr)
linearGradient
comme style pour Text
.Opacité dans un segment de texte
Pour ajuster l'opacité d'un segment spécifique du texte, utilisez l'attribut SpanStyle
paramètre alpha
facultatif. Utilisez le même pinceau pour
les deux parties d'un texte et modifier le paramètre alpha dans le segment correspondant.
Dans l'exemple de code, le premier segment du texte s'affiche avec une demi-opacité
(alpha =.5f
), tandis que la seconde s'affiche avec une opacité totale (alpha = 1f
).
val brush = Brush.linearGradient(colors = rainbowColors) buildAnnotatedString { withStyle( SpanStyle( brush = brush, alpha = .5f ) ) { append("Text in ") } withStyle( SpanStyle( brush = brush, alpha = 1f ) ) { append("Compose ❤️") } }
![Utilisation du paramètre alpha de buildAnnotatedString et de SpanStyle, avec linearGradient pour ajouter l'opacité d'un segment de texte.](https://developer.android.google.cn/static/develop/ui/compose/images/text-opacity.png?authuser=19&hl=fr)
buildAnnotatedString
et de SpanStyle
, ainsi que de linearGradient
pour ajouter l'opacité d'un segment de texteRessources supplémentaires
Pour obtenir d'autres exemples de personnalisation, consultez la section Effleurer vers le haut du texte de Compose
Article de blog sur le coloriage Si vous souhaitez en savoir plus sur
comment Brush
s'intègre à notre API Animations, consultez la section Animer la coloration du texte au pinceau.
dans Compose.
Appliquer un effet de rectangle au texte
Vous pouvez appliquer le modificateur basicMarquee
à n'importe quel composable pour
un effet de défilement animé. Le rectangle de sélection se produit si le contenu
est trop large pour tenir compte des contraintes disponibles. Par défaut, basicMarquee
a
certaines configurations (telles que la vitesse et le délai initial), mais vous pouvez
modifier ces paramètres pour personnaliser l'effet.
L'extrait de code suivant implémente un effet de rectangle de sélection de base sur un composable Text
:
@OptIn(ExperimentalFoundationApi::class) @Composable fun BasicMarqueeSample() { // Marquee only animates when the content doesn't fit in the max width. Column(Modifier.width(400.dp)) { Text( "Learn about why it's great to use Jetpack Compose", modifier = Modifier.basicMarquee(), fontSize = 50.sp ) } }
Figure 6. Modificateur basicMarquee
appliqué au texte.
Recommandations personnalisées
- Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
- Style de paragraphe
- Material Design 2 dans Compose
- Modificateurs graphiques