给ViewPager加上滑动条

使用网易新闻的时候，如果左右滑动页面，会发现上面的Tab下面有条红条，可以随着下面页面的滑动而滑动，用来指明当前的页面。研究了一下，发现可以使用ViewPager和自定义View来实现类似的效果。

        在使用Viewpager的时候，我们一般都会注册一个OnPageChangeListener，来看一下它的代码：
   点击( 此处 )折叠或打开

1. /**
   
2.      * Callback interface for responding to changing state of the selected page.
   
3.      */
   
4.     public interface OnPageChangeListener {
   
5. 
   
6.         /**
   
7.          * This method will be invoked when the current page is scrolled, either as part
   
8.          * of a programmatically initiated smooth scroll or a user initiated touch scroll.
   
9.          *
   
10.          * @param position Position index of the first page currently being displayed.
    
11.          * Page position+1 will be visible if positionOffset is nonzero.
    
12.          * @param positionOffset Value from [0, 1) indicating the offset from the page at position.
    
13.          * @param positionOffsetPixels Value in pixels indicating the offset from position.
    
14.          */
    
15.         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);
    
16. 
    
17.         /**
    
18.          * This method will be invoked when a new page becomes selected. Animation is not
    
19.          * necessarily complete.
    
20.          *
    
21.          * @param position Position index of the new selected page.
    
22.          */
    
23.         public void onPageSelected(int position);
    
24. 
    
25.         /**
    
26.          * Called when the scroll state changes. Useful for discovering when the user
    
27.          * begins dragging, when the pager is automatically settling to the current page,
    
28.          * or when it is fully stopped/idle.
    
29.          *
    
30.          * @param state The new scroll state.
    
31.          * @see ViewPager#SCROLL_STATE_IDLE
    
32.          * @see ViewPager#SCROLL_STATE_DRAGGING
    
33.          * @see ViewPager#SCROLL_STATE_SETTLING
    
34.          */
    
35.         public void onPageScrollStateChanged(int state);
    
36.     }

    可以看到这个接口有三个回调的方法，其中onPageScrolled方法在滑动的时候会被调用。这个方法有三个参数，看其说明可以知道 position就是当前显示第一页的序号，positionOffset是一个0到1的数，用来表示当前页滑动的位置，数值越大，就表示滑动的幅度越大。就需要通过这个方法来知道滑动的位置。

   下面需要一个自定义的View，来画这个滑动条。当onPageScrolled方法被调用的时候，我们就需要重画来定位滑动条的位置。下面是自定义VIew的代码：

点击(此处)折叠或打开

1. public class ScllorTabView extends View {
   
2. 
   
3.     private int mTabNum, mCurrentNum;
   
4.     private float mWidth, mTabWidth, mOffset;
   
5.     private final Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
   
6.     private int mBeginColor;
   
7.     private int mEndColor;
   
8.     LinearGradient gradient;
   
9. 
   
10.     public ScllorTabView(Context context, AttributeSet attrs) {
    
11.         super(context, attrs);
    
12.     }
    
13. 
    
14.     public void setTabNum(int n) {
    
15.         mTabNum = n;
    
16.     }
    
17. 
    
18.     public void setCurrentNum(int n) {
    
19.         mCurrentNum = n;
    
20.         mOffset = 0;
    
21.     }
    
22. 
    
23.     public void setOffset(int position, float offset) {
    
24.         if (offset == 0) {
    
25.             return;
    
26.         }
    
27.         mCurrentNum = position;
    
28.         mOffset = offset;
    
29.         invalidate();
    
30.     }
    
31. 
    
32.     @Override
    
33.     protected void onDraw(Canvas canvas) {
    
34.         super.onDraw(canvas);
    
35.         if (mTabWidth == 0) {
    
36.             mWidth = getWidth();
    
37.             mTabWidth = mWidth / mTabNum;
    
38.         }
    
39.         //根据位置和偏移量来计算滑动条的位置
    
40.         float left = (mCurrentNum + mOffset) * mTabWidth;
    
41.         final float right = left + mTabWidth;
    
42.         final float top = getPaddingTop();
    
43.         final float bottom = getHeight() - getPaddingBottom();
    
44. 
    
45.         // if (gradient == null) {
    
46.         LinearGradient gradient = new LinearGradient(left, getHeight(), right,
    
47.                 getHeight(), mBeginColor, mEndColor, Shader.TileMode.CLAMP);
    
48.         mPaint.setShader(gradient);
    
49.         // }
    
50.         canvas.drawRect(left, top, right, bottom, mPaint);
    
51.     }
    
52. 
    
53.     public void setSelectedColor(int color, int color2) {
    
54.         mBeginColor = color;
    
55.         mEndColor = color2;
    
56. 
    
57.     }
    
58. }

    其中LinearGradient是用来设置渐变色的，也可以去掉。最后只需要加上调用更新的代码就可以了：

点击(此处)折叠或打开

1. @Override
   
2.             public void onPageScrolled(int position, float positionOffset,
   
3.                     int positionOffsetPixels) {
   
4.                 mScllorTabView.setOffset(position, positionOffset);
   
5.             }

    好了，来看一下实现的效果吧