08.BottomNavigationView+ViewPage

参考:https://www.jianshu.com/p/0ba25cc65889

step1. create a project,导入依赖：

compile'com.android.support:design:26.1.0'  
compile'com.android.support:support-v4:26.1.0'

step2. 在res下新建menu文件夹，新建一个menu菜单下的navigation.xml文件：

  <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/first"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/first" />
    <item
        android:id="@+id/two"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/two" />
    <item
        android:id="@+id/third"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/third" />
    <item
        android:id="@+id/four"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/four" />
    <item
        android:id="@+id/five"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/five" />

</menu>

step3. 主布局文件activity_main.xml:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.ywt.yimiao.MainActivity">

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/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>

step4.创建5个Fragment与其对应的Activity,此处略过...
step5.添加适配器：

public class ViewPagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> list;
    

    public ViewPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        list=fragments;
    }

    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }

    @Override
    public int getCount() {
        return list.size();
    }
}

step6.完整的activity文件:

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private BottomNavigationView navigation;

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

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.first:
                    viewPager.setCurrentItem(0);
                    return true;
                case R.id.two:
                    viewPager.setCurrentItem(1);
                    return true;
                case R.id.third:
                    viewPager.setCurrentItem(2);
                    return true;
                case R.id.four:
                    viewPager.setCurrentItem(3);
                    return true;
                case R.id.five:
                    viewPager.setCurrentItem(4);
                    return true;
            }
            return false;
        }
    };

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

        navigation = (BottomNavigationView) findViewById(R.id.navigation);
        viewPager = (ViewPager)findViewById(R.id.viewPager);

        //默认 >3 的选中效果会影响ViewPager的滑动切换时的效果，故利用反射去掉
        BottomNavigationViewHelper.disableShiftMode(navigation);
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);


        // 为ViewPager添加页面改变事件
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                // 将当前的页面对应的底部标签设为选中状态
                navigation.getMenu().getItem(position).setChecked(true);
            }
            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        setupViewPager(viewPager);
    }

    private void setupViewPager(ViewPager viewPager){
        //构造适配器
        List<Fragment> fragments=new ArrayList<Fragment>();
        fragments.add(new firstFragment());
        fragments.add(new twoFragment());
        fragments.add(new thirdFragment());
        fragments.add(new fourFragment());
        fragments.add(new fiveFragment());
        //设定适配器
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager(),fragments);
        viewPager.setAdapter(adapter);
    }
}

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

// 利用反射，改变 item 中 mShiftingMode 的值
public class BottomNavigationViewHelper {

    public static void disableShiftMode(BottomNavigationView navigationView) {

        BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigationView.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);

            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(i);
                itemView.setShiftingMode(false);
                itemView.setChecked(itemView.getItemData().isChecked());
            }

        } catch (NoSuchFieldException | IllegalAccessException e) {
            e.printStackTrace();
        }
    }
}