ym——Android仿網易新聞導覽列PagerSlidingTabStrip源碼分析，pagerslidingtabstrip

ym——Android仿網易新聞導覽列PagerSlidingTabStrip源碼分析，pagerslidingtabstrip

轉載請註明本文出自Cym的部落格（http://blog.csdn.net/cym492224103），謝謝支援！

前言

最近工作比較忙，所以現在才更新博文，對不住大家了~！言歸正傳，我們來說說這個PagerSlidingTabStrip，它是配合ViewPager使用的導覽列，網易新聞就是用的這個導航，我們仔細觀察這個導覽列不僅他是跟著ViewPager滑動而滑動，而且指標還會隨著標題的長度而動態變化長度。

·

：

Github：https://github.com/astuetz/PagerSlidingTabStrip

CSDN：http://download.csdn.net/detail/cym492224103/8413393

在分析源碼的前一個步驟，我們先學會如何使用:

1.把項目源碼下載下來匯入工程，可以看到

library為引用工程，再看看如何使用PagerSlidingTabStrip。

2.在布局檔案配置：

 <com.astuetz.PagerSlidingTabStrip        android:id="@+id/tabs"        android:layout_width="match_parent"        android:layout_height="48dip"        android:background="@drawable/background_tabs" />

3.擷取PagerSlidingTabStrip控制項，綁定ViewPager

@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);pager = (ViewPager) findViewById(R.id.pager);adapter = new MyPagerAdapter(getSupportFragmentManager());pager.setAdapter(adapter);final int pageMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 4, getResources().getDisplayMetrics());pager.setPageMargin(pageMargin);tabs.setViewPager(pager);changeColor(currentColor);}

這樣就已經完成了，很簡單吧~！

它還提供了很多方法來讓開發人員更好的使用它來完成自己想要的風格：

• pstsIndicatorColor滑動指標顏色
• pstsUnderlineColor視圖的底部的全寬線的顏色
• pstsDividerColor選項卡之間的分隔線的顏色
• pstsIndicatorHeight滑動指標高度
• pstsUnderlineHeight視圖的底部高度的全寬線
• pstsDividerPadding頂部和分頻器的底部填充
• pstsTabPaddingLeftRight左，每個選項卡的右填充
• pstsScrollOffset所選選項卡的滾動位移量
• pstsTabBackground每個標籤的背景可展開，應該是一個StateListDrawable
• pstsShouldExpand如果設定為true，每個選項卡被賦予了相同的權重，預設為false
• pstsTextAllCaps如果為true，所有的選項卡標題將是大寫，預設為true

所有屬性都有各自的getter和setter方法在運行時改變它們

源碼分析：

學習完使用之後我們就來解開它的神秘面紗，帶著問題我們來看看它到底是如何?的。

1.引用工程目錄結構

就一個PagerSlidingTabStrip類，比起我之前分析過的ResideMenu要容易一些。

2.看繼承體系

public class PagerSlidingTabStrip extends HorizontalScrollView

繼承了HorizontalScrillView也就是說，擁有了HorizontalScrillView的橫向滑動的功能。

3.看構造方法

public PagerSlidingTabStrip(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);setFillViewport(true);setWillNotDraw(false);tabsContainer = new LinearLayout(context);tabsContainer.setOrientation(LinearLayout.HORIZONTAL);tabsContainer.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));addView(tabsContainer);DisplayMetrics dm = getResources().getDisplayMetrics();scrollOffset = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, scrollOffset, dm);indicatorHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, indicatorHeight, dm);underlineHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, underlineHeight, dm);dividerPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dividerPadding, dm);tabPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, tabPadding, dm);dividerWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dividerWidth, dm);tabTextSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, tabTextSize, dm);// get system attrs (android:textSize and android:textColor)TypedArray a = context.obtainStyledAttributes(attrs, ATTRS);tabTextSize = a.getDimensionPixelSize(0, tabTextSize);tabTextColor = a.getColor(1, tabTextColor);a.recycle();// get custom attrsa = context.obtainStyledAttributes(attrs, R.styleable.PagerSlidingTabStrip);indicatorColor = a.getColor(R.styleable.PagerSlidingTabStrip_pstsIndicatorColor, indicatorColor);underlineColor = a.getColor(R.styleable.PagerSlidingTabStrip_pstsUnderlineColor, underlineColor);dividerColor = a.getColor(R.styleable.PagerSlidingTabStrip_pstsDividerColor, dividerColor);indicatorHeight = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsIndicatorHeight, indicatorHeight);underlineHeight = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsUnderlineHeight, underlineHeight);dividerPadding = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsDividerPadding, dividerPadding);tabPadding = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsTabPaddingLeftRight, tabPadding);tabBackgroundResId = a.getResourceId(R.styleable.PagerSlidingTabStrip_pstsTabBackground, tabBackgroundResId);shouldExpand = a.getBoolean(R.styleable.PagerSlidingTabStrip_pstsShouldExpand, shouldExpand);scrollOffset = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsScrollOffset, scrollOffset);textAllCaps = a.getBoolean(R.styleable.PagerSlidingTabStrip_pstsTextAllCaps, textAllCaps);a.recycle();rectPaint = new Paint();rectPaint.setAntiAlias(true);rectPaint.setStyle(Style.FILL);dividerPaint = new Paint();dividerPaint.setAntiAlias(true);dividerPaint.setStrokeWidth(dividerWidth);defaultTabLayoutParams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);expandedTabLayoutParams = new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f);if (locale == null) {locale = getResources().getConfiguration().locale;}}

以上構造裡面做了5件事情：

1.產生了一個橫向的LinearLayout

2.初始化數值（如：tab邊距、tab字型大小等等）

3.擷取布局檔案的配置屬性，因此我們就知道了，它不僅暴露了方法可以設定這些參數，而且還可以通過配置布局檔案設定這些參數。（如：tab邊距、tab字型大小等等）

4.建立了兩個畫筆，一個是標題的分割線用的，一個是畫指標用的。

5.建立兩個Tabl的LinearLayout.LayoutParams，一個為預設的（寬度隨內容長度），一個為擴充的（寬度比例都一致）。

4.看一下綁定ViewPager裡面它做了什嗎？

public void setViewPager(ViewPager pager) {this.pager = pager;if (pager.getAdapter() == null) {throw new IllegalStateException("ViewPager does not have adapter instance.");}pager.setOnPageChangeListener(pageListener);notifyDataSetChanged();}

接下來在看看notifyDataSetChanged這個方法裡面做了什嗎？

public void notifyDataSetChanged() {tabsContainer.removeAllViews();tabCount = pager.getAdapter().getCount();for (int i = 0; i < tabCount; i++) {if (pager.getAdapter() instanceof IconTabProvider) {addIconTab(i, ((IconTabProvider) pager.getAdapter()).getPageIconResId(i));} else {addTextTab(i, pager.getAdapter().getPageTitle(i).toString());}}updateTabStyles();getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {@SuppressWarnings("deprecation")@SuppressLint("NewApi")@Overridepublic void onGlobalLayout() {if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {getViewTreeObserver().removeGlobalOnLayoutListener(this);} else {getViewTreeObserver().removeOnGlobalLayoutListener(this);}currentPosition = pager.getCurrentItem();scrollToChild(currentPosition, 0);}});}

建立導覽列標題，可以用文字或表徵圖的形式為標題內容。初始化完成後預設滑動到第一個標題。

pager設定了一個監聽，看看監聽裡面做了什嗎？

private class PageListener implements OnPageChangeListener {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {currentPosition = position;currentPositionOffset = positionOffset;scrollToChild(position, (int) (positionOffset * tabsContainer.getChildAt(position).getWidth()));invalidate();if (delegatePageListener != null) {delegatePageListener.onPageScrolled(position, positionOffset, positionOffsetPixels);}}@Overridepublic void onPageScrollStateChanged(int state) {if (state == ViewPager.SCROLL_STATE_IDLE) {scrollToChild(pager.getCurrentItem(), 0);}if (delegatePageListener != null) {delegatePageListener.onPageScrollStateChanged(state);}}@Overridepublic void onPageSelected(int position) {if (delegatePageListener != null) {delegatePageListener.onPageSelected(position);}}}

觀察onPageScrolled(當頁面在滑動的時候會調用此方法)方法裡面做了什麼，

1.改變當前滑動位置。(在此就實現了滑動下面的ViewPager，同時導航也在跟隨這ViewPager滑動而滑動)

2.調用invalidate方法。(invalidate則會調用onDraw，所以看看它在做什麼)

@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);if (isInEditMode() || tabCount == 0) {return;}final int height = getHeight();// draw indicator linerectPaint.setColor(indicatorColor);// default: line below current tabView currentTab = tabsContainer.getChildAt(currentPosition);float lineLeft = currentTab.getLeft();float lineRight = currentTab.getRight();// if there is an offset, start interpolating left and right coordinates between current and next tabif (currentPositionOffset > 0f && currentPosition < tabCount - 1) {View nextTab = tabsContainer.getChildAt(currentPosition + 1);final float nextTabLeft = nextTab.getLeft();final float nextTabRight = nextTab.getRight();lineLeft = (currentPositionOffset * nextTabLeft + (1f - currentPositionOffset) * lineLeft);lineRight = (currentPositionOffset * nextTabRight + (1f - currentPositionOffset) * lineRight);}canvas.drawRect(lineLeft, height - indicatorHeight, lineRight, height, rectPaint);// draw underlinerectPaint.setColor(underlineColor);canvas.drawRect(0, height - underlineHeight, tabsContainer.getWidth(), height, rectPaint);// draw dividerdividerPaint.setColor(dividerColor);for (int i = 0; i < tabCount - 1; i++) {View tab = tabsContainer.getChildAt(i);canvas.drawLine(tab.getRight(), dividerPadding, tab.getRight(), height - dividerPadding, dividerPaint);}}

做了兩件事情：

1.繪製標題的分割線

2.繪製指標。

這樣就實現了跟隨ViewPager滑動而滑動，而且指標還會隨著標題的長度而動態變化長度的效果了。

6.我們來看看它暴露的方法是怎麼寫的：

public void setIndicatorColor(int indicatorColor) {this.indicatorColor = indicatorColor;invalidate();}public void setIndicatorColorResource(int resId) {this.indicatorColor = getResources().getColor(resId);invalidate();}public int getIndicatorColor() {return this.indicatorColor;}public void setIndicatorHeight(int indicatorLineHeightPx) {this.indicatorHeight = indicatorLineHeightPx;invalidate();}public int getIndicatorHeight() {return indicatorHeight;}public void setUnderlineColor(int underlineColor) {this.underlineColor = underlineColor;invalidate();}public void setUnderlineColorResource(int resId) {this.underlineColor = getResources().getColor(resId);invalidate();}public int getUnderlineColor() {return underlineColor;}public void setDividerColor(int dividerColor) {this.dividerColor = dividerColor;invalidate();}public void setDividerColorResource(int resId) {this.dividerColor = getResources().getColor(resId);invalidate();}public int getDividerColor() {return dividerColor;}public void setUnderlineHeight(int underlineHeightPx) {this.underlineHeight = underlineHeightPx;invalidate();}public int getUnderlineHeight() {return underlineHeight;}public void setDividerPadding(int dividerPaddingPx) {this.dividerPadding = dividerPaddingPx;invalidate();}public int getDividerPadding() {return dividerPadding;}public void setScrollOffset(int scrollOffsetPx) {this.scrollOffset = scrollOffsetPx;invalidate();}public int getScrollOffset() {return scrollOffset;}public void setShouldExpand(boolean shouldExpand) {this.shouldExpand = shouldExpand;requestLayout();}public boolean getShouldExpand() {return shouldExpand;}public boolean isTextAllCaps() {return textAllCaps;}public void setAllCaps(boolean textAllCaps) {this.textAllCaps = textAllCaps;}public void setTextSize(int textSizePx) {this.tabTextSize = textSizePx;updateTabStyles();}public int getTextSize() {return tabTextSize;}public void setTextColor(int textColor) {this.tabTextColor = textColor;updateTabStyles();}public void setTextColorResource(int resId) {this.tabTextColor = getResources().getColor(resId);updateTabStyles();}public int getTextColor() {return tabTextColor;}public void setTypeface(Typeface typeface, int style) {this.tabTypeface = typeface;this.tabTypefaceStyle = style;updateTabStyles();}public void setTabBackground(int resId) {this.tabBackgroundResId = resId;}public int getTabBackground() {return tabBackgroundResId;}public void setTabPaddingLeftRight(int paddingPx) {this.tabPadding = paddingPx;updateTabStyles();}public int getTabPaddingLeftRight() {return tabPadding;}

7.除此之外它還做了一些細節上的處理，如：Activity銷毀的時候，它還儲存了當前的選擇標題的座標，這樣就可以防止橫豎屏導致Activity銷毀而引起選取器位置重設的問題,來看看代碼吧~！

@Overridepublic void onRestoreInstanceState(Parcelable state) {SavedState savedState = (SavedState) state;super.onRestoreInstanceState(savedState.getSuperState());currentPosition = savedState.currentPosition;requestLayout();}@Overridepublic Parcelable onSaveInstanceState() {Parcelable superState = super.onSaveInstanceState();SavedState savedState = new SavedState(superState);savedState.currentPosition = currentPosition;return savedState;}static class SavedState extends BaseSavedState {int currentPosition;public SavedState(Parcelable superState) {super(superState);}private SavedState(Parcel in) {super(in);currentPosition = in.readInt();}@Overridepublic void writeToParcel(Parcel dest, int flags) {super.writeToParcel(dest, flags);dest.writeInt(currentPosition);}public static final Parcelable.Creator<SavedState> CREATOR = new Parcelable.Creator<SavedState>() {@Overridepublic SavedState createFromParcel(Parcel in) {return new SavedState(in);}@Overridepublic SavedState[] newArray(int size) {return new SavedState[size];}};}

分析完了，想看更多源碼分析還有：

ym——Android仿QQ5.0側滑菜單ResideMenu源碼分析