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

前言