Appliquer un style au texte

Le composable Text comporte plusieurs paramètres facultatifs pour styliser son contenu. Vous trouverez ci-dessous la liste des paramètres qui couvrent la plupart des cas d'utilisation courants liés au texte. Pour connaître tous les paramètres de Text, consultez le code source de Compose Text.

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 dans la même ligne ou les mêmes paragraphes, découvrez comment intégrer plusieurs styles.

Styles de texte courants

Les sections suivantes décrivent les méthodes courantes pour appliquer un style à votre texte.

Modifier la couleur du texte

@Composable
fun BlueText() {
    Text("Hello World", color = Color.Blue)
}
TextSnippets.kt

Modifier la taille du texte

@Composable
fun BigText() {
    Text("Hello World", fontSize = 30.sp)
}
TextSnippets.kt

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

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

Ajouter une ombre

Le paramètre style permet de définir un objet de type TextStyle et de configurer plusieurs paramètres tels que 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
            )
        )
    )
}
TextSnippets.kt

Ajouter plusieurs styles dans le texte

Pour définir différents styles dans le même composable Text, utilisez AnnotatedString, chaîne pouvant ê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 de SpanStyleRange, qui équivaut au style intégré avec une plage de positions dans la valeur de texte
• Une List de ParagraphStyleRange, spécifiant l'alignement, la direction, la hauteur et le style du retrait du texte

TextStyle est destiné au composable Text, tandis que SpanStyle et ParagraphStyle sont destinés à être utilisés dans AnnotatedString. Pour en savoir plus sur l'utilisation de plusieurs styles dans un paragraphe, consultez Ajouter plusieurs styles dans un paragraphe.

AnnotatedString dispose d'un compilateur de sûreté du typage 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")
        }
    )
}
TextSnippets.kt

Afficher du code HTML avec des liens dans le texte

Utilisez AnnotatedString.fromHtml() pour afficher du texte au format HTML avec des liens cliquables dans votre application Jetpack Compose. Cette fonction convertit une chaîne contenant des balises HTML en un AnnotatedString, ce qui permet de gérer le style et les liens.

Exemple : HTML avec lien stylisé

Cet extrait affiche du texte au format HTML avec un lien, en appliquant un style spécifique au lien :

@Composable
fun AnnotatedHtmlStringWithLink(
    modifier: Modifier = Modifier,
    htmlText: String = """
       <h1>Jetpack Compose</h1>
       <p>
           Build <b>better apps</b> faster with <a href="https://www.android.com">Jetpack Compose</a>
       </p>
    """.trimIndent()
) {
    Text(
        AnnotatedString.fromHtml(
            htmlText,
            linkStyles = TextLinkStyles(
                style = SpanStyle(
                    textDecoration = TextDecoration.Underline,
                    fontStyle = FontStyle.Italic,
                    color = Color.Blue
                )
            )
        ),
        modifier
    )
}
HtmlStyling.kt

Points clés concernant le code

• AnnotatedString.fromHtml() convertit la chaîne htmlText en un AnnotatedString. Le paramètre linkStyles personnalise l'apparence du lien.

• TextLinkStyles définit le style des liens dans le code HTML. SpanStyle définit la décoration du texte, le style de police et la couleur des liens.

• Le composable Text affiche le AnnotatedString obtenu.

Résultat

Cet extrait active "Jetpack Compose" en tant que lien cliquable, en bleu, souligné et en italique :

Activer l'application de styles avancés avec Brush

Pour activer un style de texte plus avancé, vous pouvez utiliser l'API Brush avec TextStyle et SpanStyle. Partout où vous utiliseriez habituellement TextStyle ou SpanStyle, vous pouvez désormais utiliser Brush.

Utiliser un pinceau pour appliquer un style au texte

Configurez votre texte à l'aide d'un pinceau intégré dans TextStyle. Par exemple, vous 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
        )
    )
)
TextSnippets.kt

Vous n'êtes pas limité à ce jeu de couleurs ou à ce style de coloration particulier. Bien que nous ayons fourni un exemple simple pour mettre en évidence, utilisez l'un des pinceaux intégrés ou même simplement un SolidColor pour améliorer votre texte.

Intégrations

Comme vous pouvez utiliser Brush avec TextStyle et SpanStyle, l'intégration à TextField et buildAnnotatedString est transparente.

Pour en savoir plus sur l'utilisation de l'API Brush dans un TextField, consultez Appliquer un style à une entrée avec l'API Brush.

Style supplémentaire avec SpanStyle

Appliquer un pinceau à une étendue de texte

Si vous ne souhaitez appliquer un pinceau qu'à certaines parties de votre texte, utilisez buildAnnotatedString et l'API SpanStyle, ainsi que le pinceau et le dégradé 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.")
    }
)
TextSnippets.kt

Opacité dans un segment de texte

Pour ajuster l'opacité d'une partie de texte spécifique, utilisez le paramètre facultatif alpha de SpanStyle. Utilisez le même pinceau pour les deux parties d'un texte et modifiez le paramètre alpha dans l'intervalle correspondant. Dans l'exemple de code, le premier segment de texte s'affiche avec une opacité de moitié (alpha =.5f), tandis que le second 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 ❤️")
    }
}
TextSnippets.kt

Appliquer un effet de texte défilant au texte

Vous pouvez appliquer le modificateur basicMarquee à n'importe quel composable pour produire un effet de défilement animé. L'effet de défilement se produit si le contenu est trop large pour tenir dans les contraintes disponibles. Par défaut, basicMarquee dispose de 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 texte défilant de base sur un composable Text :

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

Figure 6. Le modificateur basicMarquee appliqué au texte.

Ressources supplémentaires

• Coloration du texte dans Compose
• Animer le pinceau de coloration du texte dans Compose
• Accepter plusieurs liens dans une même chaîne de texte