如何用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