在Android开关组件定义自定义样式（主题） [英] Define a custom style (theme) on an Android Switch component

查看：401
本文介绍了在Android开关组件定义自定义样式（主题）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是新来的Andr​​oid开发，并在Android主题化/自定义，看起来是一个广受...

我想给我的开关元件特殊的外观和放大器;感觉，但我不管理，以达到我想要的，阿万网上找很多资源之后。

这是推动我疯了！结果
在此先感谢您的帮助，Android的高手！

上下文

我在现有的Andr​​oid应用程序（V1），这是的minSdkVersion =8工作。

由于此，应用程序使用第三方库来获得动作条（的ActionBar福尔摩斯）和交换机（ SwitchCompatLibrary ）：

今天，我们正在V2版本，用的minSdkVersion =14。

我们的客户也要求我们改变默认开关的外观和感觉。

的目标是有thiese开关：搜索

这真的看起来像最新的材料设计开关，但与橙色，而不是绿 - 蓝色，像<一个href=\"https://www.google.com/design/spec/components/selection-controls.html#selection-controls-switch\"相对=nofollow>这里。

的约束

由于我们现在minSdk 14，我们可以删除2库ActionBarSherlock和SwitchCompatLibrary，但这是不是一种选择。事实上，我们没有时间了......

事实上，我试图在依赖加在我的项目的gradle这个文件中的应用程序兼容性-V7 ，以尝试使用与材料主题里面（的在这里看到），而是因为重复使用2个以上的库属性mentionned定义这给了我的错误。所以我不能使用它，我不知道这应该工作... 

  {相关性
（......）编制项目（'：actionbarsherlock'）
编制项目（'：switchCompatLibrary'）
编译文件（库/ Android的支持 -  v4.jar'）//不兼容AVEC actionbarsherlock和SwitchCompatLibrary ...
//编译com.android.support:appcompat-v7:22.0.+（......）
}

现有code

因此​​，这里是actuel code。

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

 ＆LT; de.ankri.views.Switch
            机器人：ID =@ + ID / switchButtonNotification
            机器人：layout_width =WRAP_CONTENT
            机器人：layout_height =WRAP_CONTENT
            机器人：layout_alignParentRight =真/＆GT;

在我的themes.xml文件：

 ＆LT;样式名称=Theme.Orange父=@风格/ Theme.Sherlock＆GT;
    ...
    ＆LT;！ - 主题切换与SwitchCompatLibrary  - ＆GT;
    ＆LT;项目名称=switchStyle＆GT; @风格/ switch_light＆LT; /项目＆GT;
    ＆LT;项目名称=textAppearance＆GT; @风格/ TextAppearance＆LT; /项目＆GT;
＆LT; /风格＆GT;

与在SwitchCompatLibrary定义本身喜欢这个造型的信息

styles.xml：

 ＆LT;资源的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android＆GT;    ＆LT;样式名称=switch_light＆GT;
        ＆LT;项目名称=跟踪＆GT; @绘制/ switch_track_holo_light＆LT; /项目＆GT;
        ＆LT;项目名称=拇指＆GT; @绘制/ switch_inner_holo_light＆LT; /项目＆GT;
        ＆LT;项目名称=纹元＆GT; @字符串/纹元和LT; /项目＆GT;
        ＆LT;项目名称=textOff＆GT; @字符串/ textOff＆LT; /项目＆GT;
        ＆LT;项目名称=thumbTextPadding＆GT; 12dip＆LT; /项目＆GT;
        ＆LT;项目名称=switchMinWidth＆GT; 96dip＆LT; /项目＆GT;
        ＆LT;项目名称=switchPadding＆GT; 16dip＆LT; /项目＆GT;
        ＆LT;项目名称=switchTextAppearance＆GT; @风格/ TextAppearance＆LT; /项目＆GT;
    ＆LT; /风格＆GT;    ＆LT;样式名称=TextAppearance＆GT;
        ＆LT;项目名称=文字颜色＆GT;的android：ATTR / textColorPrimary＆LT; /项目＆GT;
        ＆LT;项目名称=textColorHighlight＆GT;的android：ATTR / textColorHighlight＆LT; /项目＆GT;
        ＆LT;项目名称=textColorHint＆GT;的android：ATTR / textColorHint＆LT; /项目＆GT;
        ＆LT;项目名称=textColorLink＆GT;的android：ATTR / textColorLink＆LT; /项目＆GT;
        ＆LT;项目名称=TEXTSIZE＆GT;＆16SP LT; /项目＆GT;
    ＆LT; /风格＆GT;
＆LT; /资源＆GT;

switch_inner_holo_light.xml 

 ＆LT;选择的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android＆GT;
    ＆LT;项目的android：state_enabled =false的机器人：可绘制=@绘制/ switch_thumb_disabled_holo_light/＆GT;
    ＆LT;项目的android：STATE_ pressed =真正的机器人：可绘制=@绘制/ switch_thumb_ pressed_holo_light/＆GT;
    ＆LT;项目的android：state_checked =真正的机器人：可绘制=@绘制/ switch_thumb_activated_holo_light/＆GT;
    ＆LT;项目机器人：可绘制=@绘制/ switch_thumb_holo_light/＆GT;
＆LT; /选择＆GT;

switch_track_holo_light.xml 

 ＆LT;选择的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android＆GT;
    ＆LT;项目的android：state_focused =真正的机器人：可绘制=@绘制/ switch_bg_focused_holo_light/＆GT;
    ＆LT;项目机器人：可绘制=@绘制/ switch_bg_holo_light/＆GT;
＆LT; /选择＆GT;

和的结果是这样的：搜索

我想什么

使用本机开关

由于我现在是API 14最低，我第一次尝试，以取代de.ankri.views.Switch与android.widget.Switch在我layout.xml，但风格是不适用了（蓝启动开关代替或橙色）...结果

不过，直接在每个交换机确定主题（这里描述）似乎更好地工作，因为我有一个橙色的切换回：

 ＆LT;开关
        机器人：ID =@ + ID / switchButtonNotification
        机器人：layout_width =WRAP_CONTENT
        机器人：layout_height =WRAP_CONTENT
        工具：检查=真
        机器人：拇指=@绘制/ switch_inner_holo_light
        机器人：轨道=@绘制/ switch_track_holo_light
        机器人：layout_alignParentRight =真/＆GT;

奇怪...我不知道为什么，所以我不会做，有保有压de.ankri.views.Switch组件。

使用SwitchCompatLibrary开关，做自己的造型

然后我试图保持de.ankri.views.Switch组件，做同样的事情比SwitchCompatLibrary，但覆盖@风格/ switch_light我自己的一种风格，使用跟踪和拇指

的themes.xml：

 ＆LT;样式名称=Theme.Orange父=@风格/ Theme.Sherlock＆GT;
    ...
    ＆LT;！ - 主题切换与SwitchCompatLibrary  - ＆GT;
    ＆LT;项目名称=switchStyle＆GT; @风格/ Switch.Orange＆LT; /项目＆GT;
    ＆LT;项目名称=textAppearance＆GT; @风格/ TextAppearance＆LT; /项目＆GT;
＆LT; /风格＆GT;

styles.xml：

 ＆LT;样式名称=Switch.Orange父=@风格/ switch_light＆GT;
    ＆LT;项目名称=跟踪＆GT; @绘制/ switch_track_orange＆LT; /项目＆GT;
    ＆LT;项目名称=拇指＆GT; @绘制/ switch_thumb_orange＆LT; /项目＆GT;
    ＆LT;项目名称=纹元＆GT; @字符串/纹元和LT; /项目＆GT;
    ＆LT;项目名称=textOff＆GT; @字符串/ textOff＆LT; /项目＆GT;
    ＆LT;项目名称=thumbTextPadding＆GT; 12dip＆LT; /项目＆GT;
    ＆LT;项目名称=switchMinWidth＆GT; 96dip＆LT; /项目＆GT;
    ＆LT;项目名称=switchPadding＆GT; 16dip＆LT; /项目＆GT;
    ＆LT;项目名称=switchTextAppearance＆GT; @风格/ TextAppearance＆LT; /项目＆GT;
＆LT; /风格＆GT;

switch_thumb_orange.xml 

 ＆LT;选择的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android＆GT;
    ＆LT;项目的android：state_enabled =false的机器人：可绘制=@绘制/ switch_thumb_normal_orange/＆GT;
    ＆LT;项目的android：STATE_ pressed =真正的机器人：可绘制=@绘制/ switch_thumb_activated_orange/＆GT;
    ＆LT;项目的android：state_checked =真正的机器人：可绘制=@绘制/ switch_thumb_activated_orange/＆GT;
    ＆LT;项目机器人：可绘制=@绘制/ switch_thumb_normal_orange/＆GT;
＆LT; /选择＆GT;

switch_thumb_activated_orange.9.png

switch_thumb_normal_orange.9.png

switch_track_orange.xml 

 ＆LT;选择的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android＆GT;
    ＆LT;项目的android：state_enabled =false的机器人：可绘制=@绘制/ switch_track_normal_orange/＆GT;
    ＆LT;项目的android：state_checked =真正的机器人：可绘制=@绘制/ switch_track_activated_orange/＆GT;
    ＆LT;项目的android：state_focused =真正的机器人：可绘制=@绘制/ switch_track_activated_orange/＆GT;
    ＆LT;项目机器人：可绘制=@绘制/ switch_track_normal_orange/＆GT;
＆LT; /选择＆GT;

switch_track_activated_orange.9.png

switch_track_normal_orange.9.png

结果：

和结果是太恶心了！ ：结果

我在哪里错了？
我试图改变thumbTextPadding，switchMinWidth和switchPadding在styles.xml，但没有很好的效果。

也许我的9补丁文件是错误的？


解决方案

作为第一步，建议你用support.v7.app.ActionBar取代actionBarSherlock。 （的https://developer.android.com/intl/zh-cn/reference/android/support/v7/app/ActionBar.html)
这种迁移需要一定的时间，因为你必须重新定义现有的造型。在我的记忆中，当我做了一个类似的迁移，V7造型的code看起来像actionBarSherlock造型。这时，V7动作条被命名为ActionBarCompat。

I'm new to Android development and also on Android theming/customization that looks to be a wide subject...

I'm trying to give my Switch component a special look & feel, but I don't manage to achieve what I want, avan after looking many resources on internet.

This is driving me crazy!!
Thanks in advance for your help, Android masters !

The context

I work on an existing android application (v1) that was minSdkVersion="8".

Because of this, the application used 3rd-party libraries to get actionbar (ActionBar Sherlock) and switches (SwitchCompatLibrary) :

Today, we are making the v2 version, with minSdkVersion="14".

Our customer also ask us to change the default switch look and feel.

The target is to have thiese switches :

This really looks like the latest material design switches, but with the orange color instead of the "green-blue" color, like here.

The constraints

As we are now minSdk 14, we could remove the 2 libraries "ActionBarSherlock" and "SwitchCompatLibrary", but this is NOT an option. Indeed, we do not have time for that...

Indeed, I tried to add in dependencies in my project's gradle file the appcompat-v7, in order to try using the native switch component with material theme inside (see here) but this gives me errors because of duplicate attributes definitions with the 2 libs mentionned above. So I can't use it, and I'm not sure this should have work...

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.+" 

(...)
}

Existing code

So here is the actuel code.

In my layout.xml file, I use the SwitchCompatLibrary switch :

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

In my themes.xml file :

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

with styling informations defined in the SwitchCompatLibrary itself like this

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>

And the result is this:

What I tried

Use the native switch

As I'm now API 14 minimum, I first tried to replace the "de.ankri.views.Switch" with "android.widget.Switch" in my layout.xml, but the styling was not applying anymore (blue activated switch instead or orange)...

However, defining directly in each switch the theme (as described here) seems to work better as I have an orange switch back : 

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

Strange... I don't know why, so I will not do that and keep "de.ankri.views.Switch" component.

Use the SwitchCompatLibrary switch and do my own styling

Then I tried to keep "de.ankri.views.Switch" component and do the same thing than SwitchCompatLibrary, but overriding the "@style/switch_light" style with my own one, using new drawables for track and thumb

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

Results :

And the result is just AWFUL !! :

Where am I wrong ? I tried to change the "thumbTextPadding", "switchMinWidth" and "switchPadding" in styles.xml, but without good results.

Perhaps my 9-patch files are wrong?

解决方案

As a first step, I suggest you to replace actionBarSherlock with support.v7.app.ActionBar. (https://developer.android.com/intl/zh-cn/reference/android/support/v7/app/ActionBar.html) This migration needs some time because you must redefine your existing styling. In my memory, when I have made a similar migration, the code of v7 styling looks like actionBarSherlock styling. At this time, v7 ActionBar was named ActionBarCompat.

这篇关于在Android开关组件定义自定义样式（主题）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆