Ajouter un bouton d'activation/de désactivation

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

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

Le composant se compose de deux parties: le curseur et le rail. Le bouton est la partie du bouton qui peut être déplacée, et le rail est l'arrière-plan. L'utilisateur peut faire glisser le curseur vers la gauche ou vers la droite pour modifier l'état du bouton. Ils peuvent également appuyer sur le bouton pour le cocher et le décocher.

Compatibilité des versions

Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie 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 de base non sélectionné.
Figure 1. Un bouton bascule non coché
Bouton bascule de base activé.
Figure 2. Bouton bascule activé.

Créer une miniature personnalisée

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

Résultats

L'apparence de la case non cochée est identique à celle de l'exemple de la section précédente. Toutefois, lorsque vous la vérifiez, cette implémentation se présente comme suit:

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

Utiliser des couleurs personnalisées

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

Résultats

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

Points essentiels

  • Paramètres de base:

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

  • Paramètres avancés

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

Collections contenant ce guide

Ce guide fait partie de ces collections de guides rapides sélectionné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 beaux composants d'interface utilisateur basés sur le système de conception Material Design.
Collection de guides rapides

Vous avez des questions ou des commentaires ?

Consultez notre page des 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 Envoyer des commentaires