Fragment实现的底部导航

流行的应用的导航一般分为两种，一种是底部导航，一种是侧边栏。

我所做的项目涉及到比较多的是底部导航，今天我就把项目中使用的一种实现方式分享一下。

主要实现思路是：在一个Activity里面底部添加四个按键，上边通过切换不同的Fragment来实现。

首先在activity_main.xml

实现一个底部布局

[html] view
plaincopy

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

代码如下：

[html] view
plaincopy

/**  

 * 初始化首个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();

最后就是拦截返回键的处理了。

[java] view
plaincopy

//点击返回按钮  

@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("通讯录");

注：用到了腾讯的几张图片

这个例子到这里就结束了，代码下载