Aggiungi un'opzione che gli utenti possono attivare e disattivare

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

  • Attiva o disattiva un'impostazione.
  • Attiva o disattiva una funzionalità.
  • Seleziona 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 cambiare lo stato dell'interruttore. Possono anche toccare l'interruttore per controllare e cancellare la cronologia.

Compatibilità delle versioni

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

Dipendenze

Implementare un interruttore

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

Risultati

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

Creare una miniatura personalizzata

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

Risultati

L'aspetto della casella deselezionata è lo stesso dell'esempio nella sezione precedente. Tuttavia, se 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 spunta personalizzata.

Utilizzare colori personalizzati

Utilizza il parametro colors per modificare il colore del cursore e della traccia di un interruttore, tenendo conto se l'interruttore è selezionato.

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 di base:

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

  • Parametri avanzati

    • thumbContent: utilizza questa opzione per personalizzare l'aspetto del pollice 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 selezionate di guide rapide che coprono obiettivi di sviluppo Android più ampi:

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

Hai domande o feedback

Visita la nostra pagina delle domande frequenti, consulta le guide rapide o contattaci per farci sapere cosa ne pensi.
Vai alle domande frequenti Lascia un feedback