Android底部導航BottomNavigationBar的使用

前言

Android的底部導航欄，如下圖

其實有多種實現方式，可以用RadioGroup,LinearLayout+TextVIew,也可以用TabHost實現。Google官方一直沒有現成的導航組件。但是Google在自己推出的Material design中增加了Bottom Navigation導航控制，下面附上Google官方的BottomNavigationBar的鏈接https://github.com/Ashok-Varma/BottomNavigation

本文現在用BottomNavigationBar來實現，先看一下效果圖：

項目源碼：https://github.com/baojie0327/SsrjMvp

1 引入BottomNavigationBar

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

2 在xml文件中引入佈局

 <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"></com.ashokvarma.bottomnavigation.BottomNavigationBar>

3 設置狀態，背景顏色等

 // TODO 設置模式
        mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
        // TODO 設置背景色樣式
        mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
        mBottomNavigationBar.setBarBackgroundColor(R.color.background_gray_color);

三種模式：

• MODE_DEFAULT
  如果Item的個數<=3就會使用MODE_FIXED模式，否則使用MODE_SHIFTING模式

• MODE_FIXED （固定大小）
  填充模式，未選中的Item會顯示文字，沒有換擋動畫。
  寬度=總寬度/action個數
  最大寬度: 168dp
  最小寬度: 80dp
  Padding：6dp（8dp）、10dp、12dp
  字體大小：12sp、14sp

• MODE_SHIFTING （不固定大小）
  換擋模式，未選中的Item不會顯示文字，選中的會顯示文字。在切換的時候會有一個像換擋的動畫

三種Style

• BACKGROUND_STYLE_DEFAULT
  如果設置的Mode爲MODE_FIXED，將使用BACKGROUND_STYLE_STATIC 。如果Mode爲MODE_SHIFTING將使用BACKGROUND_STYLE_RIPPLE。

• BACKGROUND_STYLE_STATIC
  點擊的時候沒有水波紋效果
  航條的背景色是白色，加上setBarBackgroundColor（）可以設置成你所需要的任何背景顏色

• BACKGROUND_STYLE_RIPPLE
  點擊的時候有水波紋效果
  導航條的背景色是你設置的處於選中狀態的 Item的顏色（ActiveColor），也就是setActiveColorResource這個設置的顏色

	MODE_FIXED	MODE_SHIFTING
BACKGROUND_STYLE_STATIC
BACKGROUND_STYLE_RIPPLE

4 設置Badges，一般用於消息提醒

 mTextBadgeItem = new TextBadgeItem()
                .setBorderWidth(4)
                .setBackgroundColorResource(R.color.main_color)
                .setText("5")
                .setTextColorResource(R.color.white)
                .setBorderColorResource(R.color.colorPrimaryDark)  //外邊界顏色
                .setHideOnSelect(false);

        mShapeBadgeItem = new ShapeBadgeItem()
                .setShape(ShapeBadgeItem.SHAPE_OVAL)
                .setShapeColor(R.color.main_color)
                .setShapeColorResource(R.color.main_color)
                .setSizeInDp(this,10,10)
                .setEdgeMarginInDp(this,2)
//                .setSizeInPixels(30,30)
//                .setEdgeMarginInPixels(-1)
                .setGravity(Gravity.TOP | Gravity.END)
                .setHideOnSelect(false);

5 設置BottomNavigationBar

 mBottomNavigationBar
                .addItem(new BottomNavigationItem(R.mipmap.tab_home_pressed, "首頁").setActiveColorResource(R.color.main_color).setInactiveIconResource(R.mipmap.tab_home_normal).setInActiveColorResource(R.color.icon_color))
                .addItem(new BottomNavigationItem(R.mipmap.tab_benefits_check, "資訊").setActiveColorResource(R.color.main_color).setInactiveIconResource(R.mipmap.tab_benefits_check_no).setInActiveColorResource(R.color.icon_color).setBadgeItem(mShapeBadgeItem))
                .addItem(new BottomNavigationItem(R.mipmap.tab_mine, "我的").setActiveColorResource(R.color.main_color).setInactiveIconResource(R.mipmap.tab_mine_off).setInActiveColorResource(R.color.icon_color).setBadgeItem(mTextBadgeItem))
                .setFirstSelectedPosition(lastSelectedPosition)
                .initialise();

6設置監聽

  mBottomNavigationBar.setTabSelectedListener(this);

 @Override
    public void onTabSelected(int position) {
        lastSelectedPosition = position;
        //開啓事務
        mTransaction = mManager.beginTransaction();
        hideFragment(mTransaction);

        /**
         * fragment 用 add + show + hide 方式
         * 只有第一次切換會創建fragment，再次切換不創建
         *
         * fragment 用 replace 方式
         * 每次切換都會重新創建
         *
         */
        switch (position){
            case 0:
                if (mNearbyFragment == null) {
                    mNearbyFragment = new NearbyFragment();
                    mTransaction.add(R.id.ll_content,
                            mNearbyFragment);
                } else {
                    mTransaction.show(mNearbyFragment);
                }
                break;
            case 1:
                if (mDisCountFragment == null) {
                    mDisCountFragment = new DisCountFragment();
                    mTransaction.add(R.id.ll_content,
                            mDisCountFragment);
                } else {
                    mTransaction.show(mDisCountFragment);
                }
                break;
            case 2:
                isLogin=mSharedPreferencesUtil.getBoolean(SharedPreferencesUtil.LOGIN_STATUS, false);
                if (isLogin==false){
                    Intent intent=new Intent(MainActivity.this, LoginActivity.class);
                    startActivity(intent);
                }else {
                    if (mMineFragment == null) {
                        mMineFragment = new MineFragment();
                        mTransaction.add(R.id.ll_content,
                                mMineFragment);
                    } else {
                        mTransaction.show(mMineFragment);
                    }
                }

                break;
        }
        // 事務提交
        mTransaction.commit();
      //  mTransaction.commitAllowingStateLoss();
    }

    @Override
    public void onTabUnselected(int position) {

    }

    @Override
    public void onTabReselected(int position) {

    }

代碼下載：https://github.com/baojie0327/SsrjMvp