Jak stylizować Przełącznik Android?

Widżet przełącznika wprowadzony w API 14 jest domyślnie stylizowany na motyw holo. Chcę go nieco inaczej stylizować, zmieniając nieco kolory i kształt ze względów brandingowych. Jak to się robi? Wiem, że to musi być możliwe, ponieważ widziałem różnicę między domyślnymi układami scalonymi a motywem TouchWiz Samsunga

Tutaj wpisz opis obrazka

Zakładam, że będę potrzebował jakiegoś stanu drawables, 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ą jak to, czego mogę chcieć. Po prostu nie wiem, jak ich używać.

Używam ActionbarSherlock, jeśli to robi różnicę. Tylko Urządzenia z interfejsem API w wersji 14 lub wyższej będą mogły w ogóle korzystać z przełącznika.

Author: Vadim Kotov, 2012-04-12

4 answers

Możesz zdefiniować rysowania, które są używane dla tła, oraz 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 drawable. 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>

Definiuje to rysowalny kciuk, obraz, który jest przesuwany na tle. Istnieją cztery ninepatch obrazy używane do suwaka:

Dezaktywowana Wersja (Wersja xhdpi, którą jest Android using) Wersja wyłączona
Wciśnięty suwak: Wciśnięty suwak
Aktywowany suwak (na stanie):Aktywowany suwak
Wersja domyślna (stan wyłączony): Tutaj wpisz opis obrazka

Istnieją również trzy różne stany tła, które są zdefiniowane w poniższym 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 wyłączona: Wersja wyłączona
Wersja skupiona: Wersja skupiona
Oraz domyślna wersja: wersja domyślna

Aby mieć stylizowany przełącznik, wystarczy utworzyć dwa selektory, ustawić je w widoku przełącznika, a następnie zmienić siedem obrazy do pożądanego stylu.

 248
Author: Janusz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-04-13 12:27:03

Super szczegółowa odpowiedź Janusza. Ale tylko ze względu na ludzi, którzy przychodzą na tę stronę po odpowiedzi, łatwiej jest pod http://android-holo-colors.com / (dead link) linked from Android Asset Studio

Dobry opis wszystkich narzędzi znajduje się w AndroidOnRocks.com (site offline now)

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

 50
Author: kishu27,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-06 07:04:59

Możesz dostosować style materiału, ustawiając różne właściwości kolorów. Na przykład custom application theme

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

Custom switch theme

<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ć Switch track I switch thumb Jak na poniższym obrazku, definiując XML drawables. Więcej informacji http://www.zoftino.com/android-switch-button-and-custom-switch-examples

niestandardowa ścieżka przełączania i kciuk

 2
Author: Arnav Rao,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-19 08:18:06

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

 1
Author: netpork,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:47:32