實際開發中，ViewPager經常結合Fragment來使用，然後再使用三方開源的PagerSlidingTabStrip去實現類似選項卡滑動效果。我之前那個APP的首頁就是這樣搭建的。
基於Material Design設計的分享文字圖片的APP

現在，我們可以和這種方式說拜拜了。先看效果圖：

可以隨意新增標題，可以修改標題與指示器樣式，可以快速滑動選擇標題。和當前主流APP的首頁效果還是很像的。而這一切，只需要今天的主角—-TabLayout來幫你搞定即可。

Google在2015的IO大會上，給我們帶來了Material Design設計規範，同時，也給我們帶來了全新的Android Design Support Library，在這個support庫裡面，給我們提供了更加規範的MD設計風格的控制元件。最重要的是，Android Design Support Library的相容性更廣，直接可以向下相容到Android 2.2。TabLayout是Android Design Support Library庫中的控制元件。

來看看怎麼使用：

1.準備工作：
在build.gradle加入如下程式碼：

    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:appcompat-v7:22.2.0'

2.佈局檔案：

    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="50dp"
 
>
    </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:background="@android:color/white" />

上面是我們的TabLayout，其中屬性配置在後面會進行設定，下面就是熟悉的viewpager

3.程式碼實現：

public class TabLayoutActivity extends AppCompatActivity {


    private TabLayout tab;
    private ViewPager viewpager;
    private TabAdapter adapter;
    public static final String[] tabTitle = new String[]{"綜藝", "體育", "新聞", "熱點", "頭條", "軍事", "歷史", "科技", "人文", "地理"};

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

    private void initviews() {
        tab = (TabLayout) findViewById(R.id.tab);
        viewpager = (ViewPager) findViewById(R.id.viewpager);

        List<Fragment> fragments = new ArrayList<>();
        for (int i = 0; i < tabTitle.length; i++) {
            fragments.add(TabLayoutFragment.newInstance(i + 1));
        }
        adapter = new TabAdapter(getSupportFragmentManager(), fragments);
        //給ViewPager設定介面卡
        viewpager.setAdapter(adapter);
        //將TabLayout和ViewPager關聯起來。
        tab.setupWithViewPager(viewpager);
        //設定可以滑動
        tab.setTabMode(TabLayout.MODE_SCROLLABLE);
    }


}

準備好taTitle陣列，介面卡，然後給Viewpager設定介面卡，將TabLayout和ViewPager關聯起來，最後就是設定tab可以滑動，不然標題太多，會擠滿上方螢幕。再來看看Adapter的程式碼：

public class TabAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;


    public TabAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }


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

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

    //設定tablayout標題
    @Override
    public CharSequence getPageTitle(int position) {
        return TabLayoutActivity.tabTitle[position];

    }
}

記得加上設定tablayout這個方法。接下來就是fragment的程式碼了：

/**
 * Created by tangyangkai on 16/5/12.
 */
public class TabLayoutFragment extends Fragment {
    public static String TABLAYOUT_FRAGMENT = "tab_fragment";
    private TextView txt;
    private int type;

    public static TabLayoutFragment newInstance(int type) {
        TabLayoutFragment fragment = new TabLayoutFragment();
        Bundle bundle = new Bundle();
        bundle.putSerializable(TABLAYOUT_FRAGMENT, type);
        fragment.setArguments(bundle);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            type = (int) getArguments().getSerializable(TABLAYOUT_FRAGMENT);
        }

    }


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


    protected void initView(View view) {
        txt = (TextView) view.findViewById(R.id.tab_txt);


        switch (type) {
            case 1:
                txt.setText("這是綜藝Fragment");
                break;
            case 2:
                txt.setText("這是體育Fragment");
                break;
            case 3:
                txt.setText("這是新聞Fragment");
                break;
            case 4:
                txt.setText("這是熱點Fragment");
                break;
            case 5:
                txt.setText("這是頭條Fragment");
                break;
            case 6:
                txt.setText("這是軍事Fragment");
                break;
            case 7:
                txt.setText("這是歷史Fragment");
                break;
            case 8:
                txt.setText("這是科技Fragment");
                break;
            case 9:
                txt.setText("這是人文Fragment");
                break;
            case 10:
                txt.setText("這是地理Fragment");
                break;
        }


    }

}

關於使用setArguments()來建立Fragment，這種方法在上一篇部落格裡面著重給大家推薦了

這裡我們再一次看到了其中的好處，就是fragment的複用。根據傳遞過來的不同引數，顯示不同的介面。TabLayout非常適合那種介面相差不大的，就像CSDN客戶端首頁，都是顯示技術類文章，只是分類不一樣而已。

當然，你要是說，要是我這些介面差異很大怎麼辦，沒問題：

  List<Fragment> fragments = new ArrayList<>();
        for (int i = 0; i < tabTitle.length; i++) {
            fragments.add(TabLayoutFragment.newInstance(i + 1));
        }

我在這裡放進不同的fragment即可。原則就是：相似的我就複用，不一樣的我就新增

圖示效果是預設樣式的，要是想修改一下文字，指示器樣式咋辦，很簡單：

官方的 TabLayout 沒有提供修改 TextView size 的方法，可以新建一個 style CustomTabLayoutTextAppearance 繼承 TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse ，然後增加 item 再設定 android:textSize 為你想設定的大小。

 <style name="MyTabLayoutTextAppearanceInverse" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
        <item name="android:textSize">20sp</item>
    </style>

XML檔案中使用：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:tabTextAppearance="@style/MyTabLayoutTextAppearanceInverse"
    tools:context="com.example.tangyangkai.testdemo.TabLayoutActivity">


    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabSelectedTextColor="@color/colorAccent"
      app:tabTextAppearance="@style/MyTabLayoutTextAppearanceInverse"
        app:tabTextColor="@color/colorPrimary"
        app:tabIndicatorColor="@color/colorAccent">

    </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:background="@android:color/white" />

</LinearLayout>

依次是設定選中字型顏色，大小，正常顏色，以及指示器的顏色，看完改完的效果：

純屬演示，大家可以自己設定自己喜歡的風格。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~分割線

無意間看到別的APP的首頁，好多好看的效果。果斷去github了一把，果然找到了。

上圖：

給大家連結地址：

感興趣的可以研究研究。

收工！！！又到週五啦，大家週末愉快