通常在ViewPager的上方，我們都會(huì)放一個(gè)標(biāo)簽指示器與ViewPager進(jìn)行聯(lián)動(dòng)。以前，我們大多使用的是GitHub上的開源框架PagerSlidingTabTrip。而現(xiàn)在，我們可以使用Android自帶的控件TabLayout來實(shí)現(xiàn)這個(gè)效果了，而且TabLayout更為強(qiáng)大，因?yàn)門ab標(biāo)簽可以使用自定義View。

本文通過TabLayout+ViewPager來展示新浪微博中的三種狀態(tài)微博，分別是廣場微博、好友微博以及我的微博。

TabLayout的基本使用
在應(yīng)用的build.gradle中添加support:design支持庫

compile "com.android.support:design:24.1.1"

創(chuàng)建activity_weibo_timeline.xml文件，在布局文件中添加TabLayout及ViewPager：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include
        layout="@layout/toolbar"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/timeline_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

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

</LinearLayout>

布局中toolbar可以忽略，想了解關(guān)于Toolbar的知識(shí)，可以參見：《Toobar使用詳解》。

創(chuàng)建顯示微博的Fragment。

布局文件fragment_weibo_timelien.xml內(nèi)容如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
              android:id="@+id/timeline_rv"
              android:layout_width="match_parent"
              android:layout_height="match_parent"/>

</RelativeLayout>

通過RecyclerView展示微博列表。

WeiboTimelineFragment.java內(nèi)容如下:

public class WeiboTimelineFragment extends BaseFragment {

    private static final String ARG_TIMELINE_TYPE = "ARG_TIMELINE_TYPE";

    @BindView(R.id.timeline_content_tv)
    TextView mContentTV;

    private int mType;

    public static WeiboTimelineFragment newInstance(int type) {
        Bundle args = new Bundle();
        args.putInt(ARG_TIMELINE_TYPE, type);
        WeiboTimelineFragment fragment = new WeiboTimelineFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mType = getArguments().getInt(ARG_TIMELINE_TYPE);
    }

    @Override
    protected int getLayoutResId() {
        return R.layout.fragment_weibo_timeline;
    }

    @Override
    protected void initView(View view, Bundle savedInstanceState) {
        // 展示微博邏輯
    }

}

Fragment根據(jù)傳入的type，來展示不同類型的微博列表。WeiboTimelineFragment繼承的BaseFragment主要根據(jù)子類getLayoutResId()返回值創(chuàng)建了Fragment的顯示視圖，綁定了ButterKnife。這部分有TabLayout無關(guān)，有興趣的可以看源碼。

創(chuàng)建ViewPager的適配器WeiboTimelineAdapter:

public class WeiboTimelineAdapter extends FragmentPagerAdapter {

    private static final int PAGE_COUNT = 3;

    private Context mContext;

    public WeiboTimelineAdapter(Context context, FragmentManager fm) {
        super(fm);
        this.mContext = context;
    }

    @Override
    public Fragment getItem(int position) {
        int type;
        switch (position) {
            case 0:
                type = Constants.TYPE_TIMELINE_PUBLIC;
                break;
            case 1:
                type = Constants.TYPE_TIMELINE_FRIEND;
                break;
            case 2:
                type = Constants.TYPE_TIMELINE_MINE;
                break;
            default:
                type = Constants.TYPE_TIMELINE_PUBLIC;
                break;
        }
        return WeiboTimelineFragment.newInstance(type);
    }

    @Override
    public int getCount() {
        return PAGE_COUNT;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return "廣場";
            case 1:
                return "好友";
            case 2:
                return "我";
            default:
                return "微博";
        }
    }
}

其中，getItem()以及getCount()是必須實(shí)現(xiàn)的，分別返回每個(gè)page顯示的Fragment和page的數(shù)量。而getPageTitle()的返回值，則會(huì)用來作為標(biāo)簽的顯示內(nèi)容。

在WeiboTimelineActivity中，將TabLayout、ViewPager以及Adapter關(guān)聯(lián)起來。

public class WeiboTimelineActivity extends BaseActvity {

    @BindView(R.id.timeline_tablayout)
    TabLayout mTabLayout;
    @BindView(R.id.timeline_viewpager)
    ViewPager mViewPager;

    @Override
    protected int getContentViewId() {
        return R.layout.activity_weibo_timeline;
    }

    @Override
    protected String getToolbarTitle() {
        return "微博狀態(tài)";
    }

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mViewPager.setAdapter(new WeiboTimelineAdapter(mActvity, mActvity.getSupportFragmentManager()));
        mTabLayout.setupWithViewPager(mViewPager);
    }
}

BaseActivity與BaseFragment的作用大致相同。至此，最基本的TabLayout+ViewPager的實(shí)例實(shí)現(xiàn)完畢了。就是這么簡單，運(yùn)行之后效果如下：

image.png

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>

很多情況，我們需要更改標(biāo)示線的顏色，以及標(biāo)題的顏色大小，整個(gè)TabLayout的背景顏色等等，實(shí)現(xiàn)的方式就是自定義我們的TabLayout Style：

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>
<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">?android:textColorSecondary</item>
    <item name="textAllCaps">true</item>
</style>

可以看到，很多屬性我們都可以更改，之后只要應(yīng)用這個(gè)Style即可。

在Tab上顯示圖標(biāo)
TabLayout沒有明確地提供向Tab中設(shè)置圖標(biāo)的途徑，但是很多事情總可以另辟蹊徑。我們知道，Tab是使用adapter中的getPageTitle()方法做其顯示的內(nèi)容，這個(gè)方法返回類型為CharSequence。于是，我們可以創(chuàng)建一個(gè)SpannableString，而將圖標(biāo)放置在ImageSpan中，設(shè)置在SpannableString中：

public CharSequence getPageTitle(int position) {
    Drawable drawable;
    switch (position) {
        case 0:
            drawable = ContextCompat.getDrawable(mContext, R.drawable.icon_weibo_timeline_public);
            break;
        case 1:
            drawable = ContextCompat.getDrawable(mContext, R.drawable.icon_weibo_timeline_friend);
            break;
        case 2:
            drawable = ContextCompat.getDrawable(mContext, R.drawable.icon_weibo_timeline_mine);
            break;
        default:
            drawable = ContextCompat.getDrawable(mContext, R.drawable.icon_weibo_timeline_public);
            break;
    }
    drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
    ImageSpan imageSpan = new ImageSpan(drawable, ImageSpan.ALIGN_BOTTOM);
    SpannableString spannableString = new SpannableString(" ");
    spannableString.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

    return spannableString;
}

此時(shí)，設(shè)置完之后運(yùn)行，發(fā)現(xiàn)Tab上并沒有顯示圖標(biāo)，而是什么也沒有了。這是因?yàn)門abLayout的textAllCaps屬性默認(rèn)值是true，會(huì)阻止ImageSpan的渲染，我們只需要將其重寫為false即可。

下面是運(yùn)行效果：

image.png

public CharSequence getPageTitle(int position) {
    Drawable drawable;
    String title;
    switch (position) {
        case 0:
            drawable = ContextCompat.getDrawable(mContext, R.drawable.icon_weibo_timeline_public);
            title = "廣場";
            break;
        case 1:
            drawable = ContextCompat.getDrawable(mContext, R.drawable.icon_weibo_timeline_friend);
            title = "好友";
            break;
        case 2:
            drawable = ContextCompat.getDrawable(mContext, R.drawable.icon_weibo_timeline_mine);
            title = "我";
            break;
        default:
            drawable = ContextCompat.getDrawable(mContext, R.drawable.icon_weibo_timeline_public);
            title = "微博";
            break;
    }
    drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
    ImageSpan imageSpan = new ImageSpan(drawable, ImageSpan.ALIGN_BOTTOM);
    SpannableString spannableString = new SpannableString(" " + title);
    spannableString.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

    return spannableString;
}

運(yùn)行效果如下：

image.png

首先，先定義我們Tab上顯示的View布局view_weibo_timeline_tab.xml：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/timeline_tab_icon_iv"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

這里為了介紹，就簡單的顯示個(gè)圖標(biāo)了。緊接著，編寫對應(yīng)的TimelineTabView.java:

public class TimelineTabView extends FrameLayout {

    @BindView(R.id.timeline_tab_icon_iv)
    ImageView mIconIV;

    public TimelineTabView(Context context) {
        super(context);
        init(context);
    }

    public TimelineTabView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context) {
        View.inflate(context, R.layout.view_weibo_timeline_tab, this);
        ButterKnife.bind(this, this);
    }

    public void setData(int iconResId) {
        mIconIV.setImageResource(iconResId);
    }
}

很簡單，對外提供一個(gè)設(shè)置圖標(biāo)的方法。有了自定義View，只需要設(shè)置到TabLayout中的每個(gè)Tab上即可。在WeiboTimelineActivity.java的onCreate()方法中進(jìn)行設(shè)置：

protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    mTimelineAdapter = new WeiboTimelineAdapter(mActvity, mActvity.getSupportFragmentManager());

    mViewPager.setAdapter(mTimelineAdapter);
    mTabLayout.setupWithViewPager(mViewPager);

    for (int i = 0; i < mTabLayout.getTabCount(); i++) {
        mTabLayout.getTabAt(i).setCustomView(mTimelineAdapter.getTabView(i));
    }

}

OK，此時(shí)TabLayout上的Tab就會(huì)顯示我們自定義的View視圖了，因?yàn)橹皇窃O(shè)置了個(gè)圖標(biāo)，運(yùn)行效果與在Tab上顯示圖標(biāo)一樣。

TabLayout源碼分析
上面我們使用了自定義View作為Tab，但是有個(gè)問題上沒有處理，就是Tab在選中時(shí)候的高亮狀態(tài)。如果使用文本Tab，我們可以設(shè)置Style中的tabSelectedTextColor來實(shí)現(xiàn)，那么想一想TabLayout是在什么時(shí)機(jī)使用這個(gè)資源值的？我們是否也可以在此時(shí)機(jī)改變自定義View的顯示來標(biāo)記選中。

用過PagerSlidingTabTrip的同學(xué)可能知道，其原理是引用了ViewPager的OnPageChangeListener來進(jìn)行聯(lián)動(dòng)的，使用的是viewpager.setOnPageChangeListener()，從而使得在你應(yīng)用中如果想監(jiān)聽ViewPager的頁面狀態(tài)改變，需要使用PagerSlidingTabTrip的setOnPageChangeListener()，也就是說PagerSlidingTabTrip占用了ViewPager的頁面狀態(tài)監(jiān)聽。

TabLayout與ViewPager聯(lián)動(dòng)也肯定得監(jiān)聽ViewPager的頁面改變，查看關(guān)聯(lián)ViewPager與TabLayout的內(nèi)部實(shí)現(xiàn)，即TabLayout的setupWithViewPager()方法：

private void setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh,
            boolean implicitSetup) {
    ...
    // Add our custom OnPageChangeListener to the ViewPager
    if (mPageChangeListener == null) {
        mPageChangeListener = new TabLayoutOnPageChangeListener(this);
    }
    mPageChangeListener.reset();
    viewPager.addOnPageChangeListener(mPageChangeListener);
    ...
}

可以看到，給ViewPager添加，注意是添加而不是設(shè)置，說明現(xiàn)在ViewPager可以添加任意個(gè)頁面改變監(jiān)聽器了。與PagerSlidingTabTrip的設(shè)置方式相比較，這種方式更好了，看來代碼與時(shí)俱進(jìn)還是很重要的，使用TabLayout還是值得的。

好了，放棄題外話，繼續(xù)關(guān)注TabLayoutOnPageChangeListener的實(shí)現(xiàn)，關(guān)注onPageSelected()方法：

@Override
public void onPageSelected(final int position) {
    final TabLayout tabLayout = mTabLayoutRef.get();
    if (tabLayout != null && tabLayout.getSelectedTabPosition() != position
            &amp;&amp; position < tabLayout.getTabCount()) {
        // Select the tab, only updating the indicator if we're not being dragged/settled
        // (since onPageScrolled will handle that).
        final boolean updateIndicator = mScrollState == SCROLL_STATE_IDLE
                || (mScrollState == SCROLL_STATE_SETTLING
                &amp;&amp; mPreviousScrollState == SCROLL_STATE_IDLE);
        tabLayout.selectTab(tabLayout.getTabAt(position), updateIndicator);
    }
}

當(dāng)ViewPager的頁面改變時(shí)會(huì)調(diào)用selectTab()方法：

void selectTab(final Tab tab, boolean updateIndicator) {
    final Tab currentTab = mSelectedTab;

    if (currentTab == tab) {
        ...
    } else {
        ...        
        if (newPosition != Tab.INVALID_POSITION) {
            setSelectedTabView(newPosition);
        }
        ...
    }
}

當(dāng)新的選中Tab與當(dāng)前不同時(shí)，調(diào)用了setSelectedTabView()方法：

private void setSelectedTabView(int position) {
    final int tabCount = mTabStrip.getChildCount();
    if (position < tabCount) {
        for (int i = 0; i < tabCount; i++) {
            final View child = mTabStrip.getChildAt(i);
            child.setSelected(i == position);
        }
    }
}

最后，重新設(shè)置了每個(gè)TabView的選中狀態(tài)。也就說，當(dāng)選中某個(gè)Tab時(shí)，我們對應(yīng)的自定義View的setSelected()方法就會(huì)調(diào)用。所以，當(dāng)需要根據(jù)Tab是否選中更新自定義View的狀態(tài)時(shí)，可以重寫setSelected()方法：

@Override
public void setSelected(boolean selected) {
    super.setSelected(selected);
    // 更改文本顏色、圖標(biāo)、背景等等
}

好了，分析完畢，原諒我這個(gè)標(biāo)題黨，我只想簡單分析如何根據(jù)Tab是否選中更新自定義View的狀態(tài)。對于源碼感興趣的，可以自行前往研究...