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以上才起作用。

下面看一下布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.ren.bottomnavigationview.activity.Main2Activity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:overScrollMode="never"
        android:scrollbars="none">

    </android.support.v4.view.ViewPager>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemIconTint="@drawable/bottom_navigation_selector"
        app:itemTextColor="@drawable/bottom_navigation_selector"
        app:menu="@menu/menu_bottom_navigation"/>

</LinearLayout>

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

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

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

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/item_news"
        android:icon="@mipmap/ic_news_gray"
        android:title="新闻" />
    <item
        android:id="@+id/item_lib"
        android:icon="@mipmap/ic_library_gray"
        android:title="图书" />

    <item
        android:id="@+id/item_find"
        android:icon="@mipmap/ic_discovery_gray"
        android:title="发现" />

    <item
        android:id="@+id/item_more"
        android:icon="@mipmap/ic_more_gray"
        android:title="更多" />

</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