本來算是個雞肋的東西，但是design相容包釋出之後情況就大不一樣了。

下面看程式碼：

首先在gradle中新增依賴

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:design:22.2.1'
    compile 'com.android.support:recyclerview-v7:22.2.1'
    compile 'com.android.support:cardview-v7:22.2.1'
    compile files('libs/universal-image-loader-1.9.4.jar')
    compile project(':ImageViewTouch')
}
 

然後就是在Activity或者Fragment中新增TabLayout和ViewPager

<android.support.design.widget.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabGravity="fill"
                app:tabMode="fixed"
                app:tabSelectedTextColor="?attr/colorAccent"
                app:tabTextColor="#fff" />
 <android.support.v4.view.ViewPager
            android:id="@+id/mainPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/tabLayout" />
 

下面建立ViewPager頁面，我就不程式碼演示了

繼承PagerAdapter建立MyPagerAdapter

public class MyPagerAdapter extends PagerAdapter {
    private List<View> viewList;
    private String[] titles;

    public MyPagerAdapter(List<View> viewList, String[] titles) {
        this.viewList = viewList;
        this.titles = titles;
    }



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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(viewList.get(position));
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(viewList.get(position));
        return viewList.get(position);
    }

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


}
 

tabLayout = (TabLayout) findViewById(R.id.tabLayout);

        mainPager = (ViewPager) findViewById(R.id.mainPager);
        LayoutInflater inflater = getLayoutInflater();
        facePager = inflater.inflate(R.layout.face_layout, null);
        modelPager = inflater.inflate(R.layout.model_layout, null);

        viewList = new ArrayList<View>();
        viewList.add(facePager);
        viewList.add(modelPager);
        titles = new String[]{"表情", "模板"};
        MyPagerAdapter myPagerAdapter = new MyPagerAdapter(viewList, titles);
        mainPager.setAdapter(myPagerAdapter);
        tabLayout.setupWithViewPager(mainPager);//將viewPager綁定於tabLayout

好了，Tab頁面就算實現完成了，是不是特別簡單呢？