在 Android Switch 组件上定义自定义样式（主题）

Question

我是 Android 开发的新手，也是 Android 主题/定制的新手，这似乎是一个广泛的主题......

我正在尝试为我的 Switch 组件赋予一种特殊的外观和感觉，但在互联网上查找了许多资源后，我无法实现我想要的效果。

这快把我逼疯了！！
提前感谢您的帮助，Android 大师！

上下文

我在一个现有的 android 应用程序 (v1) 上工作，它是 minSdkVersion="8"。

因此，应用程序使用 3rd-party 库来获取操作栏 (ActionBar Sherlock) 和开关 (SwitchCompatLibrary)：

今天，我们正在制作 v2 版本，minSdkVersion="14"。

我们的客户还要求我们更改默认开关的外观。

目标是拥有这些开关 :

这看起来真的很像最新的材料设计开关，但用橙色而不是“绿-蓝”颜色，比如here。

约束

由于我们现在是 minSdk 14，我们可以删除 2 个库“ActionBarSherlock”和“SwitchCompatLibrary”，但是这不是一个选项。确实，我们没有时间这样做......

确实，我尝试在项目的 gradle 文件 appcompat-v7 中添加依赖项，以便尝试使用内部带有材质主题的本机开关组件 (see here) 但这给了我由于上面提到的 2 个库的重复属性定义而导致的错误。所以我不能使用它，我不确定这应该有工作......

dependencies {
(...)

compile project(':actionbarsherlock')
compile project(':switchCompatLibrary')
compile files('libs/android-support-v4.jar')

// incompatible avec actionbarsherlock and SwitchCompatLibrary...
// compile "com.android.support:appcompat-v7:22.0.+" 

(...)
}

现有代码

这是实际代码。

在我的 layout.xml 文件中，我使用 SwitchCompatLibrary 开关：

        <de.ankri.views.Switch
            android:id="@+id/switchButtonNotification"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true" />

在我的主题.xml 文件中：

<style name="Theme.Orange" parent="@style/Theme.Sherlock">
    ...
    <!-- Theme switch with SwitchCompatLibrary -->
    <item name="switchStyle">@style/switch_light</item>
    <item name="textAppearance">@style/TextAppearance</item>
</style>

像这样在 SwitchCompatLibrary 本身中定义样式信息

styles.xml：

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="switch_light">
        <item name="track">@drawable/switch_track_holo_light</item>
        <item name="thumb">@drawable/switch_inner_holo_light</item>
        <item name="textOn">@string/textOn</item>
        <item name="textOff">@string/textOff</item>
        <item name="thumbTextPadding">12dip</item>
        <item name="switchMinWidth">96dip</item>
        <item name="switchPadding">16dip</item>
        <item name="switchTextAppearance">@style/TextAppearance</item>
    </style>    

    <style name="TextAppearance">
        <item name="textColor">?android:attr/textColorPrimary</item>
        <item name="textColorHighlight">?android:attr/textColorHighlight</item>
        <item name="textColorHint">?android:attr/textColorHint</item>
        <item name="textColorLink">?android:attr/textColorLink</item>
        <item name="textSize">16sp</item>
    </style>
</resources>

switch_inner_holo_light.xml

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

switch_track_holo_light.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true"  android:drawable="@drawable/switch_bg_focused_holo_light" />
    <item                               android:drawable="@drawable/switch_bg_holo_light" />
</selector>

结果是这样的：

我尝试了什么

使用原生开关

由于我现在最低 API 14，我首先尝试在我的 layout.xml 中将“de.ankri.views.Switch”替换为“android.widget.Switch”，但样式不再适用（蓝色而是激活开关或橙色）...

但是，直接在每个开关中定义主题 (as described here) 似乎效果更好，因为我有一个橙色开关：

    <Switch
        android:id="@+id/switchButtonNotification"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:checked="true"
        android:thumb="@drawable/switch_inner_holo_light"
        android:track="@drawable/switch_track_holo_light"
        android:layout_alignParentRight="true" />

奇怪...我不知道为什么，所以我不会这样做并保留“de.ankri.views.Switch”组件。

使用 SwitchCompatLibrary 开关并做我自己的样式

然后我尝试保留“de.ankri.views.Switch”组件并做与 SwitchCompatLibrary 相同的事情，但用我自己的覆盖“@style/switch_light”样式，使用新的可绘制对象进行跟踪和拇指

主题.xml：

<style name="Theme.Orange" parent="@style/Theme.Sherlock">
    ...
    <!-- Theme switch with SwitchCompatLibrary -->
    <item name="switchStyle">@style/Switch.Orange</item>
    <item name="textAppearance">@style/TextAppearance</item>
</style>

styles.xml：

<style name="Switch.Orange" parent="@style/switch_light">
    <item name="track">@drawable/switch_track_orange</item>
    <item name="thumb">@drawable/switch_thumb_orange</item>
    <item name="textOn">@string/textOn</item>
    <item name="textOff">@string/textOff</item>
    <item name="thumbTextPadding">12dip</item>
    <item name="switchMinWidth">96dip</item>
    <item name="switchPadding">16dip</item>
    <item name="switchTextAppearance">@style/TextAppearance</item>
</style>

switch_thumb_orange.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/switch_thumb_normal_orange" />
    <item android:state_pressed="true"  android:drawable="@drawable/switch_thumb_activated_orange" />
    <item android:state_checked="true"  android:drawable="@drawable/switch_thumb_activated_orange" />
    <item                               android:drawable="@drawable/switch_thumb_normal_orange" />
</selector>

switch_thumb_activated_orange.9.png

switch_thumb_normal_orange.9.png

switch_track_orange.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/switch_track_normal_orange" />
    <item android:state_checked="true" android:drawable="@drawable/switch_track_activated_orange" />
    <item android:state_focused="true"  android:drawable="@drawable/switch_track_activated_orange" />
    <item                               android:drawable="@drawable/switch_track_normal_orange" />
</selector>

switch_track_activated_orange.9.png

switch_track_normal_orange.9.png

结果：

结果简直太糟糕了！ :

我哪里错了？ 我尝试更改styles.xml中的“thumbTextPadding”、“switchMinWidth”和“switchPadding”，但效果不佳。

也许我的 9-patch 文件有误？

Answer 1

这篇文章描述了你需要什么：http://www.materialdoc.com/switch/

如果着色不起作用（api this stackoverflow post.

希望对您有所帮助！

Answer 2

作为第一步，我建议您将 actionBarSherlock 替换为 support.v7.app.ActionBar。 (https://developer.android.com/reference/android/support/v7/app/ActionBar.html)

此迁移需要一些时间，因为您必须重新定义现有样式。在我的记忆中，当我进行类似的迁移时，v7 样式的代码看起来像 actionBarSherlock 样式。此时，v7 ActionBar 被命名为 ActionBarCompat。

Answer 3

你可以试试这个：

• 为交换机的背景制作一张图片。
• 它的高度必须等于你的圆圈的高度。
• 并且图像的顶部和底部必须如下所示：