Android TabLayout

• activity_main.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context="com.vincent.tablayout.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/CustomTabLayoutStyle"
        app:tabMode="fixed"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

• fragment_pager.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/tv"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:textSize="20sp"
    tools:text="fragment 1" />

• PagerFragment

public class PageFragment extends Fragment {

    private static final String ARG_PAGE =  "PagerFragment";
    private int mPage;

    public static PageFragment newInstance(int page) {
        Bundle args = new Bundle();
        args.putInt(ARG_PAGE, page);
        PageFragment pageFragment = new PageFragment();
        pageFragment.setArguments(args);
        return pageFragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(ARG_PAGE);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        View view =  inflater.inflate(R.layout.fragment_pager, container, false);
        TextView textview = (TextView) view;
        textview.setText("Fragment #" + mPage);
        return view;
    }
}

• MainActivity

public class MainActivity extends AppCompatActivity {

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

        TabLayout mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
        ViewPager mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mViewPager.setAdapter(new PagerAdapter(getSupportFragmentManager()));
        mTabLayout.setupWithViewPager(mViewPager);
    }

    private class PagerAdapter extends FragmentPagerAdapter {

        private static final int PAGE_COUNT = 3;
        private String[] tabTitles = {"tab1", "tab2", "tab3"};

        PagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return PageFragment.newInstance(position);
        }

        @Override
        public int getCount() {
            return PAGE_COUNT;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return tabTitles[position];
        }
    }
}

• 自定义TabLayout的样式

<style name="CustomTabLayoutStyle" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">#535353</item>
    <item name="tabMaxWidth">40dp</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <!-- tab背景 -->
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <!-- tab文本樣式（設置字體大小、顔色等） -->
    <item name="tabTextAppearance">@style/CustomTabTextAppearance</item>
    <!-- tab被選中時tab文本的顔色  -->
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>

<style name="CustomTabTextAppearance" parent="TextAppearance.Design.Tab">
   <item name="android:textSize">14sp</item>
   <item name="android:textColor">?android:textColorSecondary</item>
   <!-- 如果tab上需要設置圖標，textAllCaps設置為false -->
   <item name="textAllCaps">true</item>
</style>