【安卓小笔记】BottomNavigationView和ViewPager的使用

BottomNavigationView 很早之前就在 Material Design 中出现了，但是直到 Android Support Library 25 中才增加了 BottomNavigationView 控件。
BottomNavigationView和ViewPager一起使用是很常见的。所以简单的一起学习一下。

1.在 build.gradle 文件中增加依赖：

 compile 'com.github.ittianyu:BottomNavigationViewEx:1.2.2'

2.xml文件引用：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
        android:id="@+id/bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/windowBackground"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_menu">

    </com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/bottom_bar">

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


</RelativeLayout>

menu文件里放内容：

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

    <item
        android:orderInCategory="0"
        android:title="首页"
        android:icon="@drawable/mainpage"/>
    <item
        android:orderInCategory="1"
        android:title="消息"
        android:icon="@drawable/message"/>
    <item
        android:orderInCategory="2"
        android:title="通讯录"
        android:icon="@drawable/contact"/>
    <item
        android:orderInCategory="3"
        android:title="我的"
        android:icon="@drawable/my"/>

</menu>

当然还需要对应页面的viewpager：

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

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="viewpager"
        android:gravity="center"
        android:textSize="20sp"
        android:textColor="@color/black"/>

</LinearLayout>

这样页面就搭建完成，接下来就需要在代码中整合起来。

3.Java代码实现

首先是Activity：

public class BottomNavigationViewActivity extends BaseActivity {
    @BindView(R.id.viewpager)
    ViewPager viewPager;
    @BindView(R.id.bottom_bar)
    BottomNavigationViewEx bottomNavigationView;

    private ViewpagerFragment mainpageFragment;
    private ViewpagerFragment messageFragment;
    private ViewpagerFragment contactFragment;
    private ViewpagerFragment myFragment;

    @Override
    public int getLayoutId() {
        return R.layout.activity_bottom_navigation_view;
    }

    @Override
    public void initView() {
        ButterKnife.bind(this);
        //设置文字大小
        bottomNavigationView.setTextSize(14);
        //禁用所有动画
        bottomNavigationView.enableShiftingMode(false);
        bottomNavigationView.enableItemShiftingMode(false);
        bottomNavigationView.enableAnimation(false);
        //监听器
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                viewPager.setCurrentItem(item.getOrder(),false);
                return true;
            }
        });

        //添加对应的viewpager页面，这里同一用了一个
        mainpageFragment = new ViewpagerFragment();
        messageFragment = new ViewpagerFragment();
        contactFragment = new ViewpagerFragment();
        myFragment = new ViewpagerFragment();
        List<Fragment> list = new ArrayList<>();
        list.add(mainpageFragment);
        list.add(messageFragment);
        list.add(contactFragment);
        list.add(myFragment);

        viewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(),list));
        viewPager.setCurrentItem(0);
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
            //viewpager滑动切换，底栏对应切换
                bottomNavigationView.getMenu().getItem(position).setChecked(true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        viewPager.setOffscreenPageLimit(4);
    }

    @Override
    public void initData() {

    }

}

省略了viewpager的fragment和adapter；需要根据具体需求添加。

4.具体实现后参考图：