implementation 'com.android.support:design:26.1.0'

一、首先實現佈局檔案

<?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="match_parent"
    android:orientation="vertical">
 
    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@color/white_FFFFFF"
        app:tabIndicatorColor="@color/select_color_000000"
        app:tabIndicatorHeight="@dimen/indicator_height_2dp"
        app:tabMode="fixed"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabSelectedTextColor="@color/select_color_000000"
        app:tabTextColor="@color/color_999999">
 
    </android.support.design.widget.TabLayout>
 
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
    </android.support.v4.view.ViewPager>
 
</LinearLayout>
 

 tabBackground : 標籤欄的顏色

    tabIndicatorColor : 指示條的顏色

    tabIndicatorHeight : 指示條的高度

    tabMode  : 選項卡的行為模式  兩種模式。一種是 scrollable  適用於當標籤欄的數量多的時候，標籤欄可以滑動，經個人測試，一般是標籤欄5個以上適用於這個模式  第二種是 fixed 預設的設定，標籤欄是固定的，不能滑動，很多的時候會發生擠壓，當標籤欄的個數小於等於5個的時候選擇這個模式就很不錯。

    tabSelectedTextColor : tab 被選中的時候的字型顏色

    tabTextColor : tab 未被選中的時候的字型的顏色

    tabTextAppearance :  設定字型的外觀。 比如說設定字型的大小 

<style name="TabLayoutTextStyle">
        <item name="android:textSize">@dimen/text_16_sp</item>
        <item name="android:textAllCaps">false</item>
    </style>

二、下面開始通過程式碼實現

    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private List<String> titles = new ArrayList<String>();
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tablayout);
        intData();
        initView();
        initEvent();
    }
 
    private void intData() {
        titles.add("電影");
        titles.add("電視劇");
        titles.add("綜藝");
    }
 
    private void initView() {
        mTabLayout = (TabLayout) findViewById(R.id.tablayout);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
    }
 
    private void initEvent() {
        for (int i = 0; i < titles.size(); i++) {
            mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i)));
        }
        List<Fragment> fragments = new ArrayList<Fragment>();
        for (int i = 0; i < titles.size(); i++) {
            fragments.add(new MyFragment());
        }
        MyFragmentPager fragmentPager = new MyFragmentPager(getSupportFragmentManager(), fragments, titles);
        // 給ViewPager 設定介面卡
        mViewPager.setAdapter(fragmentPager);
        //  將TabLayout 和 ViewPager 關聯起來
        mTabLayout.setupWithViewPager(mViewPager);
    }
 

因為要使用ViewPager，首先要自定義一個Fragment，我自定義了一個Fragment ,程式碼如下：

public class MyFragment extends Fragment {
    View view;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_tablayout, container, false);
        return view;
    }
}

  其中fragment_tablayout.xml 裡面只是有一個TextView。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="總有一個人讓你拼了命的努力變好！"
        android:textSize="20dp" />
</LinearLayout>

 然後我們在主介面也自定義定義了一個MyFragmentPager,用於配合ViewPager 管理Fragment,程式碼如下：

public class MyFragmentPager extends FragmentStatePagerAdapter {
 
    List<Fragment> mFragments;
    List<String> mTitles;
 
    public MyFragmentPager(FragmentManager fm, List<Fragment> fragments, List<String> titles) {
        super(fm);
        mFragments = fragments;
        mTitles = titles;
    }
 
    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }
 
    @Override
    public int getCount() {
        return mFragments.size();
    }
 
    /**
     * 設定標籤欄的標題
     *
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles.get(position);
    }
}

這個特別要注意一下getPagerTitle 方法,這裡返回position 位置的PagerTab 的標題。