Android用BottomNavigationBar实现底部导航栏

之前底部导航栏的基本上都是自己通过selector来实现的，今天换上了Google推出的BottomNavigationBar，感觉效果还不错，写了一个项目上要用到的功能的demo，先上一张效果图，大家感受一下：

这里主要介绍BottomNavigationBar的使用，首先要在build.gradle中添加依赖：

//底部导航栏样式BottomNavigationBar
compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.3'

然后在布局文件中就可以使用了：

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

接下来就是 BottomNavigationBar在activity中的使用，当然，首先是实例化控件：

mBottomNavigationBar= (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);

大家看到的效果图中的变化的数字和蓝色五角星是分别通过TextBadgeItem和ShapeBadgeItem来实现的：

mTextBadgeItem = new TextBadgeItem()
        .setBorderWidth(4)
        .setBackgroundColorResource(R.color.colorAccent)
        .setAnimationDuration(200)
        .setText("3")
        .setHideOnSelect(false);

mShapeBadgeItem = new ShapeBadgeItem()
        .setShapeColorResource(R.color.colorPrimary)
        .setGravity(Gravity.TOP | Gravity.END)
        .setHideOnSelect(false);

然后就是设置 BottomNavigationBar的属性了：

mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED)
                .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);

        mBottomNavigationBar //值得一提，模式跟背景的设置都要在添加tab前面，不然不会有效果。
                .setActiveColor(R.color.green);//选中颜色 图标和文字
//                .setInActiveColor("#8e8e8e")//默认未选择颜色
//                .setBarBackgroundColor(R.color.white);//默认背景色

        mBottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.homepage_click,"首页")
                        .setInactiveIcon(ContextCompat.getDrawable(MainActivity.this,R.drawable.homepage_normal))
                .setBadgeItem(mShapeBadgeItem))
                .addItem(new BottomNavigationItem(R.drawable.grown_wall_click,"成长墙")
                        .setInactiveIcon(ContextCompat.getDrawable(MainActivity.this,R.drawable.grown_wall_normal)))
                .addItem(new BottomNavigationItem(R.drawable.study_click,"学管通")
                        .setInactiveIcon(ContextCompat.getDrawable(MainActivity.this,R.drawable.study_normal))
                        .setBadgeItem(mTextBadgeItem))
                .addItem(new BottomNavigationItem(R.drawable.me_click,"我的")
                        .setInactiveIcon(ContextCompat.getDrawable(MainActivity.this,R.drawable.me_normal)))
                .setFirstSelectedPosition(0)//设置默认选择的按钮
                .initialise();//所有的设置需在调用该方法前完成

Mode和BackgroundStyle分别有三种，分别包含一种Default模式：

Mode包含3种Mode:
- MODE_DEFAULT
  如果Item的个数<=3就会使用MODE_FIXED模式，否则使用MODE_SHIFTING模式
- MODE_FIXED
  填充模式，未选中的Item会显示文字，没有换挡动画。
- MODE_SHIFTING
  换挡模式，未选中的Item不会显示文字，选中的会显示文字。在切换的时候会有一个像换挡的动画
Background Style包含3种Style:
- BACKGROUND_STYLE_DEFAULT
  如果设置的Mode为MODE_FIXED，将使用BACKGROUND_STYLE_STATIC 。如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。
- BACKGROUND_STYLE_STATIC
  点击的时候没有水波纹效果
- BACKGROUND_STYLE_RIPPLE
  点击的时候有水波纹效果

官方地址为：https://github.com/Ashok-Varma/BottomNavigation

官方效果图：

BottomNavigationBar在addItem时可以只添加一个图片， BottomNavigationBar在点击时会自动给你添加的图片填充颜色，这个颜色是你当前页面的主色，像这样：

mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.homepage_click,"首页")

当然有时候这个填充颜色的图片可能跟你们UI给你的设计效果图不一致，所以你也可以像我一样这样添加：

mBottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.homepage_click,"首页")
                        .setInactiveIcon(ContextCompat.getDrawable(MainActivity.this,R.drawable.homepage_normal))
                .setBadgeItem(mShapeBadgeItem))

setBadgeItem（）方法就是效果上的设置的蓝色五角星的效果，传的是 ShapeBadgeItem，当然换成 TextBadgeItem的话就是那个加减数字的效果了，ShapeBadgeItem和TextBadgeItem可以通过他们的hide（）和show（）方法来控制他们的显示和隐藏。属性就介绍这么多吧。

下面要实现BottomNavigationBar的点击选择事件:

mBottomNavigationBar //设置lab点击事件
                .setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
                    @Override
                    public void onTabSelected(int position) {
                        switch (position){
                            case 0:
                                index = 0;
                                break;
                            case 1:
                                index = 1;
                                break;
                            case 2:
                                index = 2;
                                break;
                            case 3:
                                index = 3;
                                break;
                        }
                        if (index == 2) {
                            startActivity(new Intent(MainActivity.this, ChatActivity.class));
                            return;
                        }
                        if (currentTabIndex != index) {
                            FragmentTransaction trx = getSupportFragmentManager().beginTransaction();
                            trx.hide(mFragments[currentTabIndex]);
                            if (!mFragments[index].isAdded()) {
                                trx.add(R.id.fl, mFragments[index]);
                            }
                            trx.show(mFragments[index]).commit();
                        }
                        currentTabIndex = index;
//                        Toast.makeText(MainActivity.this,"onTabSelected"+position,Toast.LENGTH_SHORT).show();
                    }

                    @Override
                    public void onTabUnselected(int position) {
                        if (index==2){
                            mBottomNavigationBar.selectTab(position);
                        }
//                        Toast.makeText(MainActivity.this,"onTabUnselected"+position,Toast.LENGTH_SHORT).show();
                    }

                    @Override
                    public void onTabReselected(int position) {
//                        Toast.makeText(MainActivity.this,"onTabReselected"+position,Toast.LENGTH_SHORT).show();

                    }
                });

这就是它的Tab选择事件了，是不是很简单，好像也没什么要重点说明的，他的下标是从0开始的应该不用我提醒吧

，好的，就是这样了。

给出Demo下载地址：http://download.csdn.net/download/lkjfyy/10178202

Android用BottomNavigationBar实现底部导航栏

猜你喜欢