Wie kann ich einen Android Switch gestalten?


121

Das in API 14 eingeführte Switch-Widget ist standardmäßig mit einem Holo-Design versehen. Ich möchte es etwas anders stylen, seine Farben und Formen aus Branding-Gründen ein wenig ändern. Wie geht man damit um? Ich weiß, dass es möglich sein muss, da ich den Unterschied zwischen dem Standard-ICS und dem Touchwiz-Thema von Samsung gesehen habe

Geben Sie hier die Bildbeschreibung ein

Ich gehe davon aus, dass ich einige State Drawables benötige, und ich habe in http://developer.android.com/reference/android/R.styleable.html einige Stile mit Switch_thumb und Switch_track gesehen, die so aussehen, wie ich es mir vorgestellt habe . Ich weiß nur nicht, wie ich sie verwenden soll.

Ich verwende ActionbarSherlock, wenn das einen Unterschied macht. Natürlich können nur Geräte, auf denen API v14 oder höher ausgeführt wird, einen Switch verwenden.

Antworten:


258

Sie können die für den Hintergrund verwendeten Drawables und den Switcher-Teil folgendermaßen definieren:

<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, der die verschiedenen Status für den umschaltbaren Umschalter definiert. Hier die Kopien aus den 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 den Daumen zeichnbar, das Bild, das über den Hintergrund verschoben wird. Für den Schieberegler werden vier Ninepatch- Bilder verwendet:

Die deaktivierte Version (von Android verwendete xhdpi-Version) Die deaktivierte Version
Der gedrückte Schieberegler: Der gedrückte Schieberegler
Der aktivierte Schieberegler (Status "Ein"): Der aktivierte Schieberegler
Die Standardversion (Status "Aus"):Geben Sie hier die Bildbeschreibung ein

Es gibt auch drei verschiedene Zustände für den Hintergrund, die in der folgenden Auswahl 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: Die deaktivierte Version
Die fokussierte Version: Die fokussierte Version
Und die Standardversion:die Standardversion

Um einen gestalteten Schalter zu erhalten, erstellen Sie einfach diese beiden Selektoren, stellen Sie sie auf Ihre Schalteransicht ein und ändern Sie dann die sieben Bilder in den gewünschten Stil.


1
Sehr detailliert, danke, die 9-Patch-Slider-Bilder, mit denen sich ein Teil des Daumens aus der Spur herausbewegen konnte, waren besonders hilfreich, da ich nicht herausfinden konnte, wie sie das machten. (Der Standard-Schieberegler hat die spitzen
Kantenbits

2
Es gibt einen weiteren Status, der <item android: state_checked = "true"> ist und das Titelbild ändern kann, wenn der Schalter auf "Ein" steht. Wenn Sie also die Spur auf "Ein" / "Aus" ändern möchten, verwenden Sie diesen Status.
Narangrajeev81

1
Wie kann ich die Textfarbe für den Daumen stylen? Ich kann es nirgendwo finden :(
Pojomx

1
@ Pojomx. Haben Sie eine Lösung für die Textfarbe gefunden - dh Ein / Aus-Textfarbe? Ich stehe vor dem gleichen Problem und stecke am gleichen Punkt fest.
Smeet

So ändern Sie die Textfarbe => android: switchTextAppearance = "@ style / mySwitchTextSyle"
Andrew

50

Es ist eine großartige detaillierte Antwort von Janusz. Aber nur für Leute, die auf diese Seite kommen, um Antworten zu erhalten, ist der einfachere Weg unter http://android-holo-colors.com/ (toter Link), der von Android Asset Studio aus verlinkt wird

Eine gute Beschreibung aller Tools finden Sie auf AndroidOnRocks.com (Website jetzt offline)

Ich empfehle jedoch jedem, die Antwort von Janusz zu lesen, da dies das Verständnis klarer macht. Verwenden Sie das Tool, um Dinge ganz schnell zu erledigen


6
Große Zeitersparnis. 9-Patches, Statuslisten-Drawables usw. mit einem Klick!
Steve

Diese Antwort ist so praktisch, dass ich sie gerne als Frage des "Tools zum einfachen Erstellen von Android-Holo-Steuerelementen nach benutzerdefinierten Farben" und als akzeptierte Antwort sehen würde. Entwickler brauchen das.
Rachael

Ich bin sicher, das wäre ein großartiges Werkzeug gewesen ... alle Links sind leider tot
Razvan_TK9692

3

Sie können Materialstile anpassen, indem Sie verschiedene Farbeigenschaften festlegen. Zum Beispiel ein benutzerdefiniertes Anwendungsthema

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

Benutzerdefiniertes Schalterthema

<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 die Switch-Spur und den Switch-Daumen wie im folgenden Bild anpassen, indem Sie XML-Drawables definieren. Weitere Informationen finden Sie unter http://www.zoftino.com/android-switch-button-and-custom-switch-examples

benutzerdefinierte Schaltspur und Daumen


1

Eine alternative und viel einfachere Möglichkeit besteht darin, Formen anstelle von 9 Patches zu verwenden. Es wird hier bereits erklärt: https://stackoverflow.com/a/24725831/512011


idk, das in der Antwort von kishu27 erwähnte Tool war viel schneller, um nur die Farbe zu ändern, da es alle Dateien für Sie erstellt. Ich denke, wenn Sie die Form zusätzlich zur Farbe anpassen möchten, obwohl dies wahrscheinlich schneller ist.
JStephen

Das Tool ist wirklich großartig, obwohl ich ehrlich gesagt nicht die Idee mag, dass man, wenn man nur die Farbe von etwas ändern möchte, eine Reihe von Bildern erzeugen muss. Wenn Sie Formen verwenden, können Sie auch verschiedene Farben für die Aus- / Ein-Schalterpositionen verwenden.
Netpork

Richtig, wenn Sie wie ich unentschlossen sind und die Farbe so lange ändern, bis Sie eine finden, die Ihnen gefällt, ist dies viel schneller. Zum Glück ist jemand anderes für die Auswahl der Farben verantwortlich :)
JStephen
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.