程序猿媛二：Android底部导航栏（选项卡）

底部导航栏（选项卡）

ViewPager+RadioGroup

声明：博文为原创，文章内容为，效果展示，思路阐述，及代码片段。源码请通过应用内下载。

转载请保留原文出处“http://my.oschina.net/gluoyer/blog”，谢谢！

应用下载：“http://mail.sina.com.cn/netdisk/download.php?id=d156f9c2124d9db7ce5de4007594800463”

引子：昨天群里有人说用Button做导航栏，然后，用ViewPager结合Fragment做显示，后退会崩溃！？！

强烈表示不相信，今天整理了一下类似功能，给吖看看，也顺便记录一下。

本文介绍：利用RadioGroup做导航栏，ViewPager结合Fragment管理显示页面。

可以通过点击导航栏，或者左右滑动手势，切换页面。
Fragment的内容，根据需求设置。示例中，添加了文本，列表，ViewPager三种。

实现效果如下：

主页面的布局文件activity_btm_navi.xml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/color_view_bkg" >
    <RadioGroup
        android:id="@+id/navi_switcher"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
    	android:orientation="horizontal"
    	android:gravity="center_vertical"
    	android:checkedButton="@+id/navi_switcher_item_hp" >
        <RadioButton
            android:id="@+id/navi_switcher_item_hp"
            style="@style/radio_btn_style"
            android:text="@string/str_btm_navi_name_hp" />
        <RadioButton
            android:id="@+id/navi_switcher_item_lv"
            style="@style/radio_btn_style"
            android:text="@string/str_btm_navi_name_lv" />
        <RadioButton
            android:id="@+id/navi_switcher_item_vp"
            style="@style/radio_btn_style"
            android:text="@string/str_btm_navi_name_vp" />
    </RadioGroup>    

    <android.support.v4.view.ViewPager
        android:id="@+id/navi_view_pager"
        android:layout_above="@id/navi_switcher"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent" 
        android:layout_height="match_parent"
        android:padding="0dip" />
</RelativeLayout>

它的基础是RelativeLayout。RadioGroup包含三个子项置于页面底部，点击进行页面切换。

ViewPager，在RadioGroup上面，铺满剩余页面，进行内容的管理、显示。

主页面Activity里的处理：

主要是在导航栏的点击或手势滑动后，对另外的控件内容进行更新。

Activity中定义了如下静态变量，对应三项内容，在更新时进行控制：

    private final int CB_INDEX_HP = 0;
    private final int CB_INDEX_LV = 1;
    private final int CB_INDEX_VP = 2;

View分别为：

导航栏：RadioGroup mSwitcher;

页面：ViewPager mSearchVp;

更新主要有两处处理：

一、点击导航栏后，页面显示项的更新：

OnCheckedChangeListener mCheckedChgLitener = new OnCheckedChangeListener() {
	@Override
	public void onCheckedChanged(RadioGroup group, int checkedId) {
		int cur = CB_INDEX_HP;
		switch(checkedId) {
			case R.id.navi_switcher_item_hp:
				cur = CB_INDEX_HP;
				break;
			case R.id.navi_switcher_item_lv:
				cur = CB_INDEX_LV;
				break;
			case R.id.navi_switcher_item_vp:
				cur = CB_INDEX_VP;
				break;
		}
		if(mSearchVp.getCurrentItem() != cur) {
			mSearchVp.setCurrentItem(cur);
		}
	}
};

代码在导航栏被点击的回调事件中，通过判断更新了页面的当前显示项。

二、手势滑动后，导航栏的更新：

OnPageChangeListener mPageChgListener = new OnPageChangeListener() {
	@Override
	public void onPageSelected(int position) {
		int vpItem = mSearchVp.getCurrentItem();
		switch(vpItem) {
			case CB_INDEX_HP:
				mSwitcher.check(R.id.navi_switcher_item_hp);
				break;
			case CB_INDEX_LV:
				mSwitcher.check(R.id.navi_switcher_item_lv);
				break;
			case CB_INDEX_VP:
				mSwitcher.check(R.id.navi_switcher_item_vp);
				break;
		}
	}
};

代码在页面改变回调事件中，重新设置了导航栏的显示项。

另：用ViewPager设置FragmentPagerAdapter，实现结合Fragment管理页面，比较简单。

在自定义的Adapter里面，通过列表保留所需的Fragment即可，不赘述！

——————————————————————————————————————

因为涉及到后续的更新，为了方便源码的管理和更新，采取了应用的方式来获取源码，保证可用。

应用下载：“http://mail.sina.com.cn/netdisk/download.php?id=d156f9c2124d9db7ce5de4007594800463”

应用运行后，按钮点击可进入效果演示；

按手机的菜单键，显示“关于”，点击进入笔者相关页面，并在底部提供按钮“获取源码”。

下面附录，运行初始页面；获取源码成功提示页面；及打开源码压缩文件截图：