Android底部导航栏BottomNavigationBar使用方法

官方的support design包中其实也有底部导航栏的控件叫BottomNavigationView，但是很不爽的地方就是当底部导航栏的item个数大于4个的时候会自动的改变显示模式，隐藏了文字，相比之下，下面的导航栏就没有这个问题，而且还有一些官方没有的功能，比如徽章。

目前github上的版本更新到了2.02版本，使用上没什么太大的变化，下面是地址

https://github.com/Ashok-Varma/BottomNavigation

---

1.使用BottomNavigationBar首先要先添加依赖，更改为最新的版本即可
compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.0’

2.接下来是布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    tools:context="com.example.yzq.csdn_bottomnav.MainActivity">


    <!--内容区域-->
    <LinearLayout
        android:id="@+id/bottom_nav_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


    <!--BottomNavigationBar-->
    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom">


    </com.ashokvarma.bottomnavigation.BottomNavigationBar>


</android.support.design.widget.CoordinatorLayout>

布局很简单，就是一个内容区域和一个底部的导航栏。
内容区域只是用来显示不同的fragment

3.接下来转到MainActivity中
先设置BottomNavigationBar的样式和添加选项

默认有3种样式，通过对setMode和setBackgroundStyle的进行不同的组合会有不同的效果，感兴趣的可以自己尝试。

  bottom_navigation_bar_container.setAutoHideEnabled(true);//自动隐藏

        //BottomNavigationBar.MODE_SHIFTING;
        //BottomNavigationBar.MODE_FIXED;
        //BottomNavigationBar.MODE_DEFAULT;
        bottom_navigation_bar_container.setMode(BottomNavigationBar.MODE_FIXED);

        // BottomNavigationBar.BACKGROUND_STYLE_DEFAULT;
        // BottomNavigationBar.BACKGROUND_STYLE_RIPPLE
        // BottomNavigationBar.BACKGROUND_STYLE_STATIC
        bottom_navigation_bar_container.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);


        bottom_navigation_bar_container.setBarBackgroundColor(R.color.white);//背景颜色
        bottom_navigation_bar_container.setInActiveColor(R.color.nav_gray);//未选中时的颜色
        bottom_navigation_bar_container.setActiveColor(R.color.colorPrimaryDark);//选中时的颜色

我们还可以设置角标
badgeItem = new BadgeItem().setBackgroundColor(Color.RED).setText(“99”).setHideOnSelect(true);//角标

接下来创建选项

msgItem = new BottomNavigationItem(R.drawable.msg, "消息");
        msgItem.setBadgeItem(badgeItem);
        taskItem = new BottomNavigationItem(R.drawable.task, "任务");
        noticeItem = new BottomNavigationItem(R.drawable.notice, "公告");

然后将选项添加并初始化，设置监听
bottom_navigation_bar_container.addItem(msgItem).addItem(taskItem).addItem(noticeItem);
bottom_navigation_bar_container.initialise();
bottom_navigation_bar_container.setTabSelectedListener(this);

这样 底部导航栏就出来啦

4.接下来就是对监听做处理 选择选项时显示相应的fragment

/*底部NaV监听*/
    @Override
    public void onTabSelected(int position) {
        hideAllFrag();//先隐藏所有frag
        switch (position) {
            case 0:
                if (msgFrag == null) {
                    msgFrag = new MsgFragment();
                }
                addFrag(msgFrag);
                getSupportFragmentManager().beginTransaction().show(msgFrag).commit();
                getSupportActionBar().setTitle("消息");

                break;
            case 1:
                if (taskFrag == null) {

                    taskFrag = new TaskFragment();
                }

                addFrag(taskFrag);
                getSupportFragmentManager().beginTransaction().show(taskFrag).commit();
                getSupportActionBar().setTitle("任务");

                break;
            case 2:
               /*公告Frag*/
                if (noticeFrag == null) {
                    noticeFrag = new NoticeFragment();

                }
                addFrag(noticeFrag);
                getSupportFragmentManager().beginTransaction().show(noticeFrag).commit();
                getSupportActionBar().setTitle("公告");
                break;
        }

    }

大功告成！这样一个漂亮的底部导航就完成了，很简单吧。效果图如下

下面是写的一个小demo
底部导航栏Demo

需要Flutter底部导航栏的可以看 Flutter底部导航栏使用方法 这篇文章