在Android中使用客製化按鈕

利用Draw9Patch，可以設計在Android系統中具有延伸性的按鈕圖片，詳細做法可參考「使用Android SDK提供的Draw9Patch Tool」。稍後便要透過styles與themes，實現Android系統中客製化按鈕的使用。


 【使用步驟】

- 步驟一：使用Draw9Patch工具，製作出按鈕狀態的圖片
詳細做法請參考「使用Android SDK提供的Draw9Patch Tool」。通常按鈕具有normal, press, focus, disable...等狀態，此處我們產生四個檔案，並將之放至res/drawable目錄下。分別為：

• custom_btn_normal.png (預設狀態)
• custom_btn_press.png (按下狀態)
• custom_btn_focus.png (取得焦點狀態)
• custom_btn_disable.png (失能狀態)

- 步驟二：指定按鈕各種state的圖片
指定Android按鈕state圖片，需要藉由一個內含宣告<selector>標籤的xml檔案協助。我們在eclipse project的res/drawable目錄下建立一個custom_btn.xml檔案。內容如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="true"
        android:state_focus="true"
        android:drawable="@drawable/custom_btn_focus" /> <!-- focus state-->
    <item
        android:state_enabled="true"
        android:state_pressed="true"
        android:drawable="@drawable/custom_btn_press" /> <!-- press state-->
    <item
        android:state_enabled="false"
        android:drawable="@drawable/custom_btn_disable" /> <!-- disable state-->
    <item
        android:drawable="@drawable/custom_btn_normal" /> <!-- default state-->

</selector>

selector的宣告照著抄就好，不用做任何改變。重要的部分只要看item標籤。常用的四個attributes分別為：

• android:drawable，指定此button狀態圖片所在的目錄與檔名，而檔名的部分不需要指定附檔名
• android:state_enable，true表示button是可作用的，false則表示此button目前是失能狀態
• android:state_focused，true表示此button取得focus，false則反
• android:state_pressed，true表示此button目前被按下的狀態，false則反 

- 步驟三：建立styles.xml
在res/values目錄下，建立一個含有<resources>與<style>標籤的styles.xml檔案。其內容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Button" parent="@android:style/Widget.Button">
        <item name="android:gravity">center_vertical|center_horizontal</item>
        <item name="android:textColor">#FFFFFFFF</item>
        <item name="android:shadowColor">#FF000000</item>
        <item name="android:shadowDx">0</item>
        <item name="android:shadowDy">-1</item>
        <item name="android:shadowRadius">0.2</item>
        <item name="android:textSize">16dip</item>
        <item name="android:textStyle">bold</item>
        <item name="android:background">@drawable/common_btn</item>
        <item name="android:focusable">true</item>
        <item name="android:clickable">true</item>
    </style>
</resources>

其中style標籤內所定義的name，是稍後套用到button元件時，需要用到其定義的值。 


 - 步驟四：建立themes.xml
在res/values目錄下，建立另一個含有<resources>與<style>標籤的themes.xml檔案。其內容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CustomButton" parent="android:style/Theme.NoTitleBar">
        <item name="android:buttonStyle">@style/Button</item>
    </style>
</resources>

theme的定義與寫法大致上跟style相同。其中style標籤內所定義的name，是稍後套用到application時，需要用到其定義的值。 


- 步驟五：套用樣板至application或是單一button control
根據Android SDK - Applying Styles and Themes的說法：

A style is a collection of properties that specify the look and format for a View or window.
A theme is a style applied to an entire Activity or application, rather than an individual View.

由此可得知，style是用來套用單一個view或是window，而theme則是套用至activity或是application。因此共有兩種不同的做法。

◎ 套用單一個view或window 
開啟activity layout xml檔案，並在<button>標籤中，加上一個style attribute，其內容如下：
style=”@style/Button”
(※請注意，此處是加上styles.xml內style定義的name)

◎ 套用activity或application
開啟AndroidManifest.xml檔案，並在<application>標籤中，加上一個android:theme attribute，其內容如下：
android:theme="@style/CustomButton"
(※請注意，此處是加上themes.xml內style定義的name)


【參考資料】
1.　Custom Android Button Style and Theme
2.　Android SDK - Button State List
3.　Android SDK - Applying Styles and Themes