前言

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

1、默認(rèn)樣式。

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

當(dāng)然還有很多的組件，這里就簡(jiǎn)單的列舉一下就可以了。從上面的默認(rèn)組件可以看出這些組件的樣式和你的app的風(fēng)格不一致。那么這個(gè)時(shí)候你可能需要做的就是更改組件的樣式。（本人覺(jué)得默認(rèn)樣式基本上都比較丑，基本上每個(gè)app中都需要定制樣式）。

2、默認(rèn)樣式文件。

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

3、定制樣式文件。

我們更關(guān)心如何定制樣式文件。最簡(jiǎn)單的方法是參考上面所說(shuō)到的默認(rèn)的樣式文件然后進(jìn)行修改。當(dāng)然你也可以google上搜一些如何修改，不過(guò)個(gè)人覺(jué)得網(wǎng)上講如何修改的都只給一個(gè)實(shí)例而已，具體的思路并沒(méi)有給出。授之于魚(yú)不如授之以漁。

4、樣式實(shí)例。

4.1 默認(rèn)樣式

我們的實(shí)例就選擇RadioButton。相信你已經(jīng)看到過(guò)它的默認(rèn)樣式。

看看默認(rèn)的樣式文件：

<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>

可以看出它其實(shí)就有兩個(gè)重要的樣式，一個(gè)是background一個(gè)是button。

①background。

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

 (這是透明圖標(biāo)，四周的黑色邊框是預(yù)覽區(qū)域)。

②button。

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

<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>

這下清楚了吧，原來(lái)RadioButton的樣式是如此復(fù)雜，一共有6中狀態(tài)（你非得說(shuō)是8種那么你必須認(rèn)真看看）。如圖：

4.2 定義樣式

目錄結(jié)構(gòu)如下： 

在你的項(xiàng)目中建立一個(gè)style.xml文件，文件中的內(nèi)容當(dāng)然就是把默認(rèn)的樣式拷貝出來(lái)（熟練以后也可以自己寫(xiě)）然后進(jìn)行一些修改。

style.xml內(nèi)容如下：

<?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是個(gè)xml文件，內(nèi)容如下：

<?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圖片。如圖：

 4.3使用樣式。

在你xml中添加   即可（MyRadioButton是上面的命名）。

使用的布局實(shí)例如下：

<?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、相關(guān)說(shuō)明。

對(duì)于style.xml中為什么給background加個(gè)圖片而把button的圖片設(shè)置為@null。這點(diǎn)其實(shí)要看你個(gè)人需要：

①如果你需要的樣式是點(diǎn)選以后整個(gè)背景都改變那么改background的樣式就可以了，而且把button的樣式設(shè)置成@null，如果不設(shè)置的話(huà)當(dāng)然是系統(tǒng)默認(rèn)的樣式。
②如果你只是想把系統(tǒng)樣式中的那個(gè)帶圈的圖給換點(diǎn)的話(huà)那么改button的樣式就可以了。

6、總結(jié)。

改默認(rèn)的組件樣式挺簡(jiǎn)單的，總結(jié)步驟如下：

①找到默認(rèn)的組件樣式。
②把樣式拷貝到你的項(xiàng)目中進(jìn)行修改。
③應(yīng)用樣式。

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

7、讀者作業(yè)。

看過(guò)本文以后還是給你留個(gè)練習(xí)的機(jī)會(huì)。你可以按照本文的思路改一個(gè)復(fù)選框試一試。

PS：有人覺(jué)得google一下可能比自己改要快很多，但是當(dāng)你沒(méi)有網(wǎng)絡(luò)的時(shí)候就該這么改，而且你可以更清楚組件的默認(rèn)樣式。再說(shuō)了google不一定就有那么合適的文章。文章中如有不清楚的地方可以留言，歡迎交流。
android交流QQ群：196761677 。

最新評(píng)論