TabLayout + ViewPager使用

xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_coupons"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.tech.milin.milinsocial.ui.CouponsActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        app:layout_collapseMode="pin"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/color_fff28149"
        app:tabSelectedTextColor="@color/color_fff28149"
        app:tabTextColor="@color/black" />

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

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

</LinearLayout>

　　

activity使用：

public class CouponsActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    @Bind(R.id.tabLayout)
    TabLayout mTabLayout;

    @Bind(R.id.couponsContentPager)
    ViewPager mCouponsContentPager;

    String [] tabTexts = {"未使用","已使用","已过期"};

    private List<Fragment> mFragmentList = new ArrayList<Fragment>();
    /**
     * tab的文字View.
     */
    private List<TextView> tabTextViewList;
    /**
     * tab的文字下划线
     */
    private List<TextView> tabTextBottomList;

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

        initView();
    }

    private void initView(){
        mFragmentList = new ArrayList<>();
        mFragmentList.add(new NotUseCouponsFragment());
        mFragmentList.add(new NotUseCouponsFragment());
        mFragmentList.add(new NotUseCouponsFragment());
        tabTextViewList = new ArrayList<>();
        tabTextBottomList = new ArrayList<>();

        ButterKnife.bind(this);

        mTabLayout.setTabMode(TabLayout.MODE_FIXED);//Mode有MODE_SCROLLABLE和MODE_FIXED   MODE_SCROLLABLE tab标签可以滑动，应用于很多标签时，显示不出的情况   MODE_FIXED是默认的MODE，它就像Weight一样，平分屏幕的长度。
        mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);//TabGravity只有在FIXED的MODE下才会生效。
        mTabLayout.setSelectedTabIndicatorHeight(0);//隐藏tab下面的线条

        //缓存数量
        mCouponsContentPager.setOffscreenPageLimit(1);
        mCouponsContentPager.addOnPageChangeListener(this);

        AbFragmentPagerAdapter fragmentPagerAdapter = new AbFragmentPagerAdapter(getSupportFragmentManager(), tabTexts, mFragmentList);
        //viewpager加载adapter
        mCouponsContentPager.setAdapter(fragmentPagerAdapter);

        //TabLayout加载viewpager
        mTabLayout.setupWithViewPager(mCouponsContentPager);

        //为TabLayout添加tab名称
        for (int i = 0; i < tabTexts.length; i++) {
            TabLayout.Tab tab = mTabLayout.getTabAt(i);
            tab.setCustomView(getTabView(i));
        }
    }

    /**
     * 添加getTabView的方法，来进行自定义Tab的布局View
     *
     * @param position
     * @return
     */
    public View getTabView(int position) {
        View view = View.inflate(this, R.layout.item_custom_tabhost, null);//item_custom_tabhost自定义view的布局
        TextView tabText = (TextView) view.findViewById(R.id.tabText);
        TextView tabTextBottom = (TextView) view.findViewById(R.id.tabTextBottom);
        tabText.setText(tabTexts[position]);
        tabText.setTextSize(12);
        this.tabTextViewList.add(tabText);
        this.tabTextBottomList.add(tabTextBottom);

        //默认显示
        if (position == 0) {
            tabTextBottom.setBackgroundColor(getResources().getColor(R.color.color_fff28149));
            tabTextBottom.setVisibility(View.VISIBLE);
        } else {
            tabTextBottom.setVisibility(View.INVISIBLE);
        }

        if (position == 0) {
            tabText.setTextColor(getResources().getColor(R.color.color_fff28149));
        } else {
            tabText.setTextColor(getResources().getColor(R.color.black));
        }
        return view;
    }

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

    }

    @Override
    public void onPageSelected(int position) {
        if (tabTextViewList == null) {
            return;
        }
        for (int i = 0; i < tabTextViewList.size(); i++) {
            TextView textView = tabTextViewList.get(i);
            TextView tabTextBottom = tabTextBottomList.get(i);
　　　　　　　//滑动viewpage然后设置tab颜色等。
            if (position == i) {
                textView.setTextColor(getResources().getColor(R.color.color_fff28149));
                tabTextBottom.setVisibility(View.VISIBLE);
                tabTextBottom.setTextColor(getResources().getColor(R.color.color_fff28149));
            } else {
                textView.setTextColor(getResources().getColor(R.color.black));
                tabTextBottom.setVisibility(View.INVISIBLE);
            }
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}