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

上面的效果是用Radio進行製做的，通常咱們作底部的切換欄的時候須要讓按鈕和文字都有一個選中的狀態，而後根據點擊不一樣的按鈕觸發不一樣的頁面，這裏的頁面通常都是fragment作的。這裏咱們不討論複雜的東西，只是講如何實現這樣的效果。這裏的關鍵點是中間的按鈕和兩邊的按鈕沒有互斥關係，僅僅是一個獨立的ImageView，還有就是按鈕的文字須要根據選中的狀態進行變化，按鈕的圖片須要根據狀態進行變化。

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

咱們在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>

這裏和上面不一樣點在於根據不一樣的狀態選取的是圖片。

 

2、準備就緒，實現效果

實現效果的方式超級簡單，和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