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 Display
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.

Pour les 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 bouton 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 de l'icône interne

32 x 32 dp

Marge intérieure par défaut du contenu

GlimmerTheme.componentSpacingValues.small

États

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

  • Activé : état interactif par défaut.
  • Concentré : applique GlimmerTheme.depthEffectLevels.level1 et une bordure de mise en évidence.
  • 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 icônes :

  • Forme : la valeur par défaut est GlimmerTheme.shapes.large (généralement circulaire).
  • Couleur : la valeur par défaut est GlimmerTheme.colors.surface.
  • Couleur du contenu : calculée automatiquement à partir de la couleur d'arrière-plan, sauf si elle est explicitement fournie.
  • Marge intérieure du contenu : fournit l'espacement par défaut entre l'icône et le bord du conteneur.
  • Taille minimale : valeur 48.dp fixe pour éviter que les boutons ne deviennent trop petits pour être utilisés.
  • Taille de l'icône : la valeur par défaut est 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 = {}) { Icon(FavoriteIcon, "Localized description") }
}