一、先上圖看看效果

二、新增依賴

//因為TabLayout是Android Design Support Library 中的控制元件，所以需要在build.gradle新增依賴
compile 'com.android.support:design:25.2.0'

三、介面佈局程式碼

注意：使用app屬性的時候需要先引入app的名稱空間

xmlns:app="http://schemas.android.com/apk/res-auto"

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
 

        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_below="@id/rl_topbar"
        app:tabBackground="@color/topBarBackgound"
        app:tabIndicatorColor="@color/tabTextChenked"
        app:tabSelectedTextColor="@color/tabTextChenked"
        app:tabIndicatorHeight="2dp"
 

        app:tabTextColor="@color/topBarText"

        >

    </android.support.design.widget.TabLayout>

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

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

四、定義類繼承FragmentPagerAdapter

public class TabAdapter extends FragmentPagerAdapter {
//tab文字標題
    private String[] mTabData;
//需要顯示的Fragment的集合
    private List<Fragment> mfragmentList;

    public TabAdapter(FragmentManager fm,String[] tabData,List<Fragment> fragmentList) {
        super(fm);
        this.mTabData = tabData;
        this.mfragmentList = fragmentList;
    }
//根據position返回需要顯示的Fragment
    @Override
    public Fragment getItem(int position) {
        return mfragmentList.get(position);
    }
//獲取需要顯示Fragment的資料量，有幾個標題就肯定有幾個Fragment，所以直接拿陣列的長度就可以了
    @Override
    public int getCount() {
        return mTabData.length;
    }
//返回tab的標題文字資料
    @Override
    public CharSequence getPageTitle(int position) {
        return mTabData[position];
    }
}

這裡需要注意的是，我在編寫的時候Fragment只能使用V4包下不然 Adapter中的getItem方法的返回型別會不一致。

五、程式碼中設定

//將需要顯示的Fragment新增到集合當中
        fragmentList = new ArrayList<Fragment>();
        fragmentList.add(bbcSixminutesFragment);
        fragmentList.add(tunnelEnglishFragment);
        fragmentList.add(bbcNewsFragment);
        fragmentList.add(newsVocabularyFragment);


        //設定Tab
        TabAdapter tabAdapter = new TabAdapter(getSupportFragmentManager(),tabData,fragmentList);
        //設定ViewPager的介面卡
        viewpager_tab.setAdapter(tabAdapter);

        //繫結Tab
        tabLayout.setupWithViewPager(viewpager_tab);