Jak ustawić styl przełącznika Android?

121

Widżet przełącznika wprowadzony w API 14 jest domyślnie stylizowany na motyw holo. Chcę go nieco zmienić, zmieniając nieco jego kolory i kształt ze względu na branding. Jak się do tego zabrać? Wiem, że to musi być możliwe, ponieważ widziałem różnicę między domyślnym ICS a motywem Touchwiz firmy Samsung

wprowadź opis obrazu tutaj

Zakładam, że będę potrzebować niektórych elementów do rysowania stanu i widziałem kilka stylów w http://developer.android.com/reference/android/R.styleable.html z Switch_thumb i Switch_track, które wyglądają tak, jak mogę być po . Po prostu nie wiem, jak się z nimi zabrać.

Używam ActionbarSherlock, jeśli to robi różnicę. Oczywiście tylko urządzenia z interfejsem API v14 lub nowszym będą mogły w ogóle korzystać z przełącznika.

Glenn.nz
źródło

Odpowiedzi:

258

Możesz zdefiniować elementy rysunkowe używane jako tło i część przełącznika w następujący sposób:

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

Teraz musisz utworzyć selektor, który definiuje różne stany dla przełącznika do rysowania. Tutaj kopie ze źródeł Androida:

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

To definiuje kciuk do rysowania, obraz, który jest przesuwany po tle. Do suwaka używane są cztery obrazy z ninepatch :

Wersja dezaktywowana (wersja xhdpi, z której korzysta Android) Wersja dezaktywowana
Wciśnięty suwak: Wciśnięty suwak
Aktywowany suwak (stan włączony): Aktywowany suwak
Wersja domyślna (stan wyłączony):wprowadź opis obrazu tutaj

Istnieją również trzy różne stany tła, które są zdefiniowane w następującym selektorze:

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

Wersja dezaktywowana: Wersja dezaktywowana
Wersja skoncentrowana: Wersja skoncentrowana
i wersja domyślna:wersja domyślna

Aby mieć stylizowany przełącznik, po prostu utwórz te dwa selektory, ustaw je na swój widok przełączania, a następnie zmień siedem obrazów na żądany styl.

Janusz
źródło
1
Bardzo szczegółowe podziękowania, 9-patchowe obrazy suwaków, które pozwalały części kciuka wyjść z toru, były szczególnie pomocne, ponieważ nie mogłem zrozumieć, jak to robią. (domyślnie suwak ma bity krawędź wklęsła przejść obok końca na torze, aby kwadratowy końcówkę z jednej strony)
Glenn.nz
2
Jest jeszcze jeden stan <item android: state_checked = "true">, który może zmienić obraz ścieżki, gdy przełącznik jest w stanie „on”. więc jeśli chcesz zmienić ścieżkę na „włączony” / „wyłączony”, użyj tego stanu.
narangrajeev81
1
Jak dostosować kolor tekstu dla kciuka? nie mogę go nigdzie znaleźć :(
pojomx
1
@ pojomx. Czy znalazłeś jakieś rozwiązanie dla textcolor - tj. Włączanie / wyłączanie koloru tekstu? Stoję przed tym samym problemem i utknąłem w tym samym punkcie.
Smeet
Aby zmienić kolor tekstu => android: switchTextAppearance = "@ style / mySwitchTextSyle"
Andrew
50

To niesamowita szczegółowa odpowiedź Janusza. Ale tylko ze względu na ludzi, którzy przychodzą na tę stronę w poszukiwaniu odpowiedzi, łatwiejszym sposobem jest http://android-holo-colors.com/ (martwy link) link z Android Asset Studio

Dobry opis wszystkich narzędzi znajduje się na AndroidOnRocks.com (strona jest teraz offline)

Jednak gorąco polecam wszystkim przeczytanie odpowiedzi Janusza, ponieważ ułatwi to zrozumienie. Użyj narzędzia, aby zrobić rzeczy naprawdę szybko

kishu27
źródło
6
Świetna oszczędność czasu. 9 łatek, lista stanów, itp. Wszystko za jednym kliknięciem!
Steve
Ta odpowiedź jest tak przydatna, że ​​chciałbym, aby została opublikowana jako pytanie „narzędzie do łatwego tworzenia kontrolek hologramowych Androida według niestandardowego koloru” i zaakceptowanej odpowiedzi. Programiści tego potrzebują.
Rachael
Jestem pewien, że byłoby to świetne narzędzie ... niestety wszystkie linki są martwe
Razvan_TK9692
3

Możesz dostosować style materiałów, ustawiając różne właściwości kolorów. Na przykład niestandardowy motyw aplikacji

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

Niestandardowy motyw przełącznika

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

Możesz dostosować ścieżkę przełączania i przełącznik kciukowy, jak na poniższym obrazku, definiując elementy XML do rysowania. Aby uzyskać więcej informacji, http://www.zoftino.com/android-switch-button-and-custom-switch-examples

niestandardowa ścieżka przełączania i kciuk

Arnav Rao
źródło
1

Alternatywnym i znacznie łatwiejszym sposobem jest użycie kształtów zamiast 9-plastrów. Zostało to już wyjaśnione tutaj: https://stackoverflow.com/a/24725831/512011

netpork
źródło
idk, narzędzie wymienione w odpowiedzi kishu27 było znacznie szybsze do zmiany koloru, ponieważ tworzy wszystkie pliki za Ciebie. Myślę, że jeśli oprócz koloru chcesz dostosować kształt, prawdopodobnie jest to szybsze.
JStephen
Narzędzie jest naprawdę świetne, chociaż, szczerze mówiąc, nie podoba mi się pomysł, że jeśli chcesz po prostu zmienić kolor czegoś, musisz wygenerować kilka obrazów. Ponadto, jeśli używasz kształtów, możesz mieć różne kolory dla pozycji wyłącznika / włączania.
netpork
prawda, jeśli jesteś niezdecydowany tak jak ja i ciągle zmieniasz kolor, aż znajdziesz taki, który ci się podoba, to jest to znacznie szybsze, na szczęście dla mnie ktoś inny odpowiada za wybór kolorów :)
JStephen