【簡單項目框架一】Fragment實現的底部導航

流行的應用的導航一般分爲兩種，一種是底部導航，一種是側邊欄。

我所做的項目涉及到比較多的是底部導航，今天我就把項目中使用的一種實現方式分享一下。

主要實現思路是：在一個Activity裏面底部添加四個按鍵，上邊通過切換不同的Fragment來實現。

首先在activity_main.xml

實現一個底部佈局

   <RelativeLayout
        android:id="@+id/aboveLayout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="#dbdbdb"
            android:orientation="vertical" >

            <LinearLayout
                android:id="@+id/fragmentRoot"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" />

            <LinearLayout
                android:id="@+id/bottomList"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:background="@android:color/black"
                android:orientation="horizontal" >

                <LinearLayout
                    android:id="@+id/bottomItemCurrentBg1"
                    style="@style/main_bottom_item" >

                    <RadioButton
                        android:id="@+id/rbMain"
                        style="@style/footbar"
                        android:drawableTop="@drawable/tab_weixin_normal"
                        android:paddingTop="8dp"
                        android:text="微信" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/bottomItemCurrentBg2"
                    style="@style/main_bottom_item" >

                    <RadioButton
                        android:id="@+id/rbCategory"
                        style="@style/footbar"
                        android:drawableTop="@drawable/tab_address_normal"
                        android:paddingTop="8dp"
                        android:text="通訊錄" />
                </LinearLayout>


                <LinearLayout
                    android:id="@+id/bottomItemCurrentBg3"
                    style="@style/main_bottom_item" >

                    <RadioButton
                        android:id="@+id/rbFind"
                        style="@style/footbar"
                        android:drawableTop="@drawable/tab_find_frd_normal"
                        android:paddingTop="8dp"
                        android:text="發現" />
                </LinearLayout>


                <LinearLayout
                    android:id="@+id/bottomItemCurrentBg4"
                    style="@style/main_bottom_item" >

                    <RadioButton
                        android:id="@+id/rbMe"
                        style="@style/footbar"
                        android:drawableTop="@drawable/tab_settings_normal"
                        android:paddingTop="8dp"
                        android:text="我" />
                </LinearLayout>
            </LinearLayout>
        </RelativeLayout>

    </RelativeLayout>

這裏主要用到的知識點有：style的使用，Radiobutton的一些特殊屬性設置，權重，以及drawableTop的使用。

底部佈局實現之後，就需要在MainActivity裏面找到對應的控件做出相應的邏輯處理了。

首先實例化一個FragmentManager實例

然後初始化首頁的佈局，這裏爲微信首頁面，通過調用initFragment();來實現，接着就是點擊的處理dealBottomButtonsClickEvent();

代碼如下：

	/**
	 * 初始化首個Fragment
	 */
	private void initFragment() {
		FragmentTransaction ft = fMgr.beginTransaction();
		WeiXinFragment weiXinFragment = new WeiXinFragment();
		ft.add(R.id.fragmentRoot, weiXinFragment, "weiXinFragment");
		ft.addToBackStack("weiXinFragment");
		ft.commit();		
	}
	/**
	 * 處理底部點擊事件
	 */
	private void dealBottomButtonsClickEvent() { 
		findViewById(R.id.rbWeiXin).setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				if(fMgr.findFragmentByTag("weiXinFragment")!=null && fMgr.findFragmentByTag("weiXinFragment").isVisible()) {
					return;
				}
				popAllFragmentsExceptTheBottomOne();

			}
		});

點擊初始化的代碼我只截取了一個，這裏用到的幾個知識點是：

1、Fragment的管理，添加，放入堆棧，提交

2、關於Fragment的Tag的使用，因爲在初始化的時候設置了tag，所以在點擊時間裏面，判斷如果當前的的Fragment顯示着，那麼就直接return，都則彈出之前所有的Fragment保留WeiXinFragment。

3、關於Fragment堆棧的問題，添加的時候是把一new的Fragment添加到堆棧裏，這裏調用了fMgr.popBackStack();

最後就是攔截返回鍵的處理了。

	//點擊返回按鈕
	@Override
	public void onBackPressed() {
		if(fMgr.findFragmentByTag("weiXinFragment")!=null && fMgr.findFragmentByTag("weiXinFragment").isVisible()) {
			MainActivity.this.finish();
		} else {
			super.onBackPressed();
		}
	}

邏輯是：如果當前的Fragment是WeiXinFragment則推出當前應用，否則調用父返回鍵，這樣可以保證別的Fragment切換到WeixinFragment

代碼裏涉及到的別的就是com.walker.fragmentnavigation.fragment包裏的四個頁面佈局，都是繼承自Fragment。

需要說明的知識點有：

1、onCreateView裏面返回一個View，這個每個Fragment裏面都使用了對於的佈局

2、佈局裏面的頂部title是複用的<include layout="@layout/top_title" />

3、在Fragment裏面有個getView()的方法可以找到對應的佈局控件，然後修改

((TextView)getView().findViewById(R.id.tvTop)).setText("通訊錄");

注：用到了騰訊的幾張圖片

這個例子到這裏就結束了，代碼下載