Texte dans Jetpack Compose Glimmer

Appareils XR concernés
Ces conseils vous aident à créer des expériences pour ces types d'appareils XR.
En savoir plus sur les types d'appareils XR →
Lunettes d'affichage
En savoir plus sur les types d'appareils XR →

Dans Jetpack Compose Glimmer, le Text composant vous permet de définir différentes propriétés de texte, telles que la couleur, la taille, le style, l'épaisseur, la famille de police, l'espacement entre les lettres et l'alignement du texte.

Le texte de Jetpack Compose Glimmer est unique, car il gère intelligemment la correspondance des couleurs. Par exemple, si aucune couleur n'est spécifiée, le texte est défini par défaut sur la couleur de contenu fournie par la surface la plus proche sur laquelle il se trouve.

Exemple : Créer un titre de texte dans une zone

@Composable
fun TextSample() {
      Text(
      text = "This is a sample heading",
      style = GlimmerTheme.typography.titleLarge )
}

Points essentiels concernant le code

  • Comme aucune couleur n'est spécifiée, ce texte recherche la surface la plus proche pour choisir la couleur la plus lisible (généralement le blanc).

Dimensionnement

L'échelle typographique de Jetpack Compose Glimmer est beaucoup plus grande que celle de Material Design mobile standard. Les styles tels que TitleLarge et BodyLarge sont tous deux 30.sp, et la légende est 18.sp :

Style Taille (sp) Poids Hauteur de ligne

titleLarge

30

750

36.sp

titleMedium

24

750

28.sp

titleSmall

20

750

28.sp

bodyLarge

30

520

36.sp

bodyMedium

24

520

36.sp

bodySmall

20

520

28.sp

légende

18

650

24.sp

Utiliser Google Sans Flex

Google Sans Flex est une police variable spécialement conçue pour les lunettes d'IA et fournie dans le cadre de Jetpack Compose Glimmer. Les angles arrondis et les axes réglables de la police permettent un dimensionnement optique idéal, ce qui garantit que le texte reste lisible et facile à lire. Si possible, pour améliorer la cohérence entre votre application et le système pour les utilisateurs, utilisez Google Sans Flex pour tout le texte affiché sur les lunettes d'affichage.

Pour utiliser Google Sans Flex, ajoutez la bibliothèque glimmer-google-fonts aux dépendances de votre application, puis appliquez la police globalement à GlimmerTheme :

@Composable
fun GoogleSansFlexTypographySample() {
    val typography = createGoogleSansFlexTypography()
    GlimmerTheme(typography = typography) {
        Text("Hello World", style = GlimmerTheme.typography.titleLarge)
    }
}