Come posso modellare uno Switch Android?

121

Il widget switch introdotto nell'API 14 ha uno stile predefinito con il tema holo. Voglio modellarlo leggermente in modo diverso, cambiandone i colori e la forma un po 'per motivi di branding. Come si fa a farlo? So che deve essere possibile, poiché ho visto la differenza tra ICS predefinito e il tema touchwiz di Samsung

inserisci qui la descrizione dell'immagine

Presumo che avrò bisogno di alcuni drawable di stato e ho visto alcuni stili in http://developer.android.com/reference/android/R.styleable.html con Switch_thumb e Switch_track che assomigliano a quello che potrei cercare . Non so come usarli.

Sto usando ActionbarSherlock se questo fa la differenza. Naturalmente, solo i dispositivi che eseguono l'API v14 o versioni successive potranno utilizzare uno switch.

— Glenn.nz
fonte

258

È possibile definire i drawable che vengono utilizzati per lo sfondo e la parte dello switcher in questo modo:

<Switch
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:thumb="@drawable/switch_thumb"
    android:track="@drawable/switch_bg" />

Ora è necessario creare un selettore che definisca i diversi stati per lo switcher disegnabile. Ecco le copie dalle fonti Android:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/switch_thumb_disabled_holo_light" />
    <item android:state_pressed="true"  android:drawable="@drawable/switch_thumb_pressed_holo_light" />
    <item android:state_checked="true"  android:drawable="@drawable/switch_thumb_activated_holo_light" />
    <item                               android:drawable="@drawable/switch_thumb_holo_light" />
</selector>

Questo definisce il thumb drawable, l'immagine che viene spostata sullo sfondo. Ci sono quattro nove immagini di patch usate per il cursore:

La versione disattivata (versione xhdpi utilizzata da Android)
Lo slider premuto: Il cursore premuto
Lo slider attivato (in stato):
La versione predefinita (stato spento): inserisci qui la descrizione dell'immagine

Esistono anche tre diversi stati per lo sfondo definiti nel selettore seguente:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/switch_bg_disabled_holo_dark" />
    <item android:state_focused="true"  android:drawable="@drawable/switch_bg_focused_holo_dark" />
    <item                               android:drawable="@drawable/switch_bg_holo_dark" />
</selector>

La versione disattivata:
La versione focalizzata:
E la versione predefinita:

Per avere un interruttore con stile, basta creare questi due selettori, impostarli su Cambia visualizzazione e quindi modificare le sette immagini nello stile desiderato.

— Janusz
fonte

1

Grazie molto dettagliati, le immagini del cursore a 9 patch che consentono a parte del pollice di uscire dalla traccia sono state particolarmente utili in quanto non riuscivo a capire come stessero facendo. (il cursore predefinito ha i bit del bordo appuntito che si spostano oltre la fine della traccia per formare un'estremità quadrata su un lato)

— Glenn.nz

2

C'è un altro stato che è <item android: state_checked = "true"> che può cambiare l'immagine della traccia quando l'interruttore è nello stato "on". quindi se vuoi cambiare la traccia su "on" / "off", usa questo stato.

— narangrajeev81

1

Come posso definire lo stile del colore del testo per il pollice? Non riesco a trovarlo da nessuna parte :(

— pojomx

1

@ pojomx. Hai trovato una soluzione per il colore del testo, ad esempio il colore del testo on / off? Sto affrontando lo stesso problema e sono bloccato nello stesso punto.

— Incontro il

Per cambiare il colore del testo => android: switchTextAppearance = "@ style / mySwitchTextSyle"

— Andrew

50

È una fantastica risposta dettagliata di Janusz. Ma solo per il bene delle persone che vengono a questa pagina per le risposte, il modo più semplice è su http://android-holo-colors.com/ (link morto) collegato da Android Asset Studio

Una buona descrizione di tutti gli strumenti si trova su AndroidOnRocks.com (sito offline ora)

Tuttavia, consiglio vivamente a tutti di leggere la risposta di Janusz in quanto renderà più chiara la comprensione. Usa lo strumento per fare cose molto velocemente

— kishu27
fonte

6

Ottimo risparmio di tempo. 9 patch, elenchi di stati disegnabili, ecc. Tutto in un clic!

— Steve

Questa risposta è così utile che mi piacerebbe vederla pubblicata come una domanda di "strumento per creare facilmente controlli olografici Android con colori personalizzati" e risposta accettata. Gli sviluppatori ne hanno bisogno.

— Rachael

Sono sicuro che sarebbe stato un ottimo strumento ... tutti i collegamenti sono morti, purtroppo

— Razvan_TK9692

3

È possibile personalizzare gli stili dei materiali impostando diverse proprietà del colore. Ad esempio , tema dell'applicazione personalizzato

<style name="CustomAppTheme" parent="Theme.AppCompat">
    <item name="android:textColorPrimaryDisableOnly">#00838f</item>
    <item name="colorAccent">#e91e63</item>
</style>

Tema dell'interruttore personalizzato

<style name="MySwitch" parent="@style/Widget.AppCompat.CompoundButton.Switch">
    <item name="android:textColorPrimaryDisableOnly">#b71c1c</item>
    <item name="android:colorControlActivated">#1b5e20</item>
    <item name="android:colorForeground">#f57f17</item>
    <item name="android:textAppearance">@style/TextAppearance.AppCompat</item>
</style>

Puoi personalizzare il cambio di traccia e il pollice come nell'immagine sottostante definendo i drawables xml. Per ulteriori informazioni http://www.zoftino.com/android-switch-button-and-custom-switch-examples

— Arnav Rao
fonte

1

Un modo alternativo e molto più semplice è usare le forme invece di 9 patch. È già spiegato qui: https://stackoverflow.com/a/24725831/512011

— netpork
fonte

idk, lo strumento menzionato nella risposta di kishu27 era molto più veloce per cambiare solo il colore poiché crea tutti i file per te. Immagino che se volessi personalizzare la forma oltre al colore, probabilmente è più veloce.

— JStephen

Lo strumento è davvero eccezionale, anche se, francamente, non mi piace l'idea che se vuoi semplicemente cambiare il colore di qualcosa devi generare un mucchio di immagini. Inoltre, se stai usando forme, puoi avere colori diversi per le posizioni degli interruttori off / on.

— netpork

vero, se sei indeciso come me e continui a cambiare il colore finché non trovi quello che ti piace, allora è molto più veloce, fortunatamente per me qualcun altro è incaricato di scegliere i colori :)

— JStephen