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>

 顯示的效果如下：