2012-04-12 14 views
113

Das Switch-Widget, das in API 14 eingeführt wurde, ist standardmäßig mit Holo-Design ausgestattet. Ich möchte es etwas anders gestalten, seine Farben ändern und ein wenig aus Branding-Gründen gestalten. Wie geht man das an? Ich weiß, dass es möglich sein muss, wie ive den Unterschied zwischen Standard-ICS und Samsung TouchWiz ThemaWie kann ich einen Android Switch stylen?

enter image description here

ich mir einig Zustand Drawables muß davon ausgehen, gesehen, und ich habe ein paar Arten in http://developer.android.com/reference/android/R.styleable.html mit Switch_thumb gesehen und Switch_track, die aussehen, als ob ich danach suchen würde. Ich weiß einfach nicht, wie ich sie benutzen soll.

Ich benutze ActionbarSherlock, wenn das einen Unterschied macht. Nur Geräte mit API v14 oder höher können natürlich einen Switch verwenden.

Antwort

247

Sie können die Drawables definieren, die für den Hintergrund verwendet werden, und den Switcher Teil wie folgt aus:

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

Jetzt müssen Sie einen Selektor erstellen, die die verschiedenen Zustände für die Switcher ziehbar definiert. Hier werden die Kopien aus dem Android Quellen:

<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> 

Dies definiert die Daumen ziehbar, das Bild, das über den Hintergrund verschoben wird. Es gibt vier ninepatch Bilder für den Schieber verwendet:

Die deaktivierte Version (xhdpi Version, die Android verwendet) The deactivated version
Die gedrückten Schieber: The pressed slider
Der aktivierte Schieber (Ein-Zustand): The activated slider
Die Standardversion (aus-Zustand): enter image description here

Darüber hinaus gibt es drei verschiedene Zustände für den Hintergrund, die in dem folgenden Selektor definiert sind:

<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> 

Die deaktivierte Version: The deactivated version
Die fokussierte Version: The focused version
Und die Standardversion: the default version

Um einen Stil Schalter hat nur diese zwei Selektoren erstellen, sie zu Ihrem Switch View setzen und dann die sieben Bilder ändern zu deinem gewünschten Stil.

+1

Sehr detailliert Dank, die 9-Patch-Slider Bilder, die war Teil des Daumens bewegen aus der Spur lassen besonders hilfreich, da ich nicht konnte arbeiten, wie sie das taten. (Der Standard-Schieberegler hat die spitzen Kanten Bits über das Ende der Spur bewegen, um ein Quadrat Ende auf der einen Seite zu machen) –

+0

Great Job - sehr detailliert – Ahmad

+2

Es gibt einen weiteren Zustand, der ist kann das Spurbild ändern, wenn der Schalter auf "Ein" steht. Wenn Sie also die Spur auf "ein"/"aus" ändern möchten, verwenden Sie diesen Status. – narangrajeev81

50

Es ist eine tolle detaillierte Antwort von Janusz. Aber nur für Leute, die auf diese Seite für Antworten kommen, ist der leichtere Weg bei http://android-holo-colors.com/ (tote Verbindung) verbunden von Android Asset Studio

Eine gute Beschreibung aller Werkzeuge sind bei AndroidOnRocks.com (Website jetzt offline)

Allerdings empfehle ich jedem, die Antwort von Janusz zu lesen, da es das Verständnis klarer macht. Verwenden Sie das Werkzeug, um Stoffe wirklich schnell zu tun

+6

Great time saver. Patches, Statusliste, Drawables, etc. – Steve

+3

Dieses Tool ist fantastisch – dirkoneill

+0

Daumen hoch für den fabelhaften Link –

1

Alternative und viel einfacherer Weg ist Formen statt 9-Patches zu verwenden. Es wird erklärt, bereits hier: https://stackoverflow.com/a/24725831/512011

+0

IDK, das Werkzeug mich In kishu27s Antwort war es viel schneller, nur die Farbe zu ändern, da alle Dateien für Sie erstellt wurden. Ich denke, wenn Sie die Form zusätzlich zur Farbe anpassen wollten, ist dies wahrscheinlich schneller. – JStephen

+0

Das Tool ist wirklich großartig, obwohl, ehrlich gesagt, ich bin nicht gern auf eine Idee, dass, wenn Sie nur die Farbe von etwas ändern möchten, müssen Sie eine Reihe von Bildern generieren. Wenn Sie Shapes verwenden, können Sie auch unterschiedliche Farben für die Schalterpositionen "Aus/Ein" verwenden. – netpork

+0

true, wenn du wie ich unentschlossen bist und die Farbe änderst, bis du eine findest, die du magst, dann ist das viel schneller, Glück für mich, jemand anderes ist verantwortlich für die Auswahl der Farben :) – JStephen

1

Sie Material Stile, indem verschiedene Farbeigenschaften anpassen können. Zum Beispiel benutzerdefinierte Anwendung Thema

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

Individuelle Schalter Thema

<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> 

Sie können anpassen Schalter Spur und Daumenschalter wie unten Bild von xml Drawables definieren. Weitere Informationen http://www.zoftino.com/android-switch-button-and-custom-switch-examples

custom switch track and thumb