[关闭]
@xujun94 2016-08-01T08:58:29.000000Z 字数 19984 阅读 1302

仿网易新闻的顶部导航指示器

我们知道，页面导航器（Navigator）在几乎所有的项目中都会用到，平时大多数时候为了节省时间，都会直接在github上面拿别人的开源项目来用，最近自己在复习自定义View，就尝试封装了一下，源码参考项目PagerSlidingTabStrip

转载请注明原博客地址：

大家先来看一下效果图

基于文字的页面导航器

基于图片的页面导航器

使用方法

主要步骤分为三步

1)在xml文件里面

  1. <com.xujun.viewpagertabindicator.TabPagerIndicator
  2.     android:id="@+id/pagerIndicator"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="50dp"/>
  6. <android.support.v4.view.ViewPager
  7.     android:layout_weight="1"
  8.     android:id="@+id/viewPager"
  9.     android:layout_width="match_parent"
  10.     android:layout_height="0dp">
  11. </android.support.v4.view.ViewPager>

2）在代码里面找到相应的控件

  1.  mPagerIndicator = (TabPagerIndicator) findViewById(R.id.pagerIndicator);
  2.  mViewPager = (ViewPager) findViewById(R.id.viewPager);

3）初始化ViewPager的Adapter和将mViewPager和我们的mPagerIndicator绑定

  1. //必须先给ViewPager设置适配器
  2. mViewPager.setAdapter(mPagerAdapter);
  3. //接着将mViewPage和我们的mPagerIndicator绑定
  4. mPagerIndicator.setViewPager(mViewPager);

注意事项

  1. public CharSequence getPageTitle(int position) {
  2.         return titles[position];
  3. }
  1. public class BaseIconAdapter extends FragmentPagerAdapter implements TabPagerIndicator.IconTabProvider {
  3.     //省略了若干方法，有兴趣可以去看一下例子
  5.     @Override
  6.     public int getPageIconResId(int position) {
  7.         return resIds[position];
  8.     }
  9. }
  1. mPagerIndicator.setIndicatorMode(TabPagerIndicator.IndicatorMode.MODE_WEIGHT_EXPAND_NOSAME,
  2.             true);

  1. mPagerIndicator.setIndicatorMode(TabPagerIndicator.IndicatorMode.MODE_WEIGHT_EXPAND_SAME,
  2.             true);

关于下划线的 颜色，字体的颜色与大小的设置，请参照源码设置，这里就不列举了

源码分析

大家先来看一下源码吧

  1. public class TabPagerIndicator extends HorizontalScrollView {
  3.     public interface IconTabProvider {
  4.         int getPageIconResId(int position);
  5.     }
  7.     // @formatter:off
  8.     private static final int[] ATTRS = new int[]{
  9.             android.R.attr.textSize,
  10.             android.R.attr.textColor
  11.     };
  12.     // @formatter:on
  14.     private LinearLayout.LayoutParams wrapTabLayoutParams;
  15.     private LinearLayout.LayoutParams expandedTabLayoutParams;
  17.     private final PageListener pageListener = new PageListener();
  18.     public OnPageChangeListener delegatePageListener;
  20.     private LinearLayout tabsContainer;
  21.     private ViewPager pager;
  23.     private int tabCount;
  24.     private static final String TAG = "xujun";
  25.     private int currentPosition = 0;
  26.     private float currentPositionOffset = 0f;
  28.     private Paint rectPaint;
  29.     private Paint dividerPaint;
  31.     private int indicatorColor = 0xFF666666;
  32.     private int underlineColor = 0x1A000000;
  33.     private int dividerColor = 0x1A000000;
  35.     //表示是否扩展
  36.     private boolean isExpand = false;
  37.     //表示下滑线的长度是否与标题字体的长度一样
  38.     private boolean isSame = false;
  39.     private boolean textAllCaps = true;
  41.     private int scrollOffset = 52;
  42.     private int indicatorHeight = 8;
  43.     private int underlineHeight = 2;
  44.     private int dividerPadding = 12;
  45.     //表示自己之间的间隔
  47.     private int horizontalPadding = 24;
  48.     private int verticalPadding = 10;
  49.     private int dividerWidth = 1;
  51.     private int tabTextSize = 12;
  52.     private int tabTextColor = 0xFF666666;
  53.     private Typeface tabTypeface = null;
  54.     private int tabTypefaceStyle = Typeface.BOLD;
  56.     private int lastScrollX = -1;
  58.     private int tabBackgroundResId = R.drawable.background_tab;
  59.     //Indicator的样式
  60.     private IndicatorMode curMode = IndicatorMode.MODE_WRAP_EXPAND_SAME;
  62.     private Locale locale;
  64.     public TabPagerIndicator(Context context) {
  65.         this(context, null);
  66.     }
  68.     public TabPagerIndicator(Context context, AttributeSet attrs) {
  69.         this(context, attrs, 0);
  70.     }
  72.     public TabPagerIndicator(Context context, AttributeSet attrs, int defStyle) {
  73.         super(context, attrs, defStyle);
  75.         setFillViewport(true);
  76.         setWillNotDraw(false);
  78.         tabsContainer = new LinearLayout(context);
  79.         tabsContainer.setOrientation(LinearLayout.HORIZONTAL);
  80.         tabsContainer.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
  81.                 LayoutParams.MATCH_PARENT));
  82.         addView(tabsContainer);
  83.         //根据IndicatorMode初始化各个变量
  84.         setIndicatorMode(curMode);
  85.         //初始化自定义属性
  86.         obtainAttrs(context, attrs);
  88.         rectPaint = new Paint();
  89.         rectPaint.setAntiAlias(true);
  90.         rectPaint.setStyle(Style.FILL);
  92.         dividerPaint = new Paint();
  93.         dividerPaint.setAntiAlias(true);
  94.         dividerPaint.setStrokeWidth(dividerWidth);
  96.         wrapTabLayoutParams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,
  97.                 LayoutParams.MATCH_PARENT);
  98.         expandedTabLayoutParams = new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f);
  100.         if (locale == null) {
  101.             locale = getResources().getConfiguration().locale;
  102.         }
  103.     }
  105.     public void setIndicatorMode(IndicatorMode indicatorMode) {
  106.         this.setIndicatorMode(indicatorMode, false);
  107.     }
  109.     public void setIndicatorMode(IndicatorMode indicatorMode, boolean isNotify) {
  110.         switch (indicatorMode) {
  111.             case MODE_WRAP_EXPAND_SAME:
  112.                 isExpand = false;
  113.                 isSame = true;
  114.                 break;
  115.             case MODE_WRAP_EXPAND_NOSAME:
  116.                 isExpand = false;
  117.                 isSame = false;
  118.                 break;
  119.             case MODE_WEIGHT_EXPAND_NOSAME:
  120.                 isExpand = true;
  121.                 isSame = false;
  122.                 break;
  123.             case MODE_WEIGHT_EXPAND_SAME:
  124.                 isExpand = true;
  125.                 isSame = true;
  126.                 break;
  127.         }
  128.         this.curMode = indicatorMode;
  129.         if (isNotify) {
  130.             notifyDataSetChanged();
  131.         }
  132.     }
  134.     private void obtainAttrs(Context context, AttributeSet attrs) {
  135.         DisplayMetrics dm = getResources().getDisplayMetrics();
  137.         scrollOffset = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, scrollOffset,
  138.                 dm);
  139.         indicatorHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
  140.                 indicatorHeight, dm);
  141.         underlineHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
  142.                 underlineHeight, dm);
  143.         dividerPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
  144.                 dividerPadding, dm);
  145.         horizontalPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
  146.                 horizontalPadding, dm);
  147.         dividerWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dividerWidth,
  148.                 dm);
  149.         tabTextSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, tabTextSize, dm);
  151.         // get system attrs (android:textSize and android:textColor)
  153.         TypedArray a = context.obtainStyledAttributes(attrs, ATTRS);
  155.         tabTextSize = a.getDimensionPixelSize(0, tabTextSize);
  156.         tabTextColor = a.getColor(1, tabTextColor);
  158.         a.recycle();
  160.         // get custom attrs
  162.         a = context.obtainStyledAttributes(attrs, R.styleable.TabPagerIndicator);
  164.         indicatorColor = a.getColor(R.styleable.TabPagerIndicator_pstsIndicatorColor,
  165.                 indicatorColor);
  166.         underlineColor = a.getColor(R.styleable.TabPagerIndicator_pstsUnderlineColor,
  167.                 underlineColor);
  168.         dividerColor = a.getColor(R.styleable.TabPagerIndicator_pstsDividerColor, dividerColor);
  169.         indicatorHeight = a.getDimensionPixelSize(R.styleable
  170.                 .TabPagerIndicator_pstsIndicatorHeight, indicatorHeight);
  171.         underlineHeight = a.getDimensionPixelSize(R.styleable
  172.                 .TabPagerIndicator_pstsUnderlineHeight, underlineHeight);
  173.         dividerPadding = a.getDimensionPixelSize(R.styleable
  174.                 .TabPagerIndicator_pstsDividerPadding, dividerPadding);
  175.         horizontalPadding = a.getDimensionPixelSize(R.styleable
  176.                 .TabPagerIndicator_pstsTabPaddingLeftRight, horizontalPadding);
  177.         tabBackgroundResId = a.getResourceId(R.styleable.TabPagerIndicator_pstsTabBackground,
  178.                 tabBackgroundResId);
  179.         isExpand = a.getBoolean(R.styleable.TabPagerIndicator_pstsShouldExpand,
  180.                 isExpand);
  181.         scrollOffset = a.getDimensionPixelSize(R.styleable.TabPagerIndicator_pstsScrollOffset,
  182.                 scrollOffset);
  183.         textAllCaps = a.getBoolean(R.styleable.TabPagerIndicator_pstsTextAllCaps, textAllCaps);
  185.         a.recycle();
  186.     }
  188.     public void setViewPager(ViewPager pager) {
  189.         this.pager = pager;
  191.         if (pager.getAdapter() == null) {
  192.             throw new IllegalStateException("ViewPager does not have adapter instance.");
  193.         }
  195.         pager.addOnPageChangeListener(pageListener);
  197.         notifyDataSetChanged();
  198.     }
  200.     public void addOnPageChangeListener(OnPageChangeListener listener) {
  201.         this.delegatePageListener = listener;
  202.     }
  204.     public void notifyDataSetChanged() {
  205.         //先移除掉所有的View ，防止重复添加
  206.         tabsContainer.removeAllViews();
  208.         tabCount = pager.getAdapter().getCount();
  210.         for (int i = 0; i < tabCount; i++) {
  211.             //区分是文字还是Icon的导航
  212.             if (pager.getAdapter() instanceof IconTabProvider) {
  213.                 addIconTab(i, ((IconTabProvider) pager.getAdapter()).getPageIconResId(i));
  214.             } else {
  215.                 addTextTab(i, pager.getAdapter().getPageTitle(i).toString());
  216.             }
  218.         }
  220.         updateTabStyles();
  221.         //监听视图树，在绘制完毕后调用相关的方法完成初始化工作
  222.         getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
  224.             @SuppressWarnings("deprecation")
  225.             @SuppressLint("NewApi")
  226.             @Override
  227.             public void onGlobalLayout() {
  229.                 if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
  230.                     getViewTreeObserver().removeGlobalOnLayoutListener(this);
  231.                 } else {
  232.                     getViewTreeObserver().removeOnGlobalLayoutListener(this);
  233.                 }
  235.                 currentPosition = pager.getCurrentItem();
  236.                 scrollToChild(currentPosition, 0);
  238.             }
  239.         });
  241.     }
  243.     private void addTextTab(final int position, String title) {
  245.         TextView tab = new TextView(getContext());
  246.         tab.setText(title);
  247.         tab.setGravity(Gravity.CENTER);
  248.         tab.setSingleLine();
  250.         addTab(position, tab);
  251.     }
  253.     private void addIconTab(final int position, int resId) {
  255.         ImageButton tab = new ImageButton(getContext());
  256.         tab.setImageResource(resId);
  258.         addTab(position, tab);
  260.     }
  262.     //添加孩子
  263.     private void addTab(final int position, View tab) {
  264.         tab.setFocusable(true);
  265.         // 设置监听
  266.         tab.setOnClickListener(new OnClickListener() {
  267.             @Override
  268.             public void onClick(View v) {
  269.                 pager.setCurrentItem(position);
  270.             }
  271.         });
  272.         // 这里我们下划线的 高度是否与文字的长度保持一致，是通过给孩子设置padding或者margin实现的
  273.         //  注意与onDraw里面的逻辑结合起来
  274.         if (!isSame) {
  275.             tab.setPadding(horizontalPadding, verticalPadding, horizontalPadding, verticalPadding);
  276.             wrapTabLayoutParams.setMargins(0, 0, 0, 0);
  277.             expandedTabLayoutParams.setMargins(0, 0, 0, 0);
  278.         } else {
  279.             wrapTabLayoutParams.setMargins(horizontalPadding, verticalPadding,
  280.                     horizontalPadding, verticalPadding);
  281.             expandedTabLayoutParams.setMargins(horizontalPadding, verticalPadding,
  282.                     horizontalPadding, verticalPadding);
  283.         }
  285.         //根据是否可以扩展来设置不同的layoutParams
  286.         tabsContainer.addView(tab, position, isExpand ? expandedTabLayoutParams :
  287.                 wrapTabLayoutParams);
  288.     }
  290.     private void updateTabStyles() {
  292.         for (int i = 0; i < tabCount; i++) {
  294.             View v = tabsContainer.getChildAt(i);
  296.             v.setBackgroundResource(tabBackgroundResId);
  298.             if (v instanceof TextView) {
  300.                 TextView tab = (TextView) v;
  301.                 tab.setTextSize(TypedValue.COMPLEX_UNIT_PX, tabTextSize);
  302.                 tab.setTypeface(tabTypeface, tabTypefaceStyle);
  303.                 tab.setTextColor(tabTextColor);
  305.                 // setAllCaps() is only available from API 14, so the upper case is made manually
  306.                 // if we are on a pre-ICS-build
  307.                 if (textAllCaps) {
  308.                     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
  309.                         tab.setAllCaps(true);
  310.                     } else {
  311.                         tab.setText(tab.getText().toString().toUpperCase(locale));
  312.                     }
  313.                 }
  314.             }
  315.         }
  317.     }
  319.     // 调用这个方法是HorizontalScrollView滑动到相应的位置
  320.     private void scrollToChild(int position, int offset) {
  322.         if (tabCount == 0) {
  323.             return;
  324.         }
  325.         int newScrollX;
  326.         View child = tabsContainer.getChildAt(position);
  327.         int left = child.getLeft();
  328.         if (isSame) {
  329.             newScrollX = left + offset - horizontalPadding;
  330.         } else {
  331.             newScrollX = left + offset;
  332.         }
  334.         if (position > 0 || offset > 0) {
  335.             newScrollX -= scrollOffset;
  336.         }
  337.         Log.i(TAG, "scrollToChild:newScrollX=" + newScrollX);
  338.         if (newScrollX != lastScrollX) {
  339.             lastScrollX = newScrollX;
  340.             scrollTo(newScrollX, 0);
  341.         }
  343.     }
  345.     @Override
  346.     protected void onDraw(Canvas canvas) {
  347.         super.onDraw(canvas);
  349.         if (isInEditMode() || tabCount == 0) {
  350.             return;
  351.         }
  353.         final int height = getHeight();
  355.         // draw indicator line
  357.         rectPaint.setColor(indicatorColor);
  359.         // default: line below current tab
  360.         View currentTab = tabsContainer.getChildAt(currentPosition);
  361.         float lineLeft = currentTab.getLeft();
  362.         float lineRight = currentTab.getRight();
  364.         // if there is an offset, start interpolating left and right coordinates between current
  365.         // and next tab
  366.         if (currentPositionOffset > 0f && currentPosition < tabCount - 1) {
  368.             View nextTab = tabsContainer.getChildAt(currentPosition + 1);
  369.             final float nextTabLeft = nextTab.getLeft();
  370.             final float nextTabRight = nextTab.getRight();
  372.             lineLeft = (currentPositionOffset * nextTabLeft + (1f - currentPositionOffset) *
  373.                     lineLeft);
  374.             lineRight = (currentPositionOffset * nextTabRight + (1f - currentPositionOffset) *
  375.                     lineRight);
  376.         }
  378.         canvas.drawRect(lineLeft, height - indicatorHeight, lineRight, height, rectPaint);
  380.         // draw underline
  382.         rectPaint.setColor(underlineColor);
  383.         canvas.drawRect(0, height - underlineHeight, tabsContainer.getWidth(), height, rectPaint);
  385.         // draw divider
  387.         dividerPaint.setColor(dividerColor);
  388.         for (int i = 0; i < tabCount - 1; i++) {
  389.             View tab = tabsContainer.getChildAt(i);
  390.             if (!isSame) {
  391.                 canvas.drawLine(tab.getRight(), dividerPadding, tab.getRight(),
  392.                         height - dividerPadding, dividerPaint);
  393.             } else {
  394.                 canvas.drawLine(tab.getRight() + horizontalPadding, dividerPadding,
  395.                         tab.getRight() + horizontalPadding, height - dividerPadding, dividerPaint);
  396.             }
  397.         }
  398.     }
  400.     private class PageListener implements OnPageChangeListener {
  402.         @Override
  403.         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  405.             currentPosition = position;
  406.             currentPositionOffset = positionOffset;
  408.             View child = tabsContainer.getChildAt(position);
  409.             int width = child.getWidth();
  411.             if (isSame) {
  412.                 width += horizontalPadding * 2;
  413.             }
  415.             Log.i(TAG, "onPageScrolled:width=" + width);
  416.             //  调用这个方法是HorizontalScrollView滑动到相应的位置
  417.             scrollToChild(position, (int) (positionOffset * width));
  418.             //调用这个方法重新绘制
  419.             invalidate();
  421.             if (delegatePageListener != null) {
  422.                 delegatePageListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
  423.             }
  424.         }
  426.         @Override
  427.         public void onPageScrollStateChanged(int state) {
  429.             if (delegatePageListener != null) {
  430.                 delegatePageListener.onPageScrollStateChanged(state);
  431.             }
  432.         }
  434.         @Override
  435.         public void onPageSelected(int position) {
  436.             if (delegatePageListener != null) {
  437.                 delegatePageListener.onPageSelected(position);
  438.             }
  439.         }
  441.     }
  443.     public void setIndicatorColor(int indicatorColor) {
  444.         this.indicatorColor = indicatorColor;
  445.         invalidate();
  446.     }
  448.     public void setIndicatorColorResource(int resId) {
  449.         this.indicatorColor = getResources().getColor(resId);
  450.         invalidate();
  451.     }
  453.     public int getIndicatorColor() {
  454.         return this.indicatorColor;
  455.     }
  457.     public void setIndicatorHeight(int indicatorLineHeightPx) {
  458.         this.indicatorHeight = indicatorLineHeightPx;
  459.         invalidate();
  460.     }
  462.     public int getIndicatorHeight() {
  463.         return indicatorHeight;
  464.     }
  466.     public void setUnderlineColor(int underlineColor) {
  467.         this.underlineColor = underlineColor;
  468.         invalidate();
  469.     }
  471.     public void setUnderlineColorResource(int resId) {
  472.         this.underlineColor = getResources().getColor(resId);
  473.         invalidate();
  474.     }
  476.     public int getUnderlineColor() {
  477.         return underlineColor;
  478.     }
  480.     public void setDividerColor(int dividerColor) {
  481.         this.dividerColor = dividerColor;
  482.         invalidate();
  483.     }
  485.     public void setDividerColorResource(int resId) {
  486.         this.dividerColor = getResources().getColor(resId);
  487.         invalidate();
  488.     }
  490.     public int getDividerColor() {
  491.         return dividerColor;
  492.     }
  494.     public void setUnderlineHeight(int underlineHeightPx) {
  495.         this.underlineHeight = underlineHeightPx;
  496.         invalidate();
  497.     }
  499.     public int getUnderlineHeight() {
  500.         return underlineHeight;
  501.     }
  503.     public void setDividerPadding(int dividerPaddingPx) {
  504.         this.dividerPadding = dividerPaddingPx;
  505.         invalidate();
  506.     }
  508.     public int getDividerPadding() {
  509.         return dividerPadding;
  510.     }
  512.     public void setScrollOffset(int scrollOffsetPx) {
  513.         this.scrollOffset = scrollOffsetPx;
  514.         invalidate();
  515.     }
  517.     public int getScrollOffset() {
  518.         return scrollOffset;
  519.     }
  521.     public void setExpand(boolean expand) {
  522.         this.isExpand = expand;
  523.         requestLayout();
  524.     }
  526.     public boolean getExpand() {
  527.         return isExpand;
  528.     }
  530.     public boolean isTextAllCaps() {
  531.         return textAllCaps;
  532.     }
  534.     public void setAllCaps(boolean textAllCaps) {
  535.         this.textAllCaps = textAllCaps;
  536.     }
  538.     public void setTextSize(int textSizePx) {
  539.         this.tabTextSize = textSizePx;
  540.         updateTabStyles();
  541.     }
  543.     public int getTextSize() {
  544.         return tabTextSize;
  545.     }
  547.     public void setTextColor(int textColor) {
  548.         this.tabTextColor = textColor;
  549.         updateTabStyles();
  550.     }
  552.     public void setTextColorResource(int resId) {
  553.         this.tabTextColor = getResources().getColor(resId);
  554.         updateTabStyles();
  555.     }
  557.     public int getTextColor() {
  558.         return tabTextColor;
  559.     }
  561.     public void setTypeface(Typeface typeface, int style) {
  562.         this.tabTypeface = typeface;
  563.         this.tabTypefaceStyle = style;
  564.         updateTabStyles();
  565.     }
  567.     public void setTabBackground(int resId) {
  568.         this.tabBackgroundResId = resId;
  569.     }
  571.     public int getTabBackground() {
  572.         return tabBackgroundResId;
  573.     }
  575.     public void setTabPaddingLeftRight(int paddingPx) {
  576.         this.horizontalPadding = paddingPx;
  577.         updateTabStyles();
  578.     }
  580.     public int getTabPaddingLeftRight() {
  581.         return horizontalPadding;
  582.     }
  584.     @Override
  585.     public void onRestoreInstanceState(Parcelable state) {
  586.         SavedState savedState = (SavedState) state;
  587.         super.onRestoreInstanceState(savedState.getSuperState());
  588.         currentPosition = savedState.currentPosition;
  589.         requestLayout();
  590.     }
  592.     @Override
  593.     public Parcelable onSaveInstanceState() {
  594.         Parcelable superState = super.onSaveInstanceState();
  595.         SavedState savedState = new SavedState(superState);
  596.         savedState.currentPosition = currentPosition;
  597.         return savedState;
  598.     }
  600.     //用来保存状态
  601.     static class SavedState extends BaseSavedState {
  602.         int currentPosition;
  604.         public SavedState(Parcelable superState) {
  605.             super(superState);
  606.         }
  608.         private SavedState(Parcel in) {
  609.             super(in);
  610.             currentPosition = in.readInt();
  611.         }
  613.         @Override
  614.         public void writeToParcel(Parcel dest, int flags) {
  615.             super.writeToParcel(dest, flags);
  616.             dest.writeInt(currentPosition);
  617.         }
  619.         public static final Creator<SavedState> CREATOR = new Creator<SavedState>() {
  620.             @Override
  621.             public SavedState createFromParcel(Parcel in) {
  622.                 return new SavedState(in);
  623.             }
  625.             @Override
  626.             public SavedState[] newArray(int size) {
  627.                 return new SavedState[size];
  628.             }
  629.         };
  630.     }
  632.     /**
  633.      * 定义4种模式
  634.      */
  635.     public enum IndicatorMode {
  636.         // 给枚举传入自定义的int值
  637.         MODE_WRAP_EXPAND_SAME(1),// 可扩展，导航线跟标题相等
  638.         MODE_WRAP_EXPAND_NOSAME(2),// 可扩展，导标不相等
  639.         MODE_WEIGHT_EXPAND_SAME(3),// 可扩展，导航线跟标题相等
  640.         MODE_WEIGHT_EXPAND_NOSAME(4);// 可扩展，导标不相等
  641.         private int value;
  643.         IndicatorMode(int value) {
  644.             this.value = value;
  645.         }
  647.         public int getValue() {
  648.             return value;
  649.         }
  650.     }
  653. }

思路主要 可以分为以下几个步骤

1）在构造方法里面初始化各种工作，包括一些自定义属性，画笔等等

  1. public TabPagerIndicator(Context context, AttributeSet attrs, int defStyle) {
  2.     super(context, attrs, defStyle);
  4.    //初始化各种工作
  7.     //根据IndicatorMode初始化各个变量
  8.     setIndicatorMode(curMode);
  9.     //初始化自定义属性
  10.     obtainAttrs(context, attrs);
  12.     rectPaint = new Paint();
  13.     rectPaint.setAntiAlias(true);
  14.     rectPaint.setStyle(Style.FILL);
  16.     dividerPaint = new Paint();
  17.     dividerPaint.setAntiAlias(true);
  18.     dividerPaint.setStrokeWidth(dividerWidth);
  21.     if (locale == null) {
  22.         locale = getResources().getConfiguration().locale;
  23.     }
  24. }

2）通过setViewPager（）这个方法将控件与ViewPager联系起来

  1. public void setViewPager(ViewPager pager) {
  2.     this.pager = pager;
  4.     if (pager.getAdapter() == null) {
  5.         throw new IllegalStateException("ViewPager does not have adapter instance.");
  6.     }
  8.     pager.addOnPageChangeListener(pageListener);
  10.     notifyDataSetChanged();
  11. }
  14. public void notifyDataSetChanged() {
  15.     //先移除掉所有的View ，防止重复添加
  16.     tabsContainer.removeAllViews();
  18.     tabCount = pager.getAdapter().getCount();
  20.     for (int i = 0; i < tabCount; i++) {
  21.         //区分是文字还是Icon的导航
  22.         if (pager.getAdapter() instanceof IconTabProvider) {
  23.             addIconTab(i, ((IconTabProvider) pager.getAdapter()).getPageIconResId(i));
  24.         } else {
  25.             addTextTab(i, pager.getAdapter().getPageTitle(i).toString());
  26.         }
  28.     }
  30.     updateTabStyles();
  31.     //监听视图树，在绘制完毕后调用相关的方法完成初始化工作
  32.     getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
  34.         @SuppressWarnings("deprecation")
  35.         @SuppressLint("NewApi")
  36.         @Override
  37.         public void onGlobalLayout() {
  39.             if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
  40.                 getViewTreeObserver().removeGlobalOnLayoutListener(this);
  41.             } else {
  42.                 getViewTreeObserver().removeOnGlobalLayoutListener(this);
  43.             }
  45.             currentPosition = pager.getCurrentItem();
  46.             scrollToChild(currentPosition, 0);
  48.         }
  49.     });
  51. }

3）在 onDraw里面根据不同的 Mode绘制不同的下划线样式

  1. @Override
  2. protected void onDraw(Canvas canvas) {
  3.     super.onDraw(canvas);
  5.     if (isInEditMode() || tabCount == 0) {
  6.         return;
  7.     }
  9.     final int height = getHeight();
  11.     // draw indicator line
  13.     rectPaint.setColor(indicatorColor);
  15.     // default: line below current tab
  16.     View currentTab = tabsContainer.getChildAt(currentPosition);
  17.     float lineLeft = currentTab.getLeft();
  18.     float lineRight = currentTab.getRight();
  20.     // if there is an offset, start interpolating left and right coordinates between current
  21.     // and next tab
  22.     if (currentPositionOffset > 0f && currentPosition < tabCount - 1) {
  24.         View nextTab = tabsContainer.getChildAt(currentPosition + 1);
  25.         final float nextTabLeft = nextTab.getLeft();
  26.         final float nextTabRight = nextTab.getRight();
  28.         lineLeft = (currentPositionOffset * nextTabLeft + (1f - currentPositionOffset) *
  29.                 lineLeft);
  30.         lineRight = (currentPositionOffset * nextTabRight + (1f - currentPositionOffset) *
  31.                 lineRight);
  32.     }
  34.     canvas.drawRect(lineLeft, height - indicatorHeight, lineRight, height, rectPaint);
  36.     // draw underline
  38.     rectPaint.setColor(underlineColor);
  39.     canvas.drawRect(0, height - underlineHeight, tabsContainer.getWidth(), height, rectPaint);
  41.     // draw divider
  43.     dividerPaint.setColor(dividerColor);
  44.     for (int i = 0; i < tabCount - 1; i++) {
  45.         View tab = tabsContainer.getChildAt(i);
  46.         if (!isSame) {
  47.             canvas.drawLine(tab.getRight(), dividerPadding, tab.getRight(),
  48.                     height - dividerPadding, dividerPaint);
  49.         } else {
  50.             canvas.drawLine(tab.getRight() + horizontalPadding, dividerPadding,
  51.                     tab.getRight() + horizontalPadding, height - dividerPadding, dividerPaint);
  52.         }
  53.     }
  54. }

4）在ViewPager滑动的时候，会调用相应的方法来刷新界面，因为前面我们在setViewPager的时候为其添加pageListener监听器

  1.  public void setViewPager(ViewPager pager) {
  2.    //省略了若干方法 
  3.     pager.addOnPageChangeListener(pageListener);
  5. }
  7. private class PageListener implements OnPageChangeListener {
  9.     @Override
  10.     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  12.         currentPosition = position;
  13.         currentPositionOffset = positionOffset;
  14.         View child = tabsContainer.getChildAt(position);
  15.         int width = child.getWidth();
  16.         if (isSame) {
  17.             width += horizontalPadding * 2;
  18.         }
  19.         Log.i(TAG, "onPageScrolled:width=" + width);
  20.         //  调用这个方法是HorizontalScrollView滑动到相应的位置
  21.         scrollToChild(position, (int) (positionOffset * width));
  22.         //调用这个方法重新绘制
  23.         invalidate();
  25.         if (delegatePageListener != null) {
  26.             delegatePageListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
  27.         }
  28.     }
  30.     @Override
  31.     public void onPageScrollStateChanged(int state) {
  33.         if (delegatePageListener != null) {
  34.             delegatePageListener.onPageScrollStateChanged(state);
  35.         }
  36.     }
  38.     @Override
  39.     public void onPageSelected(int position) {
  40.         if (delegatePageListener != null) {
  41.             delegatePageListener.onPageSelected(position);
  42.         }
  43.     }
  45. }

源码到此分析为止

题外话

1）大家在使用过程实现由什么缺陷的，希望大家能够及时告知，同时大家有空的话也可以到我的github上面start或者fork，谢谢，你们的支持就是我的最大动力

2）在接下来的日子我会尝试封装好多种效果，不过估计得忙过这阵子，因为最近在准备校招，有时候看那些算法题目，感觉世界都没爱了，哈哈，放松一下，大家有什么好的面试经验也来分享一下

源码参考项目：PagerSlidingTabStrip

我的简书主页

转载请注明原博客地址：

Github例子源码下载地址：

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注