ViewPager与TabLayout的巧妙结合

前言：ViewPager作为一个容器，它所显示的内容由它的Adapter所提供，因此我们在使用ViewPager的时候必须为其设置一个Adapter。ViewPager有独有的PagerAdapter，这里我们使用它的其中一个子类FragmentPagerAdapter，因为这里需要管理三个Fragment。而ViewPager与TabLayout的结合，只需要在Activity中用两行代码即可搞定，非常的简单。

效果图

我们先来看一下效果图，看看ViewPager与TabLayout的结合能发挥出多大的功能。

前期准备工作

由于TabLayout和TabLayout内部组件TabItem在material包中，需要添加material包的依赖才能使用。打开项目app下的build.gradle，在闭包dependencies中添加下面一行代码

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

ok，前期工作非常简单，我们来看看布局吧。

布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorWhite">

        <com.google.android.material.tabs.TabItem
            android:id="@+id/item_active"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="校园新闻" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/item_news"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="校园资源" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/item_resouece"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="活跃达人" />
    </com.google.android.material.tabs.TabLayout>


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></androidx.viewpager.widget.ViewPager>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

我们使用约束布局。首先添加TabLayout，宽度选择适应父布局，高度选择自适应。然后想要滑动切换视图，必须在TabLayout中加入TabItem组件，有多少个页面进行切换，就加入多少个TabItem，我这里有三个。最后加入ViewPager，让他充满整个布局，布局非常容易。

Activity代码

public class CommunityFragment extends Fragment {

    DemoCollectionPagerAdapter demoCollectionPagerAdapter;
    ActiveFragment activeFragment = new ActiveFragment();
    NewsFragment newsFragment = new NewsFragment();
    ResourceFragment resourceFragment = new ResourceFragment();


    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.activity_community, container, false);
        return rootView;
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        demoCollectionPagerAdapter = new DemoCollectionPagerAdapter(getChildFragmentManager());
        ViewPager viewPager = view.findViewById(R.id.pager);
        TabLayout tabLayout = view.findViewById(R.id.tab_layout);
        if (viewPager == null) {
            return;
        } else {
            viewPager.setAdapter(demoCollectionPagerAdapter);
            viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
            tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));
        }
    }

    public class DemoCollectionPagerAdapter extends FragmentPagerAdapter {

        public DemoCollectionPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int i) {
            if (i == 0) {
                return newsFragment;
            }
            if (i == 1) {
                return resourceFragment;
            }
            return activeFragment;
        }

        @Override
        public int getCount() {
            return 3;
        }
    }
}

Activity中我们大致可能分成两步走：

1. 为ViewPager 创建Adapter
2. ViewPager 与TabLayout的绑定

为ViewPager 创建Adapte

我们将上面代码进行拆分，把创建Adapte的代码提出来如下

public class DemoCollectionPagerAdapter extends FragmentPagerAdapter {

        public DemoCollectionPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int i) {
            if (i == 0) {
                return newsFragment;
            }
            if (i == 1) {
                return resourceFragment;
            }
            return activeFragment;
        }

        @Override
        public int getCount() {
            return 3;
        }
    }

其中**getItem()和getCount()**这两个方法必须重写。
getItem()方法就是页面切换的关键所在，它的返回值就是代表不同位置的Fragment组件。
getCount()方法决定这个Adapter包含有多少项，这里包含三个Fragment，所以返回3即可。

ViewPager 与TabLayout的绑定

demoCollectionPagerAdapter = new DemoCollectionPagerAdapter(getChildFragmentManager());
        ViewPager viewPager = view.findViewById(R.id.pager);
        TabLayout tabLayout = view.findViewById(R.id.tab_layout);
        if (viewPager == null) {
            return;
        } else {
            viewPager.setAdapter(demoCollectionPagerAdapter);
            viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
            tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));
        }

获取界面布局文件中ViewPager 和TabLayout 组件：

ViewPager viewPager = view.findViewById(R.id.pager);
TabLayout tabLayout = view.findViewById(R.id.tab_layout);

为ViewPager设置Adapter：

viewPager.setAdapter(demoCollectionPagerAdapter);

接下来就是最重要的，ViewPager与TabLayout的巧妙结合只需要下面这两行代码：

viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));

在ViewPager中使用addOnPageChangeListener方法绑定TabLayout。在TabLayout中使用addOnTabSelectedListener方法绑定ViewPager，这样即可完成ViewPager与TabLayout的结合。