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