AndroidSupportDesign之TabLayout使用詳解，tablayout

AndroidSupportDesign之TabLayout使用詳解，tablayout

在上一篇部落格《高逼格UI-ASD(Android Support Design)》中，我們大體的對TabLayout進行了一些初步的瞭解，這篇部落格，單獨拿出TabLayout來繼續講解是因為：縱觀Android Support Design庫的幾個控制項，除了諸如：FAB、SnackBar等幾個小控制項常用以外，也就TabLayout還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》。
…
如果，你感覺這就簡單，那你也太容易滿足啦，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,不怕不怕~~

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。