BottomNavigation 使用

之前没有仔细研究过底部导航栏，最开始的时候是用LinearLayout自己写，还需要写各种判断逻辑，之后那使用RadioGroup 这样会有一个checked的状态，然后在公司一直用之前的同事写的FragmentTabHost,最近自己写小例子练习需要使用底部导航栏，用的是FragmentTabHost,不过遇到好多问题，比如Fragment的状态保存啊，获取之类的。实在是心累，然后记得之前看过BottomNavigation的文章，就尝试使用一下，这里简单记录下使用的过程。

引入

Gradle 导入

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

我用的是2.0版本的，1.0的之前也没用过。

布局

一个简单的布局，没什么可说的。

代码

直接上代码，也没什么难的

    //初始化所有fragments        
    getFragments();
    //创建对象        
    bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
    //添加Item 这里可以指定每一个Item的ActivateColor和InActivateColor，也可以统一指定
    bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_op_black_24dp, "操作"))
            .addItem(new BottomNavigationItem(R.drawable.ic_model_black_24dp, "模式"))
            .addItem(new BottomNavigationItem(R.drawable.ic_person_black_24dp_bl, "我的"))
            .setInActiveColor(R.color.text)
            .setActiveColor(R.color.colorAccent)
            .setFirstSelectedPosition(0)
            .initialise();
    //添加点击的监听，这里做切换Fragment操作
    bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
        @Override
        public void onTabSelected(int i) {
            //显示对应的Fragment
            FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
            if (fragmentList.get(i).isAdded()) {
                fragmentTransaction.show(fragmentList.get(i));
            } else {
                fragmentTransaction.add(R.id.tabs, fragmentList.get(i));
            }
            fragmentTransaction.commitAllowingStateLoss();
        }
        @Override
        public void onTabUnselected(int i) {
            //隐藏对应的Fragment
            FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
            fragmentTransaction.hide(fragmentList.get(i));
            fragmentTransaction.commitAllowingStateLoss();
        }
        @Override
        public void onTabReselected(int i) {
        }
    });
    //设置第一个fragment
    getSupportFragmentManager().beginTransaction().replace(R.id.tabs,fragmentList.get(0)).commitAllowingStateLoss();

初始化所有Fragments

private List fragmentList = new ArrayList<>();
private void getFragments() {
    OperationFragment operationFragment = new OperationFragment();
    ModelFragment modelFragment = new ModelFragment();
    SettingFragment settingFragment = new SettingFragment();
    fragmentList.add(operationFragment);
    fragmentList.add(modelFragment);
    fragmentList.add(settingFragment);
}

这样其实一个基本的底部导航栏就完成了，比较值得注意的点就是，要理解一个概念就是BottomNavigation其实就是一个底部导航的控制，并不是说一定要跟Fragment有关系，你也可以用三个View,来回的切换，BottomNavigation只提供底部导航样式的控制和每个Item点击的回调。至于每次点击所要做的动作是应该我们自己去写的。
这里我的操作是默认replace一个Fragment 然后在点击的动作中判断对应的Fragment状态来决定是show还是add,在unselected动作中隐藏对应的fragment。目的就是为了保存状态。到这里基本功能就ok了，下面的是参照github的demo说一些增强功能。

增强功能

1. 多种模式：

    @IntDef({MODE_DEFAULT, MODE_FIXED, MODE_SHIFTING, MODE_FIXED_NO_TITLE, MODE_SHIFTING_NO_TITLE})
    @Retention(RetentionPolicy.SOURCE)
    @interface Mode {
    }

2. 多种背景Style：

    @IntDef({BACKGROUND_STYLE_DEFAULT, BACKGROUND_STYLE_STATIC, BACKGROUND_STYLE_RIPPLE})
    @Retention(RetentionPolicy.SOURCE)
    @interface BackgroundStyle {
    }

3. 多种提示类型: 这个是用来设置底部item提示样式的。

 @IntDef({SHAPE_OVAL, SHAPE_RECTANGLE, SHAPE_HEART, SHAPE_STAR_3_VERTICES, SHAPE_STAR_4_VERTICES, SHAPE_STAR_5_VERTICES, SHAPE_STAR_6_VERTICES})
    @Retention(RetentionPolicy.SOURCE)
    @interface Shape {
    }

4.设置文字指示标：

     numberBadgeItem = new TextBadgeItem()
                .setBorderWidth(4)
                .setBackgroundColorResource(R.color.blue)
                .setText("" + lastSelectedPosition)
                .setHideOnSelect(autoHide.isChecked());

创建一个BadgeItem对象，目前有两个子类，TextBadgeItem和ShapeBadgeItem,参数就不多介绍了，使用的时候自己调试就行，然后通过setBageItem这个方法附加到指定的BottomNavivationItem上。

5. 设置图形指示标

 shapeBadgeItem = new ShapeBadgeItem()
                .setShape(shapeSpinner.getSelectedItemPosition())
                .setShapeColorResource(R.color.teal)
                .setGravity(Gravity.TOP | Gravity.END)
                .setHideOnSelect(autoHide.isChecked());

这样BottomNavigation的介绍就差不多了，总体上使用难度不大，重点在与自己维护切换动作。如果有更多的自定义的需求，可以将github上的代码fork到自己仓库，然后修改源码就可以。

附上github地址：
https://github.com/Ashok-Varma/BottomNavigation
编译过的APk地址：
https://fir.im/bfks