BottomNavigationView+ViewPager实现底部导航栏

前言： 前面写过一篇FragmentTabHost+FrameLayout实现底部导航栏 公司原来一直这个套路来处理底部导航栏和显示页面的切换，真的很好用。但是自从发现BottomNavigationView这个控件之后，感觉BottomNavigationView+ViewPager实现底部导航栏这个模式更简单而且效果更酷。写个小demo展示一下，下面先看一下效果图：
—>

首先： 来看一下整体布局代码：
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.blueskygrid.test1.MainActivity">

    <com.blueskygrid.test1.widget.NoSlidingViewPaper
        android:id="@+id/vp_main_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </com.blueskygrid.test1.widget.NoSlidingViewPaper>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/navigation" />

</LinearLayout>

代码很简单，总体分为两部分，第一部分，NoSlidingViewPaper显示主体内容部分，继承Viewpager屏蔽了ViewPager左右滑动，代码很简单，代码如下：
NoSlidingViewPaper.java

public class NoSlidingViewPaper extends ViewPager {
    public NoSlidingViewPaper(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public NoSlidingViewPaper(Context context) {
        super(context);
    }
    /*
     * 表示把滑动事件传递给下一个view
     */
    @Override
    public boolean onInterceptTouchEvent(MotionEvent arg0) {
        return false;
    }
    /*
     * 可以啥都不做
     */
    public boolean onTouchEvent(MotionEvent arg0) {
        return false;
    }
}

第二部分，BottomNavigationView就是底部的导航栏了，除了app:menu=”@menu/navigation”这个属性设置以外，其他的大家都知道。这个属性就是给导航栏设置菜单项，这个和我们在标题栏上放设置菜单项的原理是一样的。在meau文件夹下（如果你的工程没有这个文件夹，就建一个）新建navigation.xml，在里面写要展示的菜单项，先看一下代码：
navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_me_normal"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_message"
        android:icon="@drawable/ic_message_normal"
        android:title="@string/title_message" />

    <item
        android:id="@+id/navigation_publish"
        android:icon="@drawable/ic_publish_normal"
        android:title="@string/title_publish" />
</menu>

可以看到，我建立了三个菜单项，id这个大家知道，是唯一标识，为了处理点击事件做准备，icon代表菜单项图标，title菜单项文字。注意：这里的icon用的是矢量图 ，不怎么了解矢量图的同学可以百度先了解一下，下片文章，我会写一下我用位图怎么转化为矢量图的。如果你需要我的矢量图，可以到文章最下面下载。

接下来， 我们先来看一下逻辑代码：

public class MainActivity extends AppCompatActivity {

    private NoSlidingViewPaper mViewPager;

    //底部菜单栏各个菜单项的点击事件处理
    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home://主页
                    mViewPager.setCurrentItem(0);
                    return true;
                case R.id.navigation_message://信息
                    mViewPager.setCurrentItem(1);
                    return true;
                case R.id.navigation_publish://发布
                    mViewPager.setCurrentItem(2);
                    return true;
            }
            return false;
        }

    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        /*初始化显示内容*/
        mViewPager = (NoSlidingViewPaper) findViewById(R.id.vp_main_container);
        final ArrayList<Fragment> fgLists = new ArrayList<>(3);
        fgLists.add(new HomeFragment());
        fgLists.add(new MessageFragment());
        fgLists.add(new PublishFragment());
        FragmentPagerAdapter mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return fgLists.get(position);
            }

            @Override
            public int getCount() {
                return fgLists.size();
            }
        };
        mViewPager.setAdapter(mAdapter);
        mViewPager.setOffscreenPageLimit(2); //预加载剩下两页

        BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
        /*给底部导航栏菜单项添加点击事件*/
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
    }
}

可以看出逻辑代码很少，很容易看懂，点击菜单跳转到相应的Fragement，至于菜单项选中和变色，我们都不用管，BottomNavigationView都已经帮我们处理好了，如果我们想修改菜单项选中的颜色，我们可以通过改变styles.xml文件中BaseTheme的colorPrimary的值。到这里其实已经可以实现前面图1的效果了。因为Viewpager有预加载下一页这个模式，我这里是设置预加载了两页。这三个页面都有网络请求，那进入app耗时长，体验效果很差。

所以，下面我们用懒加载来处理这个问题， 先来看一下代码：
BaseFragment.java

public abstract class BaseFragement extends Fragment {

    protected View mView;
    protected boolean isViewInitiated; //当前页面是否初始化
    protected boolean isVisibleToUser; //当前页面是否显示
    protected boolean isDataRequested; //是否已经请求了数据
    protected Context mContext;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        mContext = getContext();
        mView = inflater.inflate(getLayoutId(), null);
        isViewInitiated = true;
        initView();
        prepareGetData();
        return mView;
    }

    /*初始化页面布局和数据*/
    protected abstract void initView();
    /*布局*/
    public abstract int getLayoutId();
    /*服务器获取数据*/
    protected abstract void getDataFromServer();

    /**
     * 当前页面是否展示
     * @param isVisibleToUser 显示为true， 不显示为false
     */
    @Override
    public void setUserVisibleHint(boolean isVisibleToUser) {
        super.setUserVisibleHint(isVisibleToUser);
        this.isVisibleToUser = isVisibleToUser;
        prepareGetData();
    }

    /**
     * 如果只想第一次进入该页面请求数据，return prepareGetData(false)
     * 如果想每次进入该页面就请求数据，return prepareGetData(true)
     * @return
     */
    private boolean prepareGetData(){
        return prepareGetData(false);
    }

    /**
     * 判断是否从服务器器获取数据
     * @param isforceUpdate 强制更新的标记
     * @return
     */
    protected boolean prepareGetData(boolean isforceUpdate) {
        if(isVisibleToUser && isViewInitiated && (!isDataRequested || isforceUpdate)){
            /*从服务器获取数据*/
            getDataFromServer();
            isDataRequested = true;
            return true;
        }
        return false;
    }
}

HomeFragment.java

public class HomeFragment extends BaseFragement{

    @Override
    protected void initView() {

    }
    @Override
    public int getLayoutId() {
        return R.layout.fragment_home;
    }
    @Override
    protected void getDataFromServer() {
        Toast.makeText(mContext, "HomeFragment页面请求数据了", Toast.LENGTH_SHORT).show();
    }
}

主要逻辑看BaseFragment，可以结合我的注释看，主要有一个不常用的方法setUserVisibleHint(boolean isVisibleToUser) 这个方法可以处理判断某个页面是否显示。
文章到这里已经结束了，有不对的地方，欢迎指正^_^，另一篇文章链接：BottomNavigationView3个菜单项以上时去除动画效果

demo下载地址