Ajouter un bouton d'activation/de désactivation

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

  • Activez ou désactivez un paramètre.
  • Activez ou désactivez une fonctionnalité.
  • Sélectionnez une option.

Le composant comporte deux parties : le bouton et la piste. Le bouton est la partie déplaçable du commutateur, 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. Ils peuvent également appuyer sur le bouton bascule pour la cocher et la décocher.

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 commutateur

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. Un bouton bascule décoché.
Bouton bascule de base activé.
Figure 2. Bouton bascule coché.

Créer une miniature personnalisée

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

Résultats

L'apparence de la case non cochée est la même que dans l'exemple de la section précédente. Toutefois, une fois cochée, 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. Un bouton bascule avec une icône de coche personnalisée.

Utiliser des couleurs personnalisées

Utilisez le paramètre colors pour modifier la couleur du pouce 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 la punaise.
Figure 4. Un bouton bascule avec des couleurs personnalisées.

Points essentiels

  • Paramètres de base :

    • checked : état initial du bouton.
    • 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 pouce lorsque la case est cochée.
    • colors : utilisez cette option pour personnaliser la couleur de la piste et du bouton.

Collections contenant ce guide

Ce guide fait partie des collections de guides de démarrage rapide 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 de magnifiques composants d'UI basés sur le système de conception Material Design.
Collection de guides rapides

Poser des questions ou envoyer des commentaires

Consultez notre page de questions fréquentes et découvrez nos guides rapides. Vous pouvez également nous contacter pour nous faire part de vos commentaires.
Accéder aux questions fréquentes Laisser un commentaire