Android 使用RadioButton+Fragment构建Tab

最近为公司开发移动app，看到app的主页面就四个选项卡加对应的页面，但是代码写复杂无比，很难维护，鉴于此想用最少的代码实现其功能，废话不多说，先上效果图。

实现思路

从图我们基本猜到基本思路如下

1. 底部选项卡可以使用3个RadioButton组成，并绑定相关的监听器以监听tab切换。
2. 选项卡的上面的部分为一个容器(FrameLayout)以存取3个fragment，可以在tab绑定的监听器中去控制fragment的显示。

---

布局文件

先看主页面的布局文件R.layout.activity_main

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

    <RadioGroup
        android:id="@+id/ll_rbtn_contain"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/rb_first"
            style="@style/tab_style"
            android:drawableTop="@drawable/tab_first_background"
            android:text="first"
            android:textColor="@color/radio_colors" />

        <RadioButton
            android:id="@+id/rb_second"
            style="@style/tab_style"
            android:drawableTop="@drawable/tab_second_background"
            android:text="second"
            android:textColor="@color/radio_colors" />

        <RadioButton
            android:id="@+id/rb_thrid"
            style="@style/tab_style"
            android:drawableTop="@drawable/tab_third_background"
            android:text="thrid"
            android:textColor="@color/radio_colors" />
    </RadioGroup>

    <FrameLayout
        android:id="@+id/fl_contain"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/ll_rbtn_contain"
        android:layout_alignParentTop="true" >
    </FrameLayout>

</RelativeLayout>

根视图为相对布局以控制RadioGroup在底部，FrameLayout在RadioGroup的上面

---

设置选项卡Style

每个RadioButton都设置了统一的tab_style

<!-- 底部Tab按钮样式 -->
<style name="tab_style">
        <item name="android:textSize">12sp</item>
        <item name="android:gravity">center</item>
        <item name="android:background">@drawable/home_btn_bg</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:button">@null</item>
        <item name="android:paddingTop">2dp</item>
        <item name="android:singleLine">true</item>
        <item name="android:layout_weight">1.0</item>
</style>

---

设置选项卡icon的背景

每个radioButton都设置了android:drawableTop属性，只要创建三个drawable文件即可 eg :tab_first_background.xml

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

---

设置选项卡title的背景

除了选显卡对应的icon要改变外，其对应的title的字体颜色也要随之改变。注意要在res下创建color文件夹并将颜色状态配置文件放在此文件夹下。eg：radio_colors.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="@color/orange_color"/>
    <item android:state_checked="true" android:color="@color/orange_color"/>
    <item android:color="#aaaaaa" />
</selector>

---

代码块

package com.example.tabapp;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.FrameLayout;
import android.widget.RadioButton;


public class MainActivity extends FragmentActivity implements OnCheckedChangeListener{
    //三个选项卡
    private RadioButton mRBtnFrist;
    private RadioButton mRBtnSecond;
    private RadioButton mRBtnThrid;

    //存放fragment对应的容器
    private FrameLayout mFragmentContain;

    private TabFragment mFirstFragment;
    private TabFragment mSecondFragment;
    private TabFragment mThirdFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mFragmentContain = (FrameLayout)findViewById(R.id.fl_contain);
        mRBtnFrist = (RadioButton)findViewById(R.id.rb_first);
        mRBtnSecond = (RadioButton)findViewById(R.id.rb_second);
        mRBtnThrid = (RadioButton)findViewById(R.id.rb_thrid);

        mRBtnThrid.setOnCheckedChangeListener(this);
        mRBtnThrid.performClick();//此处设置默认第三个选项卡对应的fragment显示
        mRBtnFrist.setOnCheckedChangeListener(this);
        mRBtnSecond.setOnCheckedChangeListener(this);
    }

    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        if (isChecked) {
            //用户当前浏览的选项卡
            int checkedWidgetId = buttonView.getId();
            mRBtnFrist.setChecked(checkedWidgetId == R.id.rb_first);
            mRBtnSecond.setChecked(checkedWidgetId == R.id.rb_second);
            mRBtnThrid.setChecked(checkedWidgetId == R.id.rb_thrid);
            showFragment(checkedWidgetId);
        }else {
            //此处记录了用户上次浏览的选项卡
            String unCheckFragmentTag = getTagById(buttonView.getId());
            TabFragment unCheckFragment = (TabFragment)getSupportFragmentManager().findFragmentByTag(unCheckFragmentTag);
            if(unCheckFragment != null){
                //隐藏上次显示到fragment,确保fragment不会重叠
                getSupportFragmentManager()
                    .beginTransaction()
                    .hide(unCheckFragment)
                    .commit();
            }
        }
    }

    /**
     * 显示对应的fragment
     * @param checkedRadioBtnId
     */
    private void showFragment(int checkedRadioBtnId){
        String tag = getTagById(checkedRadioBtnId);
        TabFragment mainFragment = (TabFragment) getSupportFragmentManager().findFragmentByTag(tag);
        if(mainFragment == null){
            //如果没有找到对应的fragment则生成一个新的fragment，并添加到容器中
            TabFragment newFragment = new TabFragment(tag);
            getSupportFragmentManager()
                .beginTransaction()
                .add(R.id.fl_contain, newFragment, tag)
                .commit();
        }else {
            //如果找到了fragment则显示它
            getSupportFragmentManager()
                .beginTransaction()
                .show(mainFragment)
                .commit();
        }
    }

    /**
     * 为三个fragment分别取三个不同到tag名
     * @param widgetId
     * @return
     */
    private String getTagById(int widgetId){
        if(widgetId == R.id.rb_first){
            return "first";
        }else if(widgetId == R.id.rb_second){
            return "second";
        }else {
            return "thrid";
        }
    }
}

好了这样我们就基本实现了选显卡功能，代码注释写的很详细了，相信大家肯定明白，我就不加阐述了，good luck！

源码下载