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 →

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 :

Sources de l'icône

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 photos 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 dans une surface

Le code suivant crée une icône placée à l'intérieur d'une surface circulaire, en utilisant la couleur principale du thème :

@Composable
fun IconSampleUsage() {
    GlimmerLazyColumn(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        item { IconSizesSample() }
        item {
            Icon(
                FavoriteIcon,
                "Localized description",
                Modifier.surface(
                        shape = CircleShape,
                        color = GlimmerTheme.colors.primary,
                        border = null,
                    )
                    .padding(12.dp),
            )
        }
    }
}
IconSamples.kt

Exemple : Icônes de différentes tailles

Le code suivant illustre les différentes tailles d'icônes :

@Composable
fun IconSizesSample() {
    val iconSizes = GlimmerTheme.iconSizes
    Column(
        verticalArrangement = Arrangement.spacedBy(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.small))
        // medium is also the default size, defining explicitly for clarity
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.medium))
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.large))
    }
}
IconSamples.kt

Points clés concernant le code

• La taille de chaque 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 chaque icône. Fournissez toujours ces descriptions, sauf si l'icône est purement décorative.