Android流行UI布局 BottomNavigationView+ViewPager+Fragment的使用

1.概述

Android端采用底部导航栏的app非常多，一般我们都采用RadioGroup，RadiaButton来进行界面的切换。今天我们要讲的是一个新的控件BottomNavigationView,用于替换RadioGroup。这个控件位于support-design包下，是google25以上推出的新的一个控件。现在我们用BottomNavigationView+ViewPager+Fragment实现常用的导航功能。

最终实现效果：

2.实现过程

demo中写了两种切换的形式，一种是使用viewPager左右滑动切换fragment，一种是通过fragment的事务切换，直接就hide，show，就可以了，相信大家都会的。现在着重介绍viewPager+fragment配合BottomNavigationView这种形式。

首先要在工程中引入design包

compile 'com.android.support:design:26.0.0-alpha1'

一定要是25以上才起作用。

下面看一下布局：

itemIconHint属性可以修改图标的颜色用一个selector区别选中与非选中的颜色

itemTextColor属性可以修改文字的颜色，同理，用selector区别选中与非选中的颜色

memu属性需要我们新建一个menu文件：

BottomNavgationView控件中所有的按钮都需要通过这个menu文件来生成。

bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.item_news:
                        viewPager.setCurrentItem(0);
                        break;
                    case R.id.item_lib:
                        viewPager.setCurrentItem(1);
                        break;
                    case R.id.item_find:
                        viewPager.setCurrentItem(2);
                        break;
                    case R.id.item_more:
                        viewPager.setCurrentItem(3);
                        break;
                }
                return false;
            }
        });

通过设置监听来控制viewpager滑动到第几页。

重点来了：

官方的BottomNavigationView默认有个放大的ShiftingMode效果，但是尚未支持代码层级的切换。在3个menu item及以下时默认关闭，而到了4个及以上时就懵逼了，因为我们是要做ViewPager的侧滑啊！

滑动时，ViewPager是切换过去了，下面这item也切换过去了，但是你说说这效果是不是坑爹！！？

没办法了，查了一圈资料，发现官方这个控件还不支持代码层级的切换选项（如果你发现了，请告诉我）。迫不得已，只能看源码，开启上帝（反射）模式了！

在实例化BottomNavigationView后调用一行代码即可：BottomNavigationViewHelper.disableShiftMode(bottomNavifationView);

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                bottomNavigationView.getMenu().getItem(position).setChecked(true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

同样，我们监听viewPager的页面切换监听，去修改BottomNavigationView的选中状态，至此大功告成

源码地址：https://gitee.com/fireqiang/BottomNavigationView.git