Android下利用RadioGroup和RadioButton实现Tabbar的效果

本实现方法主要使用RadioGroup和RadioButton的组合方式来实现Tabbar的效果。

其中选中的Tab的切换的动作可以通过RadioGroup的OnCheckedChangeListener监听事件来完成动作的响应。

tab切换事件代码如下：

RadioGroup rg = (RadioGroup) findViewById(R.id.bottom_tabbar);
rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                case R.id.bottom_tabbar_rb_1:
                    …
                    break;
                case R.id.bottom_tabbar_rb_2:
                    …
                    break;
                }
            }
        });

如果要设置初始的选中item可以使用RaidoGroup的check(int id)方法。参数id指的是RadioGroup中的RadioButton的id。

tabbar对应的xml的布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/bottom_bar_height"    android:orientation="horizontal" ><!—设置横向排列 -->
 
    <RadioButton
        android:id="@+id/bottom_tabbar_rb_1"
       android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/bg_bottom_bar_item"<!—设置Tab的选中背景-->
        android:button="@android:color/transparent"<!—隐藏RaidoButton的图标-->
        android:drawableTop="@drawable/ic_bottom_item_home"<!—设置RadioButton的Icon-->
        android:gravity="center"
        android:text="@string/bottom_bar_item_home_text"/>
 
    <RadioButton
        android:id="@+id/bottom_tabbar_rb_2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/bg_bottom_bar_item"
        android:button="@android:color/transparent"
        android:drawableTop="@drawable/ic_bottom_item_notice"
        android:gravity="center"
        android:text="@string/bottom_bar_item_notice_text"/>
</RadioGroup>

显示的效果如下：