如何用RadioButton做一個底部的切換欄

上面的效果是用Radio進行制作的，一般我們做底部的切換欄的時候需要讓按鈕和文字都有一個選中的狀態，然后根據點擊不同的按鈕觸發不同的頁面，這里的頁面一般都是fragment做的。這里我們不討論復雜的東西，只是講如何實現這樣的效果。這里的關鍵點是中間的按鈕和兩邊的按鈕沒有互斥關系，僅僅是一個獨立的ImageView，還有就是按鈕的文字需要根據選中的狀態進行變化，按鈕的圖片需要根據狀態進行變化。

一、定義按鈕的圖片和文字效果

我們在res中建立一個color的目錄，建立一個main_bottombar_text_selector.xml的文件：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="#ff0000" android:state_pressed="false" android:state_checked="true" />
    <item android:color="#555555"/>
</selector>

這里可以明顯的看出，我用到的僅僅是顏色值，而根據不同的狀態顏色值是不同的。下面開始建立按鈕圖片的效果。

在drawable中建立一個main_bottombar_icon_home_selector.xml，寫入如下代碼：

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

這里和上面不同點在於根據不同的狀態選取的是圖片。

 

二、准備就緒，實現效果

實現效果的方式超級簡單，和linearLayout中放控件一模一樣。

<RadioGroup
        android:id="@+id/main_bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:orientation="horizontal"
        android:paddingTop="5dp"
        >

        <RadioButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawablePadding="1dp"
            android:drawableTop="@drawable/main_bottombar_icon_home_selector"
            android:gravity="center"
            android:text="Tab01"
            android:textColor="@color/main_bottombar_text_selector"
            android:textSize="11sp"
            />

        <RadioButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawablePadding="1dp"
            android:drawableTop="@drawable/main_bottombar_icon_home_selector"
            android:gravity="center"
            android:text="Tab02"
            android:textColor="@color/main_bottombar_text_selector"
            android:textSize="11sp"
            />

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginTop="-3dp"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher"
            />

        <RadioButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawablePadding="1dp"
            android:drawableTop="@drawable/main_bottombar_icon_home_selector"
            android:gravity="center"
            android:text="Tab03"
            android:textColor="@color/main_bottombar_text_selector"
            android:textSize="11sp"
            />

        <RadioButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawablePadding="1dp"
            android:drawableTop="@drawable/main_bottombar_icon_home_selector"
            android:gravity="center"
            android:text="Tab04"
            android:textColor="@color/main_bottombar_text_selector"
            android:textSize="11sp"
            />


    </RadioGroup>

需要注意的是radioGroup默認是縱向排列的，需要設置方向為橫向才行哦~ 

 

如果你需要頂部的切換tab，可以參考：

https://github.com/hoang8f/android-segmented-control

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/0512/1615.html

如果你還需要紅點的話，可以參考我的一個github工程，是通過自定義RadioGroup來進行紅點的控制的：

https://github.com/tianzhijiexian/BottomTabBar

 

源碼下載：http://download.csdn.net/detail/shark0017/8801535

 

參考自：http://www.tuicool.com/articles/7VBbu2m