PagerSlidingTabStrip从头到脚.doc

PagerSlidingTabStrip从头到脚简单使用添加库依赖dependencies compile com.astuetz:pagerslidingtabstrip:1.0.1定义布局文件 关联ViewPagerpublic 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); 结果后话 看到这个效果，是不是很炸裂，如此的丑陋，上图是什么属性都没有修改默认的效果图，接着我们看下源码，看下可以从哪方面来进行改造。 源码解析这个开源库，简单点说就是大家都非常熟悉的自定义View，所以，解读的方式可以从自定义属性到此视图的构造，onMeasure,onLayout, onDraw等等1. 自定义的属性值 类中使用到的变量，大部分都是和自定义属性挂钩的，主要关注几个IconTabProvider 类中比较关键的一些内容，接口IconTabProvider，ViewPager对应的Adapter实现该方法并返回每个ViewPager对应的图标即可实现图标指示器。PageListener 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 != ull) 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); 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; 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); setViewPager， setOnPageChangeListener 一个用来与ViewPager联动，一个用来处理自定义的OnPagerListener逻辑public void setViewPager(ViewPager pager) this.pager = ager; 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; 关键点在于实现自己的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) pstsIndicat