【Android開源庫】 PagerSlidingTabStrip從頭到腳

簡介

PagerSlidingTabStrip，是我我的常常使用到的一個和ViewPager配合的頁面指示器，能夠知足開發過程當中經常使用的需求，如相似於今日頭條的首頁新聞內容導航欄等等，以前本身開發的JuheNews和正在開發的GankIOClient均有使用到它，因此想對其進行一個全面的介紹。 

  

PagerSlidingTabStrip源碼地址：

https://github.com/astuetz/PagerSlidingTabStrip

---

簡單使用

• 添加庫依賴

dependencies { compile 'com.astuetz:pagerslidingtabstrip:1.0.1' }

• 1
• 2
• 3

• 定義佈局文件

<com.astuetz.PagerSlidingTabStrip android:id="@+id/psts_indicator" android:layout_width="match_parent" android:layout_height="40dp"/> <android.support.v4.view.ViewPager android:id="@+id/vp_content" android:layout_width="match_parent" android:layout_height="match_parent"/>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 關聯ViewPager

public class MainActivity extends AppCompatActivity { @BindView(R.id.psts_indicator) PagerSlidingTabStrip pstsIndicator; @BindView(R.id.activity_main) LinearLayout activityMain; @BindView(R.id.vp_content) ViewPager vpContent; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); MainPagerAdapter mainPagerAdapter = new MainPagerAdapter(getSupportFragmentManager()); vpContent.setAdapter(mainPagerAdapter); pstsIndicator.setViewPager(vpContent); } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

• 結果

• 後話 
  看到這個效果，是否是很炸裂，如此的醜陋，上圖是什麼屬性都沒有修改默認的效果圖，接着咱們看下源碼，看下能夠從哪方面來進行改造。 
  

  ---

源碼解析

這個開源庫，簡單點說就是你們都很是熟悉的自定義View，因此，解讀的方式能夠從自定義屬性到此視圖的構造，onMeasure,onLayout, onDraw等等

1. 自定義的屬性值

<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="PagerSlidingTabStrip"> <!--底部滑動指示器的顏色--> <attr name="pstsIndicatorColor" format="color" /> <!--底部用於給指示器滑動的區域的顏色--> <attr name="pstsUnderlineColor" format="color" /> <!--分割線的顏色--> <attr name="pstsDividerColor" format="color" /> <!--指示器的高度--> <attr name="pstsIndicatorHeight" format="dimension" /> <!--底部區域的高度--> <attr name="pstsUnderlineHeight" format="dimension" /> <!--分割線與上下的間距--> <attr name="pstsDividerPadding" format="dimension" /> <!--每一個Tab的左右邊距--> <attr name="pstsTabPaddingLeftRight" format="dimension" /> <!--選中tab的滾動偏移量,我的基本沒有用到過--> <attr name="pstsScrollOffset" format="dimension" /> <!--每一個Tab的背景圖，StateListDrawable--> <attr name="pstsTabBackground" format="reference" /> <!--是否根據tab均爲位置，true的時候均分，默認爲false,通常都是使用默認值--> <attr name="pstsShouldExpand" format="boolean" /> <!--標題文本是否大寫，默認爲true--> <attr name="pstsTextAllCaps" format="boolean" /> </declare-styleable> </resources>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

看下大體的佈局和屬性對號入座 

2. PagerSlidingTabStrip.java類結構

---

 

類中的getter和setter方法，基本上和上面的自定義屬性能夠對上號，不只能夠在佈局文件中定義，還能夠經過java代碼進行設置。 

---

 

類中使用到的變量，大部分都是和自定義屬性掛鉤的，主要關注幾個

變量	意義
ATTRS	引用Android系統的兩個屬性，文本字體大小和字體顏色
pageListener	內部使用的OnPagerChangeListener,經過setViewPager實現和ViewPager的聯動
delegatePageListener	暴露給開發者的接口，類自己使用到了兩個OnPageChangeListener，一個用來實現本身的邏輯，而這個則是留給開發者實現本身須要針對ViewPager的頁面變化的邏輯
tabsContainer	內部容器，用戶所見文本指示器和圖標指示器的父節點，因此，若是須要針對文本指示器或者是圖標指示器作什麼操做，經過這個查找孩子節點便可

 

---

 

• IconTabProvider 
  類中比較關鍵的一些內容，接口IconTabProvider，ViewPager對應的Adapter實現該方法並返回每一個ViewPager對應的圖標便可實現圖標指示器。

• PageListener <用戶自定義的OnPagerListener的事件處理集成於此處>

private class PageListener implements OnPageChangeListener { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { //存儲當前位置信息 currentPosition = position; currentPositionOffset = positionOffset; //滑動到子視圖 scrollToChild(position, (int) (positionOffset * tabsContainer.getChildAt(position).getWidth())); invalidate();//觸發重繪 //用戶自定義的OnPagerChangeListener事件之onPagerScrolled if (delegatePageListener != null) { delegatePageListener.onPageScrolled(position, positionOffset, positionOffsetPixels); } } @Override public void onPageScrollStateChanged(int state) { //已經滑動完成，offset歸0 if (state == ViewPager.SCROLL_STATE_IDLE) { scrollToChild(pager.getCurrentItem(), 0); } //用戶自定義的OnPagerChangeListener事件之onPageScrollStateChanged if (delegatePageListener != null) { delegatePageListener.onPageScrollStateChanged(state); } } @Override public void onPageSelected(int position) { //這裏類內部沒有作什麼處理，只處理用戶自定義的OnPagerSelected方法 if (delegatePageListener != null) { delegatePageListener.onPageSelected(position); } } } /** *滑動指定子視圖 */ private void scrollToChild(int position, int offset) { if (tabCount == 0) { return; } int newScrollX = tabsContainer.getChildAt(position).getLeft() + offset; if (position > 0 || offset > 0) { newScrollX -= scrollOffset; } if (newScrollX != lastScrollX) { lastScrollX = newScrollX; scrollTo(newScrollX, 0); } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62

---

• PagerSlidingTabStrip構造方法 
  構造方法的內容很少，基本上全是基本屬性的獲取，自定義View中經常使用的TypedArray ，記得回收recycle()，這裏關注一下 TypedValue.applyDimension方法的使用，所有轉換成px。

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 attrs a = 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(); /* 初始化矩形Paint */ rectPaint = new Paint(); rectPaint.setAntiAlias(true); rectPaint.setStyle(Style.FILL); /* 初始化分割線Paint */ dividerPaint = new Paint(); dividerPaint.setAntiAlias(true); dividerPaint.setStrokeWidth(dividerWidth); /* 是否延伸，默認WRAP_CONTENT,這種比較合理 */ 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; } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65

---

• onDraw

@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (isInEditMode() || tabCount == 0) { return; } final int height = getHeight(); // 設置Indicator顏色 rectPaint.setColor(indicatorColor); // 獲取當前選中Tab View currentTab = tabsContainer.getChildAt(currentPosition); //獲取Left,Right值 float lineLeft = currentTab.getLeft(); float lineRight = currentTab.getRight(); // if there is an offset, start interpolating left and right coordinates between current and next tab if (currentPositionOffset > 0f && currentPosition < tabCount - 1) { //結合下一個Tab獲取當前要繪製的indicator的位置,這裏的currentPositionOffset 比較關鍵，能夠看到這個值是與ViewPager相關的，在onPagerScrolled方法中，這個值在不斷的更新 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); } // 繪製Indicator canvas.drawRect(lineLeft, height - indicatorHeight, lineRight, height, rectPaint); // 繪製UnderLine rectPaint.setColor(underlineColor); canvas.drawRect(0, height - underlineHeight, tabsContainer.getWidth(), height, rectPaint); // 繪製分割線 dividerPaint.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
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43

---

• setViewPager， setOnPageChangeListener 
  一個用來與ViewPager聯動，一個用來處理自定義的OnPagerListener邏輯

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(); } public void setOnPageChangeListener(OnPageChangeListener listener) { this.delegatePageListener = listener; }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

---

3. PagerSlidingTabStrip綜合用法

• 文本指示器選中後文本大小和顏色變化 
   
  關鍵點在於實現本身的OnPagerListener

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); MainPagerAdapter mainPagerAdapter = new MainPagerAdapter(getSupportFragmentManager()); vpContent.setAdapter(mainPagerAdapter); pstsIndicator.setViewPager(vpContent); vpContent.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { updateTextStyle(position); } @Override public void onPageScrollStateChanged(int state) { } }); updateTextStyle(vpContent.getCurrentItem()); } private void updateTextStyle(int position) { LinearLayout tabsContainer = (LinearLayout) pstsIndicator.getChildAt(0); for(int i=0; i< tabsContainer.getChildCount(); i++) { TextView textView = (TextView) tabsContainer.getChildAt(i); if(position == i) { textView.setTextSize(18); textView.setTextColor(getResources().getColor(R.color.colorToolbar)); } else { textView.setTextSize(12); textView.setTextColor(getResources().getColor(R.color.colorBlack)); } } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40

---

• 圖標指示器選中圖標顏色變化 
  
  

  關鍵點在於實現本身的OnPagerListener和繼承PagerSlidingTabStrip.IconTabProvider

private void updateIconStyle(int position) {
        LinearLayout tabsContainer = (LinearLayout) pstsIndicator.getChildAt(0); for (int i = 0; i < tabsContainer.getChildCount(); i++) { ImageButton imageButton = (ImageButton) tabsContainer.getChildAt(i); imageButton.setImageTintMode(PorterDuff.Mode.SRC_IN); if (i == position) { imageButton.setImageTintList(getResources().getColorStateList(R.color.ib_color_list)); } else { imageButton.setImageTintList(getResources().getColorStateList(R.color.ib_color_list_normal)); } } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

---

---

4. 寫在最後的話 PagerSlidingTabStrip，整體來講簡潔方便，若是開發者想集成本身的一些內容，好比說Indicator改爲其餘的形狀，或者說想作到既有文字又有圖片的效果，均可以本身修改代碼來實現，比較的方便。