一、在Android的开发当中Tablayout和Viewpager的混合使用是很多的，

效果图

462363917730815980.jpg

二、使用步骤

1、导入依赖

compile 'com.android.support:design:25.1.0'

2、布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
    android:orientation="vertical">

    <!--Tab页-->
    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/red"
        app:tabSelectedTextColor="@color/red"
        app:tabTextColor="@color/black" />

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

</LinearLayout>

3、代码中

/**
 * 商品管理
 */
public class ProductManageActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener, TabLayout.OnTabSelectedListener {
    @BindView(R.id.tabLayout)
    TabLayout tabLayout;
    @BindView(R.id.main_vp)
    ViewPager mViewPager;

    private Context mContext;
    private MainAdapter mainAdapter; //适配器
    private List<Fragment> mFragmentList;
    private List<String> mTitleList; //Tab的标题

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_product_manage);
        ButterKnife.bind(this);

        mContext = this;
        initData();
        initTabLayout();
        initViewPager();
    }

    private void initViewPager() {
        mainAdapter = new MainAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(mainAdapter);//给ViewPager设置适配器
        mViewPager.setAdapter(mainAdapter);
        tabLayout.setupWithViewPager(mViewPager);
        mViewPager.setOnPageChangeListener(this);
    }

    //初始化ViewPager的数据源
    private void initData() {
        mFragmentList = new ArrayList<>();
        mFragmentList.add(new HasOnLineFragment());
        mFragmentList.add(new WaitOnlineFragment());
        mFragmentList.add(new OffLineFragment());
    }

    private void initTabLayout() {
        mTitleList = new ArrayList<>();
        //添加页卡标题
        mTitleList.add(getString(R.string.has_online));
        mTitleList.add(getString(R.string.wait_online));
        mTitleList.add(getString(R.string.off_line));
        tabLayout.addOnTabSelectedListener(this);
    }


   
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        //ViewPager滑动
        switch (position) {
            case 0:
                break;
            case 1:

                break;
            case 2:

                break;
            default:
                break;
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    //TabLayout的Item被选中
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        int position = tab.getPosition();
        mViewPager.setCurrentItem(position); //设置当前fragment
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }

    //适配器
    public class MainAdapter extends FragmentPagerAdapter {

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

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

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

      //获取标题
        @Override
        public CharSequence getPageTitle(int position) {
            return mTitleList.get(position);
        }
    }
}