风格化的ToggleButton

目标: 

Android到默认UI比iOS到默认UI在美观程度上仍是有必定到差距的，咱们但愿可以美化UI，而且替换掉系统默认的UI风格，使得程序在使用这些UI的时候都默认使用咱们自定义到UI。本文以ToggleButton为例，介绍如何使用，下图是效果图。

步骤: 

一、设置XML属性

咱们须要设置ToggleButton的背景，以及当ToggleButton为on或者off时到状态图。

首先，咱们设置ToggleButton的背景,创建 /res/drawable/btn_toggle_bg.xml

<?xml version="1.0" encoding="utf-8"?>  
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
    <item android:id="@+android:id/background" android:drawable="@android:color/transparent" />  
    <item android:id="@+android:id/toggle" android:drawable="@drawable/btn_toggle" />  
</layer-list>

在这里，咱们使用layer-list把ToggleButton分红2个图层，底层是背景(设置成透明),顶层是selector效果图

接下来，设置ToggleButton的on和off的selector效果图：

创建/res/drawable/btn_toggle.xml

<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
    <item android:state_checked="false" android:drawable="@drawable/btn_toggle_no" />  
    <item android:state_checked="true" android:drawable="@drawable/btn_toggle_yes" />  
</selector>

使用到如下两张图，也可经过如下连接查找http://bit.ly/pn5dmA

 

到此，咱们已经把ToggleButton的效果已经制做完毕.

二、设置Style & Theme

ToggleButton到效果图已经制做完毕，接下来，咱们就要把这种效果设置成一种统一的风格，不然咱们在使用的时候必须每次都得显示指定这种风格，在这里，即：在声明ToggleButton的时候，每次都得指定android:background="@drawable/btn_toggle_bg"。

咱们但愿达到到效果是，当咱们每次使用ToogleButton的时候，默认就是使用咱们所设置的风格。在此以前，最好先阅读下android自带到文档：‍‍basics of creating Android themes‍‍，对style和theme有必定的了解。

接下来，创建/res/drawable/themes.xml文件‍

<style name="Widget.Button.Toggle" parent="android:Widget">  
    <item name="android:background">@drawable/btn_toggle_bg</item>  
    <item name="android:textOn">@null</item>  
    <item name="android:textOff">@null</item>  
    <item name="android:clickable">true</item>  
    <item name="android:disabledAlpha">?android:attr/disabledAlpha</item>  
</style>

在这里，要把textOn和textOff的属性设置为null，不然，系统会在按钮上显示文字，这个可根据使用状况而定。

而后，把该风格设置成主题

<style name="YourThemeName" parent="@android:Theme.Black">  
    <!-- 告诉Android当建立ToggleButton的时候使用自定义风格 -->  
    <item name="android:buttonStyleToggle">@style/Widget.Button.Toggle</item>  
    <!-- 在这里能够添加更多的选项... -->  
</style>

以后，只须要在AndroidManifest.xml的<application>标签里设置主题便可(android:theme="@style/YourThemeName")

三、注意事项

<重要>为了提供更通用到效果，应该把图片设置成.9.png格式，使图片可扩展

不少人都以疑问，到底如何知道这些控件或者主题到属性？ 这些都在Android到源代码里面能够找到，具体位置在\base\core\res\res\values\里

项目源码下载：http://download.csdn.net/source/3470224