通常在ViewPager的上方佩捞，我們都會放一個標簽指示器與ViewPager進行聯(lián)動灶伊。以前援制，我們大多使用的是GitHub上的開源框架PagerSlidingTabTrip赠摇。而現(xiàn)在超燃，我們可以使用Android自帶的控件TabLayout來實現(xiàn)這個效果了区拳，而且TabLayout更為強大，因為Tab標簽可以使用自定義View意乓。
本文通過TabLayout+ViewPager來展示新浪微博中的三種狀態(tài)微博樱调，分別是廣場微博、好友微博以及我的微博届良。
TabLayout的基本使用
在應用的build.gradle中添加support:design支持庫
compile "com.android.support:design:24.1.1"
創(chuàng)建activity_weibo_timeline.xml文件笆凌，在布局文件中添加TabLayout及ViewPager：
layout="@layout/toolbar"/>
android:id="@+id/timeline_tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
android:id="@+id/timeline_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
布局中toolbar可以忽略，想了解關(guān)于Toolbar的知識士葫，可以參見：《Toobar使用詳解》乞而。
創(chuàng)建顯示微博的Fragment。
布局文件fragment_weibo_timelien.xml內(nèi)容如下：
android:id="@+id/timeline_rv"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
通過RecyclerView展示微博列表慢显。
WeiboTimelineFragment.java內(nèi)容如下:
public class WeiboTimelineFragment extends BaseFragment {
privatestaticfinalString?ARG_TIMELINE_TYPE?="ARG_TIMELINE_TYPE";
@BindView(R.id.timeline_content_tv)
TextView?mContentTV;
privateintmType;
publicstaticWeiboTimelineFragmentnewInstance(inttype){
Bundle?args?=newBundle();
args.putInt(ARG_TIMELINE_TYPE,?type);
WeiboTimelineFragment?fragment?=newWeiboTimelineFragment();
fragment.setArguments(args);
returnfragment;
}
@Override
publicvoidonCreate(Bundle?savedInstanceState){
super.onCreate(savedInstanceState);
mType?=?getArguments().getInt(ARG_TIMELINE_TYPE);
}
@Override
protectedintgetLayoutResId(){
returnR.layout.fragment_weibo_timeline;
}
@Override
protectedvoidinitView(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 {
privatestaticfinalintPAGE_COUNT?=3;
privateContext?mContext;
publicWeiboTimelineAdapter(Context?context,?FragmentManager?fm){
super(fm);
this.mContext?=?context;
}
@Override
publicFragmentgetItem(intposition){
inttype;
switch(position)?{
case0:
type?=?Constants.TYPE_TIMELINE_PUBLIC;
break;
case1:
type?=?Constants.TYPE_TIMELINE_FRIEND;
break;
case2:
type?=?Constants.TYPE_TIMELINE_MINE;
break;
default:
type?=?Constants.TYPE_TIMELINE_PUBLIC;
break;
}
returnWeiboTimelineFragment.newInstance(type);
}
@Override
publicintgetCount(){
returnPAGE_COUNT;
}
@Override
publicCharSequencegetPageTitle(intposition){
switch(position)?{
case0:
return"廣場";
case1:
return"好友";
case2:
return"我";
default:
return"微博";
}
}
}
其中声滥，getItem()以及getCount()是必須實現(xiàn)的眉撵，分別返回每個page顯示的Fragment和page的數(shù)量。而getPageTitle()的返回值落塑，則會用來作為標簽的顯示內(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()?{
returnR.layout.activity_weibo_timeline;
}
@Override
protected?String?getToolbarTitle()?{
return"微博狀態(tài)";
}
@Override
protected?void?onCreate(@Nullable?Bundle?savedInstanceState)?{
super.onCreate(savedInstanceState);
mViewPager.setAdapter(newWeiboTimelineAdapter(mActvity,mActvity.getSupportFragmentManager()));
mTabLayout.setupWithViewPager(mViewPager);
}
}
BaseActivity與BaseFragment的作用大致相同。至此龙考，最基本的TabLayout+ViewPager的實例實現(xiàn)完畢了蟆肆。就是這么簡單，運行之后效果如下：
Picture
TabLayout使用進階
修改TabLayout的風格
上面我們創(chuàng)建的TabLayout的下面的標識線是粉色的晦款，這個顏色采用的是應用的Meterial Design主題中的強調(diào)類型顏色炎功。示例中的主題跟顏色如下：
@color/colorPrimary? ? @color/colorPrimaryDark? ? @color/colorAccent
#3F51B5
#303F9F
#FF4081
很多情況，我們需要更改標示線的顏色缓溅，以及標題的顏色大小蛇损，整個TabLayout的背景顏色等等，實現(xiàn)的方式就是自定義我們的TabLayout Style：
@dimen/tab_max_width? ? ?attr/colorAccent? ? 2dp? ? 12dp? ? 12dp? ? ?attr/selectableItemBackground? ? @style/MyCustomTabTextAppearance? ? ?android:textColorPrimary14sp? ? ?android:textColorSecondary? ? true
可以看到坛怪，很多屬性我們都可以更改淤齐，之后只要應用這個Style即可。
在Tab上顯示圖標
TabLayout沒有明確地提供向Tab中設(shè)置圖標的途徑袜匿，但是很多事情總可以另辟蹊徑更啄。我們知道，Tab是使用adapter中的getPageTitle()方法做其顯示的內(nèi)容居灯，這個方法返回類型為CharSequence祭务。于是，我們可以創(chuàng)建一個SpannableString怪嫌，而將圖標放置在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);
returnspannableString;
}
此時，設(shè)置完之后運行喇勋，發(fā)現(xiàn)Tab上并沒有顯示圖標缨该，而是什么也沒有了。這是因為TabLayout的textAllCaps屬性默認值是true川背，會阻止ImageSpan的渲染贰拿，我們只需要將其重寫為false即可蛤袒。
下面是運行效果：
Picture
在Tab上顯示圖文
上面我們成功地在Tab上顯示了圖標，是不是想同時顯示文本+圖標了膨更？有了上面顯示圖標的途徑妙真，是不是在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 = "廣場";
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);
returnspannableString;
}
運行效果如下：
Picture
在Tab上顯示自定義View
無論是顯示文本、圖標荚守，亦或者圖文珍德，并不能保證可以滿足我們的需求、我們的野心矗漾。只有能在Tab上顯示任何我們想顯示的內(nèi)容锈候，才能打動我們，從而感嘆“好的敞贡，就用你來顯示Tab了泵琳！”√芤郏可喜可賀的是获列，TabLayout中的Tab是支持設(shè)置自定義View的。
首先蛔垢，先定義我們Tab上顯示的View布局view_weibo_timeline_tab.xml：
android:id="@+id/timeline_tab_icon_iv"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_centerHorizontal="true"/>
這里為了介紹击孩，就簡單的顯示個圖標了。緊接著鹏漆，編寫對應的TimelineTabView.java:
public class TimelineTabView extends FrameLayout {
@BindView(R.id.timeline_tab_icon_iv)
ImageView?mIconIV;
publicTimelineTabView(Context?context){
super(context);
init(context);
}
publicTimelineTabView(Context?context,?AttributeSet?attrs){
super(context,?attrs);
init(context);
}
privatevoidinit(Context?context){
View.inflate(context,?R.layout.view_weibo_timeline_tab,this);
ButterKnife.bind(this,this);
}
publicvoidsetData(inticonResId){
mIconIV.setImageResource(iconResId);
}
}
很簡單溯壶，對外提供一個設(shè)置圖標的方法。有了自定義View甫男，只需要設(shè)置到TabLayout中的每個Tab上即可。在WeiboTimelineActivity.java的onCreate()方法中進行設(shè)置：
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mTimelineAdapter?=newWeiboTimelineAdapter(mActvity,?mActvity.getSupportFragmentManager());
mViewPager.setAdapter(mTimelineAdapter);
mTabLayout.setupWithViewPager(mViewPager);
for(inti?=0;?i?<?mTabLayout.getTabCount();?i++)?{
mTabLayout.getTabAt(i).setCustomView(mTimelineAdapter.getTabView(i));
}
}
OK验烧，此時TabLayout上的Tab就會顯示我們自定義的View視圖了板驳，因為只是設(shè)置了個圖標，運行效果與在Tab上顯示圖標一樣碍拆。
TabLayout源碼分析
上面我們使用了自定義View作為Tab若治，但是有個問題上沒有處理，就是Tab在選中時候的高亮狀態(tài)感混。如果使用文本Tab端幼，我們可以設(shè)置Style中的tabSelectedTextColor來實現(xiàn)，那么想一想TabLayout是在什么時機使用這個資源值的弧满？我們是否也可以在此時機改變自定義View的顯示來標記選中婆跑。
用過PagerSlidingTabTrip的同學可能知道，其原理是引用了ViewPager的OnPageChangeListener來進行聯(lián)動的庭呜，使用的是viewpager.setOnPageChangeListener()滑进，從而使得在你應用中如果想監(jiān)聽ViewPager的頁面狀態(tài)改變犀忱，需要使用PagerSlidingTabTrip的setOnPageChangeListener()，也就是說PagerSlidingTabTrip占用了ViewPager的頁面狀態(tài)監(jiān)聽扶关。
TabLayout與ViewPager聯(lián)動也肯定得監(jiān)聽ViewPager的頁面改變阴汇，查看關(guān)聯(lián)ViewPager與TabLayout的內(nèi)部實現(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可以添加任意個頁面改變監(jiān)聽器了铜异。與PagerSlidingTabTrip的設(shè)置方式相比較哥倔，這種方式更好了，看來代碼與時俱進還是很重要的熙掺，使用TabLayout還是值得的未斑。
好了，放棄題外話币绩，繼續(xù)關(guān)注TabLayoutOnPageChangeListener的實現(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);
}
}
當ViewPager的頁面改變時會調(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);
}
...
}
}
當新的選中Tab與當前不同時，調(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è)置了每個TabView的選中狀態(tài)芽突。也就說，當選中某個Tab時董瞻，我們對應的自定義View的setSelected()方法就會調(diào)用寞蚌。所以，當需要根據(jù)Tab是否選中更新自定義View的狀態(tài)時钠糊，可以重寫setSelected()方法：
@Override
public void setSelected(boolean selected) {
super.setSelected(selected);
// 更改文本顏色挟秤、圖標、背景等等
}
好了抄伍，分析完畢艘刚，原諒我這個標題黨，我只想簡單分析如何根據(jù)Tab是否選中更新自定義View的狀態(tài)截珍。對于源碼感興趣的攀甚，可以自行前往研究…
