在上一篇博客《[高逼格UI-ASD(Android Support Design)](http://blog.csdn.net/qibin0506/article/details/46850763)》中，我們大體的對`TabLayout`進行了一些初步的了解，這篇博客，單獨拿出`TabLayout`來繼續講解是因為：縱觀`Android Support Design`庫的幾個控件，除了諸如：`FAB`、`SnackBar`等幾個小控件常用以外，也就`TabLayou`t還ok了，其他的例如`CollapsingToolbarLayout`，這樣的控件封裝性太強了，只能固定那幾個場景去使用(純屬個人見解)。 那`TabLayout`呢？上一篇博客我們只是簡單的了解一下，今天這篇博客我們就用TabLayout配合ViewPager使用以下。 在開始之前，我們先來看看官網文檔的說明,如何與ViewPager進行聯動： > You should set a listener via setOnTabSelectedListener(OnTabSelectedListener) to be notified when any tab’s selection state has been changed. If you’re using a ViewPager together with this layout, you can use setTabsFromPagerAdapter(PagerAdapter) which will populate the tabs using the given PagerAdapter’s page titles. You should also use a TabLayout.TabLayoutOnPageChangeListener to forward the scroll and selection changes to this layout 恩，看起來很容易啊，簡單翻譯一下就是： > 通過setOnTabSelectedListener設置一個監聽器來響應選項卡的選擇狀態 可以通過setTabsFromPagerAdapter來使用PagerAdapter的page title 使用TabLayout.TabLayoutOnPageChangeListener來聯動滑動 ok，大體就是這樣，在大體的翻譯過程中，其實已經把步驟列出來了，接下來我們只需要按照上面的步驟來編寫我們的代碼就OK啦。 come on~，首先出場的是xml布局文件： ~~~ <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" tools:context=".MainActivity"> <android.support.design.widget.TabLayout android:id="@+id/tl" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorColor="#FF00FF00" app:tabSelectedTextColor="#FF00FF00" app:tabTextColor="#FF000000" app:tabMode="scrollable" app:tabGravity="center"/> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="wrap_content"/> </LinearLayout> ~~~ 恩，很簡單，就是一個`TabLayout`和一個`ViewPager`,并且是上下排列的。 在Activity中，首先我們要find這兩個控件： ~~~ mTabLayout = (TabLayout) findViewById(R.id.tl); mViewPager = (ViewPager) findViewById(R.id.viewpager); ~~~ 為了演示程序，還需要兩個偽數據來充當ViewPager的內容和title。 ~~~ private String[] mTitle = new String[20]; private String[] mData = new String[20]; { for(int i=0;i<20;i++) { mTitle[i] = "title" + i; mData[i] = "data" + i; } } ~~~ 下面，我們將要按照上面的步驟，一點點來擼代碼啦： 第一步，設置`TabLayout`的選項卡監聽： ~~~ mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { mViewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } }); ~~~ 當我們的tab選擇時，讓`viewpager`選中對應的item。 第二步，設置`Tab`的標題來自`PagerAdapter.getPageTitle()`。 ~~~ mTabLayout.setTabsFromPagerAdapter(mAdapter); ~~~ 第三步，設置`TabLayout.TabLayoutOnPageChangeListener`,給誰設置呢？當然是ViewPager了，怎么設置呢？ ~~~ final TabLayout.TabLayoutOnPageChangeListener listener = new TabLayout.TabLayoutOnPageChangeListener(mTabLayout); mViewPager.addOnPageChangeListener(listener); ~~~ 哦，原來`TabLaout.TabLayoutOnPageChangeLisetener`繼承自`OnPageChangeListener`，不行來看： ~~~ public static class TabLayoutOnPageChangeListener implements OnPageChangeListener {...} ~~~ 注意，這里是addOnPageChangeListener,也就是說，你還可以add N個Listener而不會被覆蓋掉。 到這里，步驟我們都走完了，但是別忘了給ViewPage設置Adapter。 ~~~ mViewPager.setAdapter(mAdapter); ~~~ 最后是Adapter的代碼： ~~~ private PagerAdapter mAdapter = new PagerAdapter() { @Override public CharSequence getPageTitle(int position) { return mTitle[position]; } @Override public int getCount() { return mData.length; } @Override public Object instantiateItem(View container, int position) { TextView tv = new TextView(MainActivity.this); tv.setTextSize(30.f); tv.setText(mData[position]); ((ViewPager) container).addView(tv); return tv; } @Override public void destroyItem(ViewGroup container, int position, Object object) { ((ViewPager) container).removeView((View) object); } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } }; ~~~ 運行一下代碼，看看效果：  是不是很簡單？ 幾行代碼就搞定了這種效果，當然，你也可以選擇自己重寫View的方式實現，可以參考我的另一篇博客《[打造史上最容易使用的Tab指示符——Indicator](http://blog.csdn.net/qibin0506/article/details/42046559)》。 … 如果，你感覺這就簡單，那你也太容易滿足啦，Google還給我們提供了一個方法，將這些步驟封裝到一塊，讓我們開發者可以一步搞定。`public void setupWithViewPager (ViewPager viewPager)`，繼續看看文檔的說明： > The one-stop shop for setting up this TabLayout with a ViewPager. > This method will: > Add a ViewPager.OnPageChangeListener that will forward events to this TabLayout. Populate the TabLayout’s tabs from the ViewPager’s PagerAdapter. Set our TabLayout.OnTabSelectedListener which will forward selected events to the ViewPager 大體解釋一下就是： > 這個方法是`addOnPageChangeListener`和`setOnTabSelectedListener`的封裝。 所以我們注釋掉對應代碼，替換成`setupWithViewPager`。 ~~~ // mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { // @Override // public void onTabSelected(TabLayout.Tab tab) { // mViewPager.setCurrentItem(tab.getPosition()); // } // // @Override // public void onTabUnselected(TabLayout.Tab tab) { // // } // // @Override // public void onTabReselected(TabLayout.Tab tab) { // // } // }); mTabLayout.setTabsFromPagerAdapter(mAdapter); // final TabLayout.TabLayoutOnPageChangeListener listener = // new TabLayout.TabLayoutOnPageChangeListener(mTabLayout); // mViewPager.addOnPageChangeListener(listener); mViewPager.setAdapter(mAdapter); mTabLayout.setupWithViewPager(mViewPager); ~~~ 效果還是上面的效果，但是代碼量明顯少了，僅需兩行代碼搞定。 但是需要注意一下，`setupWithViePager`必須在`ViewPager.setAdapter()`之后調用！為什么呢？來源碼找答案： ~~~ public void setupWithViewPager(ViewPager viewPager) { PagerAdapter adapter = viewPager.getAdapter(); if(adapter == null) { throw new IllegalArgumentException("ViewPager does not have a PagerAdapter set"); } else { ... } } ~~~ 首先去獲取該ViewPager上的Adapter，如果沒有Adapter，則拋出一個異常！ 好了，到現在`TabLayout`和`ViewPager`一塊使用的用法就講解完了，相信還是非常簡單的，僅僅兩行代碼就可以搞定。 在以后的項目中，肯定會經常用到它們兩個好基友的，但是so easy,不怕不怕~~