Icônes 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 Icon composant est un élément d'interface utilisateur permettant d' afficher des icônes monochromes. Les icônes gèrent intelligemment la teinte et la mise à l'échelle afin de rester lisibles et visuellement cohérentes avec le GlimmerTheme.

Tailles

Bien que les icônes soient définies par défaut sur la taille fournie par LocalIconSize, vous pouvez également utiliser les trois tailles d'icônes fournies pour définir une taille spécifique. Ces tailles sont également utilisées par défaut dans les contextes suivants :

Jeton de taille Règle d'utilisation par défaut

small

Pour les éléments de liste standards ou les petits chips.

medium

Pour les icônes autonomes et les chips de titre.

large

Pour les composants très importants, comme les cartes.

Sources d'icônes

Les icônes peuvent accepter ImageVector, ImageBitmap ou Painter comme source. Lorsque vous définissez vos propres icônes, utilisez ImageVector dans la mesure du possible pour favoriser un rendu net à n'importe quelle échelle sur les lunettes d'affichage.

Couleur et teinte

  • Teinte automatique : l'icône résout sa couleur en fonction de la LocalContentColor fournie par la surface parente LocalContentColor fournie par la surface parente, comme une surface ou un Button.
  • Teinte manuelle : utilisez le paramètre tint pour appliquer une couleur spécifique.
  • Composants multicolores : pour les icônes qui ne doivent pas être teintées (comme les logos de marque multicolores), définissez tint = Color.Unspecified.
  • Images génériques : pour les photographies ou les images génériques qui ne suivent pas les règles de dimensionnement et de teinte des icônes, utilisez plutôt la androidx.compose.foundation.Image standard.

Exemple : Icône de base

Le code suivant crée une icône de base :

@Composable
fun IconSample() {
    Icon(FavoriteIcon, contentDescription = "Localized description")
}

Exemple : Icônes avec couleur

Le code suivant crée une icône colorée à l'aide de la couleur principale du thème :

@Composable
fun ColoredIconSample() {
    Icon(
        FavoriteIcon,
        tint = GlimmerTheme.colors.primary,
        contentDescription = "Localized description",
    )
}

Exemple : Icônes de différentes tailles

Le code suivant crée une icône dont la taille est modifiée pour être spécifique :

@Composable
fun SizedIconSample() {
    Icon(
        FavoriteIcon,
        contentDescription = "Localized description",
        modifier = Modifier.size(GlimmerTheme.iconSizes.large),
    )
}

Points clés concernant le code

  • La taille de l'icône est personnalisée à l'aide de GlimmerTheme.iconSizes avec un modificateur. Pour les icônes, la valeur par défaut est GlimmerTheme.iconSizes.medium. Utilisez ces tailles au lieu de coder en dur des valeurs pour maintenir la cohérence dans votre interface utilisateur.
  • Fournit une contentDescription localisée pour l'icône. Fournissez toujours ces descriptions, sauf si l'icône est purement décorative.