Android用RadioGroup控件實現Tab選項卡效果

現在越來越多的app使用Tab選項卡的效果了，今天我們也來試試，上次我們說過用TextView控件來實現，但是要做選中與未選中的效果切換需要寫代碼來實現，比較複雜，今天我們就來用RadioGroup控件實現，更加簡單和快捷。

RadioGroup控件定義如下：

<RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@drawable/tab_bg"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:paddingBottom="5dp"
        android:paddingTop="5dp" >

        <RadioButton
            android:id="@+id/radioHome"
            style="@style/radioStyle"
            android:checked="true"
            android:drawableTop="@drawable/selector_button_home"
            android:text="@string/home" />

        <RadioButton
            android:id="@+id/radioCar"
            style="@style/radioStyle"
            android:drawableTop="@drawable/selector_button_car"
            android:text="@string/car" />

        <RadioButton
            android:id="@+id/radioAbout"
            style="@style/radioStyle"
            android:drawableTop="@drawable/selector_button_about"
            android:text="@string/about" />
    </RadioGroup>

其中，style屬性，drawableTop屬性和text都使用xml配置的方式來定義。

selector_button_home的定義如下（新建xml的時候要選擇drawable的selector類型）：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/home_select" android:state_checked="true"></item>
    <item android:drawable="@drawable/home_unselect"></item>
</selector>

實現的效果是，當radioHome單選按鈕選中與未選中時，自動切換按鈕的圖片。另外兩個按鈕的xml定義也一樣，只不過改了圖片。

style屬性是將radio按鈕通用的屬性定義抽取出來，xml如下

    <style name="radioStyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:button">@null</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:textColor">@color/color_button</item>
        <item name="android:drawablePadding">3dp</item>
        <item name="android:textSize">12sp</item>

        <item name="android:background">@null</item>
    </style>

上面設置button屬性爲@null，目的是去掉radio按鈕自帶的那個小圓圈。

而設置background屬性爲@null，是爲了兼容低版本的手機系統，在低版本系統裏，如果不這麼設置的話，RadioGroup做的按鈕會偏移，原因是因爲這個屬性默認有一張背景圖片。

而text屬性也是實現了當radio按鈕的文字效果在選中與未選中時自動切換效果，在新建xml的時候，要選擇Color List和selector

color_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="#E63B53"/>
    <item android:color="#82858b"/>
</selector>

這裏實現的是，選中與未選中時，切換文字的顏色。

最終效果如下（選中時，顯示紅色圖片和文字，未選中時，顯示灰色圖片和文字）：