程序猿媛二：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;

    更新主要有兩到處理：

1、點擊導航欄後，頁面顯示項的更新：

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);
		}
	}
};

代碼在導航欄被點擊的回調事件中，經過判斷更新了頁面的當前顯示項。

2、手勢滑動後，導航欄的更新：

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」

    應用運行後，按鈕點擊可進入效果演示；

    按手機的菜單鍵，顯示「關於」，點擊進入筆者相關頁面，並在底部提供按鈕「獲取源碼」。

    下面附錄，運行初始頁面；獲取源碼成功提示頁面；及打開源碼壓縮文件截圖：

全文完，但願對您有幫助，謝謝！

應用下載：「http://mail.sina.com.cn/netdisk/download.php?id=d156f9c2124d9db7ce5de4007594800463」

轉載請保留原文出處「http://my.oschina.net/gluoyer/blog」，謝謝！