Android 組件樣式定制詳解

前言

android中有很多現成的組件可以使用，但是android上面的程序很多時候用系統自帶的組件都不太合適，主要是樣式可能不是我們想要的。這個時候我們就需要定制一些樣式。本文將講解如何修改組件的樣式。 

 

1、默認樣式。

在修改組件的樣式之前，我們還是先了解一下組件默認的樣式，如下：

  

當然還有很多的組件，這里就簡單的列舉一下就可以了。從上面的默認組件可以看出這些組件的樣式和你的app的風格不一致。那么這個時候你可能需要做的就是更改組件的樣式。（本人覺得默認樣式基本上都比較丑，基本上每個app中都需要定制樣式）。

 

2、默認樣式文件。

先看看這些組件的樣式到底是放在哪里的。\android-sdk-windows\platforms\android-9\data\res\values 里面有兩個比較重要的文件：themes.xml 和styles.xml，這兩個文件就是樣式文件（主題也是樣式）。你可以打開styles.xml看看，這里就是系統組件的默認樣式。

 

3、定制樣式文件。

我們更關心如何定制樣式文件。最簡單的方法是參考上面所說到的默認的樣式文件然后進行修改。當然你也可以google上搜一些如何修改，不過個人覺得網上講如何修改的都只給一個實例而已，具體的思路並沒有給出。授之於魚不如授之以漁。

 

 

4、樣式實例。

4.1 默認樣式

我們的實例就選擇RadioButton。相信你已經看到過它的默認樣式。

看看默認的樣式文件：

 <style name="Widget.CompoundButton.RadioButton">

        <item name="android:background">@android:drawable/btn_radio_label_background</item>

        <item name="android:button">@android:drawable/btn_radio</item>

    </style>

 

可以看出它其實就有兩個重要的樣式，一個是background一個是button。

①background。

\android-sdk-windows\platforms\android-9\data\res\drawable-mdpi\btn_radio_label_background 是一張.9圖片。（如果你對.9圖不是很熟悉，那么參考我的相關博文）。如圖：

 (這是透明圖標，四周的黑色邊框是預覽區域)。

②button。

首先找到\android-sdk-windows\platforms\android-9\data\res\drawable\btn_radio。這並不是圖片，而是xml文件。里面的內容如下：

 

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:state_window_focused="false"

          android:drawable="@drawable/btn_radio_on" />

    <item android:state_checked="false" android:state_window_focused="false"

          android:drawable="@drawable/btn_radio_off" />

          

    <item android:state_checked="true" android:state_pressed="true"

          android:drawable="@drawable/btn_radio_on_pressed" />

    <item android:state_checked="false" android:state_pressed="true"

          android:drawable="@drawable/btn_radio_off_pressed" />

 

    <item android:state_checked="true" android:state_focused="true"

          android:drawable="@drawable/btn_radio_on_selected" />

    <item android:state_checked="false" android:state_focused="true"

          android:drawable="@drawable/btn_radio_off_selected" />

 

    <item android:state_checked="false" android:drawable="@drawable/btn_radio_off" />

    <item android:state_checked="true" android:drawable="@drawable/btn_radio_on" />

</selector>

 

 

 

這下清楚了吧，原來RadioButton的樣式是如此復雜，一共有6中狀態（你非得說是8種那么你必須認真看看）。如圖：

名稱	圖標
btn_radio_on_selected.png
btn_radio_on_pressed.png
btn_radio_on.png
btn_radio_off_selected.png
btn_radio_off_pressed.png
btn_radio_off.png

 

4.2 定義樣式

目錄結構如下： 

在你的項目中建立一個style.xml文件，文件中的內容當然就是把默認的樣式拷貝出來（熟練以后也可以自己寫）然后進行一些修改。

style.xml內容如下：

<?xml version="1.0" encoding="utf-8"?>

<resources xmlns:android="http://schemas.android.com/apk/res/android">

 

    <style name="MyRadioButton">

        <item name="android:background">@drawable/bt_radio</item>

        <item name="android:button">@null</item>

    </style>

 

</resources>

 

 

bt_radio是個xml文件，內容如下：

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/bt_require_radio_s" android:state_checked="true"/>

    <item android:drawable="@drawable/bt_require_radio_n" android:state_checked="false"/>

</selector>

 

 

bt_required_radio_s和bt_requires_radio_n分別為兩張.9圖片。如圖：

名稱	圖標
bt_requires_radio_n
bt_requires_radio_n

 

4.3使用樣式。

在你xml中添加  style="@style/MyRadioButton" 即可（MyRadioButton是上面的命名）。

使用的布局實例如下：

<?xml version="1.0" encoding="utf-8"?>

<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:background="#aaaaaa"

    android:orientation="vertical" >

 

    <RadioButton

        style="@style/MyRadioButton"

        android:layout_width="wrap_content"

        android:layout_height="50dip"

        android:layout_marginTop="10dip"

        android:text="ABCD" />

 

    <RadioButton

        style="@style/MyRadioButton"

        android:layout_width="wrap_content"

        android:layout_height="50dip"

        android:layout_marginTop="10dip"

        android:text="EFGH" />

 

</RadioGroup>

 

 

效果圖：

 

 

5、相關說明。

對於style.xml中為什么給background加個圖片而把button的圖片設置為@null。這點其實要看你個人需要：

①如果你需要的樣式是點選以后整個背景都改變那么改background的樣式就可以了，而且把button的樣式設置成@null，如果不設置的話當然是系統默認的樣式。

②如果你只是想把系統樣式中的那個帶圈的圖給換點的話那么改button的樣式就可以了。

 

6、總結。

改默認的組件樣式挺簡單的，總結步驟如下：

①找到默認的組件樣式。

②把樣式拷貝到你的項目中進行修改。

③應用樣式。

這幾個步驟不僅僅是對RadioButton的修改，而是所有的組件都可以這么改，修改方式大同小異。

 

7、讀者作業。

看過本文以后還是給你留個練習的機會。你可以按照本文的思路改一個復選框試一試。

 

PS：有人覺得google一下可能比自己改要快很多，但是當你沒有網絡的時候就該這么改，而且你可以更清楚組件的默認樣式。再說了google不一定就有那么合適的文章。文章中如有不清楚的地方可以留言，歡迎交流。

android交流QQ群：196761677 。