BottomNavigationView+ViewPager+Fragment仿微信底部导航栏

目标：

要实现的界面如下：

此时，我们需要采用BottomNavigationView+ViewPager+Fragment，一点点的说起。首先要在app/build.gradle里添加：

implementation 'com.google.android.material:material:1.1.0'

底部导航栏

因为现在基本上都要往androidx版本转了。然后，在main.xml里面添加如下：

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/tab_menu"
        app:itemBackground="@color/dividerColor"
        app:labelVisibilityMode="labeled"
        />

app:menu会把新建的menu菜单item自动装入此navigation。tab_menu菜单如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/tab_chat"
        android:icon="@mipmap/tab_chat_normal"
        android:title="@string/tab_chat" />

    <item
        android:id="@+id/tab_contacts"
        android:icon="@mipmap/tab_contacts_normal"
        android:title="@string/tab_contact" />

    <item
        android:id="@+id/tab_find"
        android:icon="@mipmap/tab_chat_normal"
        android:title="@string/tab_find" />

    <item
        android:id="@+id/tab_me"
        android:icon="@mipmap/tab_me_normal"
        android:title="@string/tab_me" />
</menu>

至于背景颜色、图片icon、string字符串，自己添加就行了。这里需要注意，有时候，BottomNavigationView里面添加的item大于3个，会出现“未铺满”的假象，实际上就是加载多了，需要在xml里面加入（具体的mode选项请自行百度，这里只提供思路）：

app:labelVisibilityMode="labeled"

中间页面：

直接看xml结构还清晰点。

那么viewPager容器放好了，还要新建四个对应的fragment放里面，这样才能根据导航栏切换。

public class ChatFragment 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_chat, container, false);
    }
}

起演示效果，这里每个fragment只加载xml文件：

<LinearLayout
    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=".fragment.ChatFragment">

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

</LinearLayout>

每个xml文件也只有一个textView显示内容作为区别。

此时，需要新建一个adpter适配器，这种情况在Android开发里很多，适配器模式目的就是为了把一个目标适配成另外一个目标。

public class MainFragmentAdapter extends FragmentPagerAdapter {

    private List<Fragment> mFragmentList;

    public MainFragmentAdapter(@NonNull FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.mFragmentList = fragments;
    }

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

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

这里，SDK同样为我们准备了两个adpter，fragmentPagerAdapter和FragmentPagerStateAdapter，这两个的区别就是：pageStateAdapter每次滑动过后会将前一个或者后一个fragment销毁，即destroyView和OnDetach等得到执行，目的就是为了释放资源。因此，当加入viewpager的fragment过多时，考虑用后一种adpter，当然，一般不会有人超过四个。

回到MainActivity里面：

 private void  initMainData(){
        mMainFragmentList = new ArrayList<>(4);
        mMainFragmentList.add(new ChatFragment());
        mMainFragmentList.add(new ContactFragment());
        mMainFragmentList.add(new FindFragment());
        mMainFragmentList.add(new MeFragment());

        //viewpager初始化
        MainFragmentAdapter mainFragmentAdapter = new MainFragmentAdapter(getSupportFragmentManager(), mMainFragmentList);
        mViewPager.setAdapter(mainFragmentAdapter);

        //viewpager滑动点击等监听
        mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                int menuId = item.getItemId();
                // 跳转指定页面：Fragment
                switch (menuId) {
                    case R.id.tab_chat:
                        mViewPager.setCurrentItem(0);
                        break;
                    case R.id.tab_contacts:
                        mViewPager.setCurrentItem(1);
                        break;
                    case R.id.tab_find:
                        mViewPager.setCurrentItem(2);
                        break;
                    case R.id.tab_me:
                        mViewPager.setCurrentItem(3);
                        break;
                }

                return false;
            }
        });

        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //滑动到某页面让底部导航栏为选中状态
                mBottomNavigationView.getMenu().getItem(position).setChecked(true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

首先新建一个ArrayList把要滑动的fragment装进去，再适配，添加listerner。即可。放一个完整的图：

---

此专栏上一篇文章：Material Design之ActionBar、ToolBar

github代码：我的github