通常在ViewPager的上方余耽，我們都會(huì)放一個(gè)標(biāo)簽指示器與ViewPager進(jìn)行聯(lián)動(dòng)缚柏。以前，我們大多使用的是GitHub上的開源框架PagerSlidingTabTrip碟贾，具體的可以參見https://github.com/astuetz/PagerSlidingTabStrip币喧。而現(xiàn)在，我們可以使用Android自帶的控件TabLayout來實(shí)現(xiàn)這個(gè)效果了袱耽，而且TabLayout更為強(qiáng)大杀餐，因?yàn)門ab標(biāo)簽可以使用自定義View。
本文通過TabLayout+ViewPager來展示新浪微博中的三種狀態(tài)微博朱巨，分別是廣場(chǎng)微博史翘、好友微博以及我的微博。
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 "廣場(chǎng)"; 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)完畢了槐沼。就是這么簡(jiǎn)單曙蒸，運(yùn)行之后效果如下：
TabLayout使用進(jìn)階
修改TabLayout的風(fēng)格
上面我們創(chuàng)建的TabLayout的下面的標(biāo)識(shí)線是粉色的，這個(gè)顏色采用的是應(yīng)用的Meterial Design主題中的強(qiáng)調(diào)類型顏色岗钩。示例中的主題跟顏色如下：
<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)行效果：
在Tab上顯示圖文
上面我們成功地在Tab上顯示了圖標(biāo)，是不是想同時(shí)顯示文本+圖標(biāo)了畅形？有了上面顯示圖標(biāo)的途徑养距，是不是在SpannableString中添加文本就可以了：
public CharSequence getPageTitle(int position) {
Drawable drawable;
String title;
switch (position) {
case 0:
drawable = ContextCompat.getDrawable(mContext, R.drawable.icon_weibo_timeline_public);
title = "廣場(chǎng)";
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)行效果如下：
在Tab上顯示自定義View
無論是顯示文本、圖標(biāo)日熬，亦或者圖文棍厌，并不能保證可以滿足我們的需求、我們的野心。只有能在Tab上顯示任何我們想顯示的內(nèi)容耘纱，才能打動(dòng)我們敬肚，從而感嘆“好的，就用你來顯示Tab了束析！”艳馒。可喜可賀的是员寇，TabLayout中的Tab是支持設(shè)置自定義View的弄慰。
首先，先定義我們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>
這里為了介紹蝶锋，就簡(jiǎn)單的顯示個(gè)圖標(biāo)了陆爽。緊接著，編寫對(duì)應(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);
}
}
很簡(jiǎn)單扳缕，對(duì)外提供一個(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
&& 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
&& 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í)，我們對(duì)應(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)題黨秕磷，我只想簡(jiǎn)單分析如何根據(jù)Tab是否選中更新自定義View的狀態(tài)。對(duì)于源碼感興趣的炼团，可以自行前往研究...
最后澎嚣，附上源碼地址：
https://github.com/FILWAndroid/DevJourney
關(guān)于源碼：
- 不只是本文涉及的代碼，會(huì)包含很多知識(shí)點(diǎn)的代碼瘟芝，應(yīng)該都會(huì)在我的簡(jiǎn)書中進(jìn)行介紹易桃。
- 有可能代碼與本文中所貼出來的有差異，但應(yīng)該都是我覺得更好的方式吧锌俱。
- 歡迎大家對(duì)我進(jìn)行批評(píng)教育晤郑。
參考鏈接：
https://guides.codepath.com/android/google-play-style-tabs-using-tablayout#design-support-library
