Aggiungi un'opzione che gli utenti possono attivare e disattivare

Il componente Switch consente agli utenti di attivare o disattivare due stati: selezionato e non selezionato. Utilizza un interruttore per consentire all'utente di eseguire una delle seguenti operazioni:

  • Attivare o disattivare un'impostazione.
  • Attivare o disattivare una funzionalità.
  • Selezionare un'opzione.

Il componente è composto da due parti: il cursore e la traccia. Il cursore è la parte trascinabile dell'interruttore e la traccia è lo sfondo. L'utente può trascinare il cursore a sinistra o a destra per modificare lo stato dell'interruttore. Può anche toccare l'interruttore per selezionarlo e deselezionarlo.

Compatibilità delle versioni

Questa implementazione richiede che il minSDK del progetto sia impostato sul livello API 21 o superiore.

Dipendenze

Implementare un interruttore

L'esempio seguente è un'implementazione minima del composable Switch:

Risultati

Un interruttore di base deselezionato.
Figura 1. Un interruttore non selezionato.
Un interruttore di base selezionato.
Figura 2. Un interruttore selezionato.

Creare un cursore personalizzato

Puoi passare qualsiasi composable per il parametro thumbContent per creare un cursore personalizzato. Di seguito è riportato un esempio di interruttore che utilizza un'icona personalizzata per il cursore:

Risultati

L'aspetto non selezionato è lo stesso dell'esempio nella sezione precedente. Tuttavia, quando è selezionata, questa implementazione appare come segue:

Un interruttore che utilizza il parametro thumbContent per visualizzare un'icona personalizzata quando è selezionato.
Figura 3. Un interruttore con un'icona di selezione personalizzata.

Utilizzare colori personalizzati

Utilizza il parametro colors per modificare il colore del cursore e della traccia di un interruttore, tenendo conto del fatto che l'interruttore sia selezionato o meno.

Risultati

Un interruttore che utilizza il parametro colors per visualizzare un interruttore con colori personalizzati sia per il cursore che per il puntatore.
Figura 4. Un interruttore con colori personalizzati.

Punti chiave

  • Parametri base:

    • checked: lo stato iniziale dell'interruttore.
    • onCheckedChange: un callback chiamato quando lo stato dell'interruttore cambia.
    • enabled: indica se l'interruttore è attivo o disattivo.
    • colors: i colori utilizzati per l'interruttore.

  • Parametri avanzati

    • thumbContent: utilizzalo per personalizzare l'aspetto del cursore quando è selezionato.
    • colors: utilizzalo per personalizzare il colore della traccia e del cursore.

Raccolte che contengono questa guida

Questa guida fa parte di queste raccolte di guide rapide curate che riguardano obiettivi di sviluppo Android più ampi:

Scopri come le funzioni composable possono consentirti di creare facilmente componenti UI accattivanti basati sul sistema di progettazione Material Design system.
Raccolta di guide rapide

Hai domande o feedback?

Visita la nostra pagina delle domande frequenti e scopri le guide rapide oppure contattaci e comunicaci la tua opinione.
Vai alle Domande frequenti Lascia un feedback