風格化的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