Як я можу стилізувати перемикач Android?


121

Віджет комутатора, що вводиться в API 14, за замовчуванням стилізований під тему holo. Я хочу стилізувати його трохи по-іншому, трохи змінюючи свої кольори та форму з брендингових причин. Як про це йдеться? Я знаю, що це повинно бути можливим, оскільки я бачив різницю між ICS за замовчуванням та темою сенсорного тестування 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>

Це визначає великий палець, що малюється, зображення, яке переміщується над фоном. Для повзунка використовуються чотири дев'ятипаткові зображення:

Деактивована версія (версія 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">, який може змінити зображення треку, коли перемикач перебуває у стані "on". тому, якщо ви хочете змінити трек на "увімкнено" / "вимкнено", використовуйте цей стан.
narangrajeev81

1
Як можна стилізувати колір тексту для великого пальця? я не можу його знайти ніде :(
pojomx

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

Щоб змінити колір тексту => android: switchTextAppearance = "@ style / mySwitchTextSyle"
Андрій

50

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

Хороший опис усіх інструментів є на AndroidOnRocks.com (сайт офлайн зараз)

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


6
Прекрасна економія часу. 9-патчі, витягнутий список станів тощо, все в один клік!
Стів

Ця відповідь настільки зручна, я б хотів, щоб вона розміщувалась як питання про "інструмент для легкого створення 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-exples

спеціальна доріжка перемикання та великий палець


1

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


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

Інструмент справді чудовий, хоча, чесно кажучи, мені не подобається думка, що якщо ви хочете просто змінити колір чогось, що вам потрібно, щоб створити купу зображень. Крім того, якщо ви використовуєте фігури, ви можете мати різні кольори для положення вимкнення / вмикання.
netpork

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