Boutons d'icône 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, un IconButton est un composant compact et interactif utilisé pour exposer des actions supplémentaires d'un simple geste.

Les boutons d'icône sont plus petits que les boutons standards, mais ils conservent une limite physique pour faciliter l'interaction sur les lunettes d'affichage.

Pour d'autres cas d'utilisation, il existe également des boutons standards et des boutons à bascule.

Exemple de différents styles de boutons d'icône dans Jetpack Compose Glimmer. Ces exemples montrent cinq états de boutons d'icône : activé (1), sélectionné (2), appuyé (3), désactivé (4), désactivé et sélectionné (5).

Tailles et dimensions

Élément Dimension

Taille minimale du conteneur

48 x 48 dp

Taille interne de l'icône

32 x 32 dp

Marge intérieure par défaut du contenu

GlimmerTheme.componentSpacingValues.small

États

Les boutons d'icône de Jetpack Compose Glimmer changent d'apparence pour communiquer leur état.

  • Activé : état interactif par défaut.
  • Sélectionné : applique GlimmerTheme.depthEffectLevels.level1 et une bordure de sélection.
  • Appuyé : applique une superposition blanche semi-transparente à la surface.
  • Désactivé : le bouton n'est pas interactif et le retour visuel est supprimé.

Valeurs par défaut des boutons d'icône

Les valeurs par défaut suivantes s'appliquent aux boutons d'icône :

  • Forme : valeur par défaut GlimmerTheme.shapes.large (généralement circulaire).
  • Couleur : valeur par défaut GlimmerTheme.colors.surface.
  • Couleur du contenu : calculée automatiquement à partir de la couleur d'arrière-plan, sauf indication explicite.
  • Marge intérieure du contenu : fournit l'espacement par défaut entre l'icône et le bord du conteneur.
  • Taille minimale : valeur fixe 48.dp pour éviter que les boutons ne deviennent trop petits pour interagir.
  • Taille de l'icône : valeur par défaut GlimmerTheme.iconSizes.small (32.dp).

Exemple : bouton d'icône

Le code suivant crée un bouton d'icône avec les caractéristiques par défaut :

@Composable
fun IconButtonSample() {
    IconButton(onClick = { /* Handle action */ }) {
        Icon(FavoriteIcon, contentDescription = "Localized description")
    }
}