前言

Android的底部导航栏，如下图

image.png

all.gif

本文现在用BottomNavigationBar来实现，先看一下效果图：

animation.gif

项目源码：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