Boutons d'activation 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 ToggleButton est un composant interactif dont l'apparence change en fonction de son état (coché ou non). Les boutons d'activation sont optimisés pour les lunettes d'affichage afin de fournir des transitions visuelles claires en termes de forme et de couleur. Ces transitions indiquent quand une action ou un paramètre est actif.

Utilisez des boutons d'activation pour exposer des actions qui peuvent être activées ou désactivées. Contrairement aux boutons d'activation qui ne comportent qu'une icône, un bouton d'activation affiche principalement du contenu textuel, mais il accepte des emplacements d'icônes facultatifs pour fournir un contexte supplémentaire.

Pour d'autres cas d'utilisation, il existe également des boutons standards et des boutons d'icône.

Figure 1. Exemple de bouton d'activation dans Jetpack Compose Glimmer utilisé pour les actions de lecture et de pause dans une mise en page d'interface utilisateur.

Anatomie

Un bouton d'activation se compose d'un conteneur qui se transforme entre les états et d'un libellé avec des icônes facultatives.

Partie Description

Conteneur

Animation entre une forme circulaire (non cochée) et un rectangle arrondi (coché).

Libellé

Généralement un Text composable.

Icônes (facultatif)

Emplacements de début ou de fin qui peuvent varier en fonction de l'état.

Tailles

Comme les boutons standards, les boutons d'activation sont disponibles en deux tailles :

Taille Hauteur minimale Règle d'utilisation par défaut

Moyenne

48.dp

Taille interactive par défaut.

Grande

72.dp

Boutons d'activation principaux ou à forte emphase.

Valeurs par défaut des boutons d'activation

Par défaut, les boutons d'activation utilisent ToggleButtonDefaults.animateShape. Cela crée une transition fluide entre les états suivants :

La classe ToggleButtonColors gère la résolution des couleurs pour les états suivants :

Animation

Les boutons d'activation utilisent les valeurs par défaut suivantes pour l'animation :

  • animateShape : fournit un Shape qui interpole les tailles d'angle à l'aide d'une spécification d'animation de rétroaction (stiffness = 600f).
  • colors: fonction de fabrique permettant de personnaliser les couleurs d'arrière-plan et de contenu pour les deux états.
  • CheckedShape: RoundedCornerShape(20.dp) statique utilisé pour l'état coché.
  • contentPadding : hérite de ButtonDefaults.contentPadding.

Exemple : bouton d'activation

Le code suivant crée un bouton d'activation de base :

@Composable
fun ToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(checked = checked, onCheckedChange = { checked = it }) { Text(text) }
}

Exemple : bouton d'activation avec icône de début

Le code suivant crée un bouton d'activation avec une icône de début :

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
        },
        onCheckedChange = { checked = it },
    ) {
        Text(text)
    }
}