如何为Android开关设置样式?

123

API 14中引入的开关小部件默认使用Holo主题进行样式设计。

出于品牌推广原因,我想稍微改变它的颜色和形状。如何实现这一点?我知道一定是可以做到的,因为我看到了默认ICS和三星TouchWiz主题之间的差异。

进入图片描述

我猜想我需要一些状态可绘制对象,并且在http://developer.android.com/reference/android/R.styleable.html中看到了一些与我可能想要的Switch_thumb和Switch_track相关的样式。我只是不知道如何使用它们。

如果有所区别,我正在使用ActionbarSherlock。当然,只有运行API v14或更高版本的设备才能使用开关。

4个回答

262

你可以像这样定义用于背景和开关部分的可绘制对象:

<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图像:

未激活版本(Android正在使用的xhdpi版本)未激活版本
已按下的滑块: 已按下的滑块
已激活的滑块(开启状态):已激活的滑块
默认版本(关闭状态):enter image description here

还有三种不同的背景状态,在以下选择器中定义:

<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
1
我该如何为滑块的文本颜色设置样式?我找不到相关信息 :( - pojomx
1
@pojomx。你找到了textcolor的解决方案吗?也就是说,开/关文本颜色?我遇到了同样的问题,卡在了同一个点上。 - Smeet
更改文本颜色 => android:switchTextAppearance="@style/mySwitchTextSyle" - Andrew
如何将拇指可绘制对象变成圆形? - Olcay Ertaş

50
这是Janusz提供的详细回复,非常棒。但为了那些来到这个页面寻找答案的人们,更简单的方法是访问Android Asset Studio链接的http://android-holo-colors.com/(链接已失效)。
所有工具的良好描述可在AndroidOnRocks.com上找到(该网站现已下线)。
然而,我强烈建议每个人都阅读Janusz的回复,因为它会使理解更加清晰。使用该工具可以快速完成任务。

6
非常省时间。点击一下就可以得到9-patches、状态列表drawable等所有内容! - Steve
这个答案非常有用,我希望能够将其发布为“轻松创建自定义颜色的Android Holo控件工具”的问题并接受答案。开发人员需要这个。 - Rachael
我相信那本来是一个很棒的工具...可惜所有链接都已失效。 - 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可拉伸的Drawable来自定义开关轨道和开关拇指,如下图所示。有关更多信息,请访问http://www.zoftino.com/android-switch-button-and-custom-switch-examples

custom switch track and thumb


1

不知道,kishu27的回答中提到的工具只是改变颜色就快得多了,因为它会为您创建所有文件。我想如果您想要在形状上进行自定义,那么这可能更快。 - JStephen
这个工具真的很棒,尽管说实话,我不太喜欢这个想法:如果你只想改变某些东西的颜色,就需要生成一堆图像。此外,如果你正在使用形状,你可以为开/关状态设置不同的颜色。 - netpork
如果你像我一样犹豫不决,总是在改变颜色直到找到自己喜欢的那一个,那么这个方法会更快。幸运的是,有人负责选择颜色 :)。 - JStephen

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接