Как я могу стилизовать коммутатор Android?


121

Виджет переключателя, представленный в API 14, по умолчанию оформлен в стиле голографической темы. Я хочу немного изменить его стиль, немного изменив его цвет и форму по соображениям бренда. Как это сделать? Я знаю, что это должно быть возможно, так как я видел разницу между ICS по умолчанию и темой TouchWiz от Samsung.

введите описание изображения здесь

Я предполагаю, что мне понадобятся некоторые чертежи состояния, и я видел несколько стилей в http://developer.android.com/reference/android/R.styleable.html с Switch_thumb и Switch_track, которые выглядят так, как я мог бы быть после , Я просто не знаю, как их использовать.

Я использую ActionbarSherlock, если это имеет значение. Конечно, только устройства с API v14 или выше смогут использовать коммутатор.

Ответы:


258

Вы можете определить чертежи, которые используются для фона, и часть переключателя следующим образом:

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

Теперь вам нужно создать селектор, который определяет различные состояния для вытягиваемого переключателя. Вот копии из источников 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>

Это определяет возможность рисования большого пальца, изображение, которое перемещается над фоном. Для слайдера используются четыре изображения ninepatch :

Деактивированная версия (версия xhdpi, которую использует Android) Нажатый Деактивированная версия
ползунок: Нажатый ползунок
активированный ползунок (включенное состояние): Активированный слайдер
версия по умолчанию (выключенное состояние):введите описание изображения здесь

Также существует три различных состояния фона, которые определены в следующем селекторе:

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

Деактивированная версия: Деактивированная версия
Ориентированная версия: Сфокусированная версия
И версия по умолчанию:версия по умолчанию

Чтобы иметь стилизованный переключатель, просто создайте эти два селектора, установите их в свой режим переключения, а затем измените семь изображений на желаемый стиль.


1
Очень подробное спасибо, изображения слайдера с 9 патчами, которые позволяют части большого пальца выйти из дорожки, были особенно полезны, поскольку я не мог понять, как они это делают. (ползунок по умолчанию имеет заостренные края, перемещающиеся за конец дорожки, чтобы сделать конец квадратным с одной стороны)
Glenn.nz

2
Есть еще одно состояние - <item android: state_checked = "true">, которое может изменять изображение дорожки, когда переключатель находится в состоянии "включено". поэтому, если вы хотите переключить трек на «включено» / «выключено», используйте это состояние.
narangrajeev81 08

1
Как изменить цвет текста для большого пальца? нигде не могу найти :(
pojomx

1
@ pojomx. Вы нашли какое-либо решение для цвета текста - т.е. включение / выключение цвета текста? Я столкнулся с той же проблемой и застрял в одном и том же месте.
Смит

Чтобы изменить цвет текста => android: switchTextAppearance = "@ style / mySwitchTextSyle"
Эндрю

50

Замечательный подробный ответ Януша. Но просто для людей, которые приходят на эту страницу за ответами, более простой способ находится на http://android-holo-colors.com/ (мертвая ссылка), ссылка на которую есть в Android Asset Studio.

Хорошее описание всех инструментов есть на AndroidOnRocks.com (сайт сейчас не в сети)

Однако я настоятельно рекомендую всем прочитать ответ Януша, так как он сделает понимание более ясным. Используйте инструмент, чтобы делать вещи очень быстро


6
Отличная экономия времени. 9 патчей, списки состояний и т. Д. - все в один клик!
Steve

Этот ответ настолько удобен, что я хотел бы, чтобы он был опубликован как вопрос «Инструмент для простого создания голографических элементов управления Android по индивидуальному цвету» и принятый ответ. Это нужно разработчикам.
Рэйчел

Я уверен, что это был бы отличный инструмент ... все ссылки, к сожалению, мертвы
Razvan_TK9692

3

Вы можете настроить стили материалов, задав различные цветовые свойства. Например пользовательская тема приложения

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

Пользовательская тема переключателя

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

Вы можете настроить переключение трека и переключать большой палец, как показано на рисунке ниже, путем определения чертежей xml. Для получения дополнительной информации http://www.zoftino.com/android-switch-button-and-custom-switch-examples

пользовательский переключатель трека и большого пальца


1

Альтернативный и гораздо более простой способ - использовать формы вместо 9 участков. Здесь уже объясняется: https://stackoverflow.com/a/24725831/512011


idk, инструмент, упомянутый в ответе kishu27, был намного быстрее для простого изменения цвета, поскольку он создает все файлы для вас. Я думаю, если вы хотите настроить форму в дополнение к цвету, это, вероятно, быстрее.
JStephen 08

Инструмент действительно отличный, хотя, честно говоря, мне не нравится идея, что если вы хотите просто изменить цвет чего-то, вам нужно сгенерировать кучу изображений. Кроме того, если вы используете формы, вы можете иметь разные цвета для положений переключателя включения / выключения.
netpork

правда, если вы нерешительны, как я, и продолжаете менять цвет, пока не найдете тот, который вам нравится, тогда это будет намного быстрее, к счастью для меня, кто-то другой отвечает за выбор цветов :)
Стивен Стивен
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.