第二种TabLayout+ViewPage建立关联

XML布局：

 <android.support.design.widget.TabLayout
        android:id="@+id/aftserop_tab"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabIndicatorColor="@android:color/holo_orange_light"
        app:tabIndicatorHeight="2dp"
        app:tabSelectedTextColor="@android:color/holo_blue_light"
        app:tabTextAppearance="@style/TabTextSize"
        app:tabTextColor="@android:color/black" />

app:tabIndicatorColor：标签下面移动的横线的颜色。
app:tabIndicatorHeight="0dp"    标签下面移动的横线的高度，如果不想要将它设置为0
app:tabTextColor：标签文字的颜色
app:tabSelectedTextColor ：标签被选中后的文字颜色

app:tabTextAppearance="@style/TabTextSize"  字体大小

默认的Tab字体大小有点小，看起来不太舒服，当我们去修改字体大小时却发现，TabLayout居然没有提供跟TextSize相关的属性。
不过不用急，TabLayout其实提供了一个更灵活的属性app:tabTextAppearance ，它可以修改字体的样式，从而间接修改字体的大小。

我们在style.xml中自定义一个样式，继承于TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse ，
在属性android:textSize中设置我们想要的字体大小，这里我设为20sp。

<!--TabLayout的字体大小-->
<style name="TabTextSize" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
    <item name="android:textSize">20sp</item>
</style>

一种只是普通添加tabLayout的文字：

//        tabLayout.addTab(tabLayout.newTab().setText("未审批"));
//        tabLayout.addTab(tabLayout.newTab().setText("已审批"));

第二种TabLayout+ViewPage建立关联

public class AftSerOpActivity extends BaseActivity implements View.OnClickListener {
    private TabLayout tabLayout;
    private ViewPager vp;
    private List<Fragment> fragments = new ArrayList<>();
    private String[] tabs = {"未审批", "已审批"};
    public static String approval = "approval";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_aft_ser_op);
        baseapp.addActivity(this);
        initView();
        initTab();
    }

    private void initTab() {
        tabLayout.setTabMode(TabLayout.MODE_FIXED);


TabLayout.MODE_FIXED ：当Tab较少，且占满整个屏幕时可以使用这种模式；
TabLayout.MODE_SCROLLABLE ：当Tab数量较多，屏幕宽度不够时使用该模式，整个TabLayout是可以左右滑动的。
        /*如果tabLayout和viewpager绑定的,以下这种方式无法显示title.
        这个原因是因为tablayout与viewpager建立关联关系的时候，已经把tab全部remove了
        要在FragmentPagerAdapter中的getPageTitle设置*/
//        tabLayout.addTab(tabLayout.newTab().setText("未审批"));
//        tabLayout.addTab(tabLayout.newTab().setText("已审批"));
        fragments.add(new AftSerOpFragment(false));
        fragments.add(new AftSerOpFragment(true));

        vp.setAdapter(new TabAdapter(getSupportFragmentManager()));

        Bundle extras = getIntent().getExtras();
        if (extras != null) {
            vp.setCurrentItem(extras.getInt(approval));
        }

        tabLayout.setupWithViewPager(vp);
    }

    private void initView() {
        findViewById(R.id.aftserop).setOnClickListener(this);
        findViewById(R.id.aftserop_add).setOnClickListener(this);
        tabLayout = (TabLayout) findViewById(R.id.aftserop_tab);
        vp = (ViewPager) findViewById(R.id.aftserop_vp);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.aftserop:
                baseapp.finishActivity();
                break;
            case R.id.aftserop_add:
                SmallUtil.getActivity(AftSerOpActivity.this, OpNew.class);
                break;
        }
    }


    /*TabLayout改变状态的监听器*/
    TabLayout.OnTabSelectedListener tabSelect = new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            vp.setCurrentItem(tab.getPosition());
            Logs.v("滑动选择：" + tab.getPosition());
        }

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

        }

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

        }

    };


    /* Fragment适配器*/
    class TabAdapter extends FragmentPagerAdapter {

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

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

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

        //显示标签上的文字
        @Override
        public CharSequence getPageTitle(int position) {
            return tabs[position];
        }
    }


}

效果图