星期三, 12月 15, 2010

在Android中使用客製化按鈕

利用Draw9Patch,可以設計在Android系統中具有延伸性的按鈕圖片,詳細做法可參考「使用Android SDK提供的Draw9Patch Tool」。稍後便要透過stylesthemes,實現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

2 則留言:

Alderis 提到...

感謝您的教學,省了我很多研究的時間!!

Shawn Wang 提到...

雞哥,我在搜尋 "android button 樣式" 前五項結果竟然有您的網誌,我真是傻眼了.. 雞哥真強啊!!