首先是布局文件
activity_main.xml

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

    <LinearLayout xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="#ffffff"
            android:orientation="vertical">
            <android.support.design.widget.TabLayout
                android:id="@+id/tab_gank"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                app:tabBackground="@drawable/ripple_tab_bg"
                app:tabIndicatorColor="#ffce3d3a"
                app:tabSelectedTextColor="#ffce3d3a"
                app:tabTextColor="#585858" />

        </LinearLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/vp_gank"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fff2f4f5">

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

    </LinearLayout>
</layout>

fragment.xml

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="afs"/>

</LinearLayout>

步骤1
重写FragmentAdapter

public class MyFragmentAdapter extends FragmentPagerAdapter {

    List<Fragment> list;
    List<String> title;

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

    public MyFragmentAdapter(FragmentManager fm, List<Fragment> list, List<String> title) {
        super(fm);
        this.list = list;
        this.title = title;
    }

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

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

/*让TabLayout能获取到title*/
    @Override
    public CharSequence getPageTitle(int position) {
        return title.get(position);
    }
}

步骤2
给viewpager设置adapter

        MyFragmentAdapter adapter = new MyFragmentAdapter(getSupportFragmentManager(), fragments, titleList);
        binding.vpGank.setAdapter(adapter);

步骤3
设置TabLayout

        binding.tabGank.setTabMode(TabLayout.MODE_FIXED);
        binding.tabGank.setupWithViewPager(binding.vpGank);//与viewpager联系起来

完整的MainActivity

public class MainActivity extends AppCompatActivity {


    public ActivityMainBinding binding;
    public List<Fragment> fragments;
    public List<String> titleList;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(MainActivity.this, R.layout.activity_main);
        initFragmentList();
        initViewPager();
    }

    public void initFragmentList() {
        fragments = new ArrayList<>();
        titleList = new ArrayList<>();
        fragments.add(new MyFragment1());
        fragments.add(new MyFragment1());
        fragments.add(new MyFragment1());
        titleList.add("1");
        titleList.add("2");
        titleList.add("3");
    }

    public void initViewPager() {
        MyFragmentAdapter adapter = new MyFragmentAdapter(getSupportFragmentManager(), fragments, titleList);
        binding.vpGank.setAdapter(adapter);
        //adapter.notifyDataSetChanged();
        binding.tabGank.setTabMode(TabLayout.MODE_FIXED);
        binding.tabGank.setupWithViewPager(binding.vpGank);
    }
}

完成啦！