ViewPager+BottomNavigationView+Fragment实现底部导航栏(Android)

底部导航栏的效果在很多app中都很常见，比如qq就是底部导航栏+侧滑菜单，比较经典的还有微博、知乎、支付宝等，都是使用了底部导航栏来进行页面的分区，适用于存放功能模块比较独立，关联度不大的页面，看起来也比较美观。

主要流程

1.新建原生BottomNavigationView样式的MainActivity

首先创建一个项目，选择底部菜单

然后as会帮你自动生成底部菜单代码，在activity_main.xml中会自动添加一个BottomNavigationView

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/navigation" />

主页自动生成的布局是ConstraintLayout，约束布局，也叫增强型的相对布局，这是官方比较推荐的布局，因为可以减少布局的嵌套。parent是指当前的父布局，layout_constraint方向A_to方向BOf="C布局"属性表示当前布局的方向A和C布局的方向B相邻，如app:layout_constraintBottom_toBottomOf="parent"表示组件的下部和父布局的下部分被约束在一起。在res文件夹下有自动生成的menu文件夹，里面有底部菜单的menu，navigation。如果要修改或者添加菜单的选项值就是在这里修改代码，比如我修改了另外三个选项，并且添加了一个选项

<?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="@mipmap/ic_home_black_50"
        android:title="首页" />
    <item
        android:id="@+id/navigation_sport"
        android:icon="@mipmap/ic_sport_black_50"
        android:title="运动" />
    <item
        android:id="@+id/navigation_diet"
        android:icon="@mipmap/ic_diet_black_50"
        android:title="饮食" />
    <item
        android:id="@+id/navigation_user"
        android:icon="@mipmap/ic_user_black_50"
        android:title="我" />
</menu>

我们可以看到现在一共有四个子项item，id是子项的身份标识，icon表示子项的图标，title表示这个子项底部显示的文本。主活动MainActivity中会对菜单选项的选择生成监听事件

private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
        = new BottomNavigationView.OnNavigationItemSelectedListener() {

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.navigation_home:
                mTextMessage.setText("home");
                return true;
            case R.id.navigation_sport:
                mTextMessage.setText("sport");
                return true;
            case R.id.navigation_diet:
                mTextMessage.setText("diet");
                return true;
            case R.id.navigation_user:
                mTextMessage.setText("user");
                return true;
        }
        return false;
    }
};

表示切换选择到不同选项时主页的mTextMessage显示对应的选项信息提示，到这里BottomNavigationView的主要代码就看完了，接下来新建四个Fragment(你有几个选项就建几个fragment，每一个fragment对应一个菜单选项的所显示的页面)。

2.使用ViewPager来实现主页显示滑动与底部菜单选项联合

首先在主页的layout中添加一个ViewPager，

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    //这里添加ViewPager，作为选项卡上面主页的显示
    <android.support.v4.view.ViewPager
        android:id="@+id/mViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/navigation"
        app:layout_constraintTop_toTopOf="parent">
    </android.support.v4.view.ViewPager>
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation" />

</android.support.constraint.ConstraintLayout>

然后新建四个fragment和对应的布局，


每一个fragment继承自Fragment，然后重写onCreate方法和onCreateView方法，Fragment中onCreate类似于Activity.onCreate，在其中可初始化除了view之外的一切，而组件view的初始化等主要在onCreateView中完成，是创建该fragment对应的视图，且其中需要创建自己的视图并返回给调用者。例如HomeFragment对应的class代码如下

package s.wd.myapplication.fragments;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import s.wd.myapplication.R;

public class HomeFragment extends Fragment {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_home, container, false);
    }
}

对应的layout如下

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragments.HomeFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/hello_blank_fragment" />

</FrameLayout>

其他选项的布局也类似，可以参考这一篇在fragment的生命周期中进行一些优化
添加链接描述
准备好了四个fragment之后在MainActivity中对各组件实例化，再将四个Fragment装入我们的PagerAdapter适配器，修改BottomNavigationView的监听事件，使ViewPager显示切换的对应fragment页面

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_sport:
                mViewPager.setCurrentItem(1);
                return true;
            case R.id.navigation_diet:
                mViewPager.setCurrentItem(2);
                return true;
            case R.id.navigation_user:
                mViewPager.setCurrentItem(3);
                return true;
        }
        return false;
    }
};
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mViewPager=(ViewPager) findViewById(R.id.mViewPager);//获取到ViewPager
    final BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.navigation);
    bottomNavigationView.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);

    //ViewPager的监听
    mViewPager.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);
            //写滑动页面后做的事，使每一个fragmen与一个page相对应

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });
    //Fragment列表，将fragment放入列表中，放入mPagerAdapter
    final ArrayList<Fragment> fgLists=new ArrayList<>(4);
    fgLists.add(new HomeFragment());
    fgLists.add(new SportFragment());
    fgLists.add(new DietFragment());
    fgLists.add(new UserFragment());
    FragmentPagerAdapter mPagerAdapter=new FragmentPagerAdapter(getSupportFragmentManager()) {
        @Override
        public Fragment getItem(int position) {
            return fgLists.get(position);
        }

        @Override
        public int getCount() {
            return fgLists.size();
        }
    };
    mViewPager.setAdapter(mPagerAdapter)；
    mViewPager.setOffscreenPageLimit(3);
}

viewpager会默认预加载下一页界面的，setOffscreenPageLimit()方法是用来设置预加载页面数量，默认值为1，在你显示了一页的时候滑动，会预先加载下一个，这样的话在你移动前就已经加载了下一个界面，移动的时候就可以看到已经加载的界面了。
到这里就实现了一个简单的底部导航栏啦，既可以滑动又可以点击选项来切换页面，效果比较粗糙，大致如下