Come posso personalizzare uno switch Android?

113

Il widget di switch introdotto in API 14 è impostato per default con il tema holo. Voglio modificarlo leggermente, cambiando i colori e modellando un po 'per motivi di branding. Come si fa a fare questo? So che deve essere possibile, come Ive visto la differenza tra ICS predefinita e TouchWiz di Samsung temaCome posso personalizzare uno switch Android?

enter image description here

Suppongo che avrò bisogno alcuni drawable statali, 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 essere dopo. Non so come usarli.

Sto usando ActionbarSherlock se questo fa la differenza. Solo i dispositivi che eseguono l'API v14 o successiva potranno ovviamente utilizzare un interruttore.

fonte

2012-04-12 Glenn.nz

247

È possibile definire i drawable che vengono utilizzati per lo sfondo, e la parte switcher come questo:

<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 definisce i diversi stati per drawable switcher. Qui le copie dalle sorgenti 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>

Definisce drawable pollice, l'immagine che si muove sullo sfondo. Ci sono quattro ninepatch immagini utilizzate per il cursore:

La versione disattivato (versione xhdpi che Android sta usando) The deactivated version
Il cursore premuto: The pressed slider
Il cursore attivato (dallo stato): The activated slider
La versione di default (stato off): enter image description here

Esistono inoltre tre stati diversi per lo sfondo che sono definiti nel seguente selettore:

<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 disattivato: The deactivated version
La versione concentrata: The focused version
E la versione di default: the default version

Per avere un interruttore di stile basta creare questa due selettori, cosa impostare la Switch View e quindi modificare le sette immagini al tuo stile desiderato

fonte

2012-04-13 12:27:03 Janusz

molto dettagliate grazie, le immagini di scorrimento a 9 di patch che consentono una parte del movimento del pollice fuori dalla pista era particolarmente utile come non ho potuto capire come stavano facendo questo. (il cursore predefinito ha i bit del bordo appuntito che si spostano oltre la fine della traccia per creare una estremità quadrata su un lato) –

Ottimo lavoro - molto dettagliato – Ahmad

C'è uno stato in più che può cambiare l'immagine della traccia quando lo switch è nello stato "on". quindi se vuoi cambiare la traccia su "on"/"off", usa questo stato. – narangrajeev81

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

Una buona descrizione di tutti gli strumenti sono a AndroidOnRocks.com (sito in linea ora)

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

fonte

2013-02-21 22:38:46 kishu27

Grande risparmio di tempo. patch, elenco stati drawable, ecc tutto in un clic! – Steve

Questo strumento è fantastico – dirkoneill

thumbs up per il favoloso link –

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

fonte

2015-10-08 09:14:58 netpork

, lo strumento la risposta alla risposta di kishu27 è stata molto più veloce semplicemente cambiando il colore, poiché crea tutti i file per te. Immagino che se volessi personalizzare la forma oltre al colore, probabilmente questo è più veloce. – JStephen

Lo strumento è davvero eccezionale, anche se, sinceramente, non mi piace l'idea che se vuoi solo cambiare il colore di qualcosa devi generare un mucchio di immagini. Inoltre, se si utilizzano forme, è possibile avere colori diversi per le posizioni di commutazione off/on. – netpork

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

È possibile personalizzare gli stili di materiale impostando diverse proprietà di colore. Per esempio personalizzato applicazione tema

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

interruttore personalizzato tema

<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 interruttore personalizzare pista e passare il pollice come qui di seguito un'immagine definendo drawable XML. Per ulteriori informazioni http://www.zoftino.com/android-switch-button-and-custom-switch-examples

fonte

2017-09-19 08:18:06

Come posso personalizzare uno switch Android?

risposta

Problemi correlati