玩转ViewPager系列（二）ViewPager+Tablayout+Fragment

今天我们来实现常见的布局样式，ViewPager+Tablayout+Fragment组合。有了上一篇的基础，这一篇就不难理解。实质上就是tablayout绑定viewpager,从而实现了与联动。我们来具体看看如何实现

新建三个fragment

布局文件，一个tablayout(注意不是tablelayout)，一个viewpager。没有tablayout的需要先引入依赖implementation 'com.android.support:design:28.0.0’

<LinearLayout 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=".MainActivity"
    android:orientation="vertical">


    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        app:tabIndicatorHeight="0dp"
        app:tabTextColor="@android:color/black"
        app:tabSelectedTextColor="@android:color/holo_blue_bright"/>

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



</LinearLayout>

创建tab有2种使用方式，一个是在xml里创建tab，一个是代码创建tab。我选择了后者。
app:tabIndicatorHeight="0dp"不需要下划线
app:tabTextColor="@android:color/black"设置未选中时的字体颜色
app:tabSelectedTextColor="@android:color/holo_blue_bright"/>选中时的字体颜色
tablayout还有其他的一些属性，可以去其他文章了解，这里不是重点

MainActivity代码

/**
 * created by desong 2020 0207
 */

public class MainActivity extends AppCompatActivity {

    TabLayout tabLayout;
    ViewPager viewPager;

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

        viewPager = findViewById(R.id.viewpager);
        tabLayout = findViewById(R.id.tablayout);

        List<Fragment>fms = new ArrayList<>();
        fms.add(new Fragment1());
        fms.add(new Fragment2());
        fms.add(new Fragment3());

        viewPager.setAdapter(new ViewPageradapter(getSupportFragmentManager(),fms));
        tabLayout.setupWithViewPager(viewPager);

        /**
         * 注意（1）要在setupWithViewPager()后面设置tab
         *     (2)不要新建tab,tab是根据viewpager里的元素个数，在setupWithViewPager()里面创建好了的
         *    （3）如果非要"先"设置tab，那么就不要在它"后面"用setupWithViewPager()，而是自己去实现绑定
         */


        TabLayout.Tab tab1 = tabLayout.getTabAt(0);
        tab1.setText("a1");

        TabLayout.Tab tab2 = tabLayout.getTabAt(1);
        tab2.setText("a2");
        TabLayout.Tab tab3 = tabLayout.getTabAt(2);
        tab3.setText("a3");


    }
}

tabLayout.setupWithViewPager(viewPager)只需要这个方法，便可实现tablayout与viewpager的绑定，而不用自己实现它们的接口，因为所有的监听都在这个方法里写好了。

细心的朋友可能会发现，我在MainActivity里面注意的3点，这是使用中会出现的问题，我将在下一节来解释，你们只需要按照我这个写法就ok。

自定义adapter类

public class ViewPageradapter extends FragmentPagerAdapter {

    List<Fragment> fms = new ArrayList<>();

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

    public ViewPageradapter(FragmentManager fm, List<Fragment> datas) {
        super(fm);

        this.fms = datas;

    }

    @Override
    public Fragment getItem(int i) {
        return fms.get(i);
    }

    @Override
    public int getCount() {
        return fms.size();
    }
    /**
     * 置空来阻止被回收，提升流畅性
     * @param container
     * @param position
     * @param object
     */
    
    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        //super.destroyItem(container, position, object);
    }

}

这里继承的是FragmentPagerAdapter，也可以继承FragmentStatePagerAdapter。这样，一个简单的ViewPager+Tablayout+Fragment功能就实现了。下一篇我们将结合tablayout+viewpager的使用中出现的问题，深入源码来探究。