Ajouter un bouton d'activation/de désactivation

Le composant Switch permet aux utilisateurs de basculer entre deux états : activé et désactivé. Utilisez un bouton bascule pour permettre à l'utilisateur d'effectuer l'une des opérations suivantes :

  • Activer ou désactiver un paramètre.
  • Activer ou désactiver une fonctionnalité.
  • Sélectionner une option.

Le composant comporte deux parties : le curseur et la piste. Le curseur est la partie déplaçable du bouton bascule, et la piste est l'arrière-plan. L'utilisateur peut faire glisser le curseur vers la gauche ou la droite pour modifier l'état du bouton bascule. Il peut également appuyer sur le bouton bascule pour l'activer ou le désactiver.

Compatibilité des versions

Cette implémentation nécessite que le minSDK de votre projet soit défini sur le niveau d'API 21 ou supérieur.

Dépendances

Implémenter un bouton bascule

L'exemple suivant est une implémentation minimale du composable Switch :

Résultats

Un bouton bascule de base qui n'est pas coché.
Figure 1. Bouton bascule désactivé.
Bouton bascule de base activé.
Figure 2. Bouton bascule activé.

Créer un curseur personnalisé

Vous pouvez transmettre n'importe quel composable pour le paramètre thumbContent afin de créer un curseur personnalisé. Voici un exemple de bouton bascule qui utilise une icône personnalisée pour son curseur :

Résultats

L'apparence désactivée est la même que dans l'exemple de la section précédente. Toutefois, lorsqu'il est activé, cette implémentation se présente comme suit :

Un bouton bascule qui utilise le paramètre thumbContent pour afficher une icône personnalisée lorsqu'il est activé.
Figure 3. Bouton bascule avec une icône activée personnalisée.

Utiliser des couleurs personnalisées

Utilisez le paramètre colors pour modifier la couleur du curseur et de la piste d'un bouton bascule, en tenant compte de l'état du bouton bascule.

Résultats

Un bouton bascule qui utilise le paramètre "colors" pour afficher un bouton bascule avec des couleurs personnalisées pour le pouce et le tack.
Figure 4. Bouton bascule avec des couleurs personnalisées.

Points essentiels

  • Paramètres de base :

    • checked: état initial du bouton bascule.
    • onCheckedChange: rappel appelé lorsque l'état du bouton bascule change.
    • enabled: indique si le bouton bascule est activé ou désactivé.
    • colors: couleurs utilisées pour le bouton bascule.

  • Paramètres avancés

    • thumbContent: permet de personnaliser l'apparence du curseur lorsqu'il est activé.
    • colors: permet de personnaliser la couleur de la piste et du curseur.

Collections contenant ce guide

Ce guide fait partie de ces collections de guides rapides organisées qui couvrent des objectifs de développement Android plus larges :

Découvrez comment les fonctions composables peuvent vous permettre de créer facilement des composants d'interface utilisateur esthétiques basés sur le système de conception Material Design system.
Collection de guides rapides

Vous avez des questions ou des commentaires ?

Consultez notre page de questions fréquentes et découvrez les guides rapides, ou contactez-nous pour nous faire part de vos commentaires.
Accéder aux questions fréquentes Laisser un commentaire