Aggiungi un'opzione che gli utenti possono attivare e disattivare

Il componente Switch consente agli utenti di passare da uno stato all'altro: selezionato e deselezionato. Utilizza un'opzione 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: la miniatura e la traccia. Il cursore è la parte dell'opzione che puoi trascinare e il canale è lo sfondo. L'utente può trascinare il cursore verso sinistra o verso destra per modificare lo stato dell'opzione. Possono anche toccare l'opzione per selezionarla e deselezionarla.

Compatibilità delle versioni

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

Dipendenze

Implementare un'opzione

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

Risultati

Un'opzione di base non selezionata.
Figura 1. Uno switch non selezionato.
Un'opzione di base selezionata.
Figura 2. Un'opzione selezionata.

Creare una miniatura personalizzata

Puoi passare qualsiasi composable per il parametro thumbContent per creare un'anteprima personalizzata. Di seguito è riportato un esempio di opzione che utilizza un'icona personalizzata per l'anteprima:

Risultati

L'aspetto della casella deselezionata è lo stesso dell'esempio nella sezione precedente. Tuttavia, se questa opzione è selezionata, l'implementazione viene visualizzata come segue:

Un'opzione che utilizza il parametro thumbContent per visualizzare un'icona personalizzata quando è selezionata.
Figura 3. Un'opzione con un'icona di spunta personalizzata.

Utilizzare colori personalizzati

Utilizza il parametro colors per cambiare il colore del cursore e del pulsante di un'opzione, tenendo conto dell'eventuale attivazione dell'opzione.

Risultati

Un'opzione che utilizza il parametro colors per visualizzare un'opzione con colori personalizzati sia per il cursore che per il cursore fisso.
Figura 4. Un'opzione con colori personalizzati.

Punti chiave

  • Parametri di base:

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

  • Parametri avanzati

    • thumbContent: utilizza questa opzione per personalizzare l'aspetto della miniatura quando è selezionata.
    • colors: utilizza questo parametro per personalizzare il colore della traccia e della miniatura.

Raccolte che contengono questa guida

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

Scopri come le funzioni composable possono aiutarti a creare facilmente magnifici componenti dell'interfaccia utente basati sul sistema di progettazione Material Design.
Collezione di guide rapide

Domande o feedback

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