BottomNavigationBar的使用

自从Google推出Metrial Design这种UI规范，Android在界面设计上已经不逊色于苹果了，今天博主为大家带来BottomNavigationBar这个控件的使用，网络上很多人说google制作出来这个控件完全是鸡肋，然而我不觉得，我认为每一种东西都有他存在的价值，像这种实现底部导航的控件的确很多，但也不是每一个都是符合所有人需要的，适合的才是最好的。

1. 在build.gradle中添加依赖包

   compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.1'

2. 在布局文件中引入控件，FrameLayout用于存放Fragment。

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@+id/activity_main"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical">
   
       <FrameLayout
           android:layout_width="match_parent"
           android:layout_height="0dp"
           android:layout_weight="1"
           android:id="@+id/frame_content"></FrameLayout>
   
       <com.ashokvarma.bottomnavigation.BottomNavigationBar
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_gravity="bottom"
           android:elevation="5dp"
           android:id="@+id/bnb_main">
       </com.ashokvarma.bottomnavigation.BottomNavigationBar>
   
   </LinearLayout>

3. 新建多个Fragment和对应的布局以及添加对应的图标，用于显示切换的页面内容。由于只需要创建多个空白页面就可以，因此这里就不再举例说明了。
4. 在主活动中使用BottomNavigationBar添加具体功能操作。通过调用BottomNavigationBar控件的setMode()、setBackgroundStyle()方法设置控件的属性；再调用addItem()进行子项的添加，其中BottomNavigationItem对象用于加载导航的图标和文字；调用setActiveColorResource()方式设置选中状态下的导航按钮颜色变化；通过设置setFirstSelectedPostition(0)设置程序进入的第一个页面为位置0的页面；之后再开启一个事务管理器将第一个页面添加到事务中并保存第一个页面为当前页。最后添加导航监听器，通过判断用户点击的位置调用switchFragment()方法传递对应位置的Fragment进行页面切换，在switchFragment()方法中判断如果是第一次进入则将传递的页面添加到事务中再进行显示，如果不是第一次进入，说明页面已经添加到事务中了，那么就直接将页面显示出来即可。

   // 底部导航栏
   mBottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bnb_main);
   mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
   mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
   mBottomNavigationBar.addItem(new BottomNavigationItem(R.mipmap.icon_main,"规划")
                           .setActiveColorResource(R.color.md_blue_400))
                   .addItem(new BottomNavigationItem(R.mipmap.icon_work,"记账")
                           .setActiveColorResource(R.color.md_blue_400))
                   .addItem(new BottomNavigationItem(R.mipmap.icon_app,"新闻")
                           .setActiveColorResource(R.color.md_blue_400))
                   .addItem(new BottomNavigationItem(R.mipmap.icon_mine,"生活")
                           .setActiveColorResource(R.color.md_blue_400))
                   .setFirstSelectedPosition(0)
                   .initialise();
   // 设置默认页
   mTransaction = getSupportFragmentManager().beginTransaction();
   mPlanFragment = new PlanFragment();
   mTransaction.add(R.id.frame_content,mPlanFragment).commit();
   mCurrentFragment = mPlanFragment;
   
   // 设置导航监听器
   mBottomNavigationBar.setTabSelectedListener(this);
   
       @Override
       public void onTabSelected(int position) {
           switch (position) {
               case 0:
                   if (mPlanFragment == null)
                       mPlanFragment = new PlanFragment();
                   switchFragment(mPlanFragment);
                   break;
   
               case 1:
                   if (mAccountFragment == null)
                       mAccountFragment = new AccountFragment();
                   switchFragment(mAccountFragment);
                   break;
   
               case 2:
                   if (mNewsFragment == null)
                       mNewsFragment = new NewsFragment();
                   switchFragment(mNewsFragment);
                   break;
   
               case 3:
                   if (mLifeFragment == null)
                       mLifeFragment = new LifeFragment();
                   switchFragment(mLifeFragment);
                   break;
   
               default:
   
                   break;
           }
       }
   
       /**
        * 导航切换
        */
       private void switchFragment(Fragment fragment) {
           if (mCurrentFragment != fragment) {
               mTransaction = getSupportFragmentManager().beginTransaction();
               if (!fragment.isAdded()) {
                   mTransaction.hide(mCurrentFragment).add(R.id.frame_content, fragment).commit();
               } else {
                   mTransaction.hide(mCurrentFragment).show(fragment).commit();
               }
               mCurrentFragment = fragment;
           }
       }
   
   
   
   
   

这样所有的工作都完成了，接下来只要运行看效果了，总的来说，程序很简单，要编写的代码不是很多。好，最后我们总结一下：

第一步引入依赖包才能使用这个功能；

第二步编写布局页面；

第三步创建Fragment和对应的布局；

第四步在主界面添加碎片实现页面切换效果：

• 实例化BottomNavigationBar控件
  
• 对BottomNavigationBar进行初始化操作，设置默认样式，添加导航子项，使用事务添加默认页
• 添加导航监听器，实现页面切换

OK，到此结束，希望对大家有所帮助。