Android实战之 自定义GitHub开源项目ViewPagerIndicator

        转载请标明原地址：http://blog.csdn.net/gaolei1201/article/details/50421104

        ViewPager是项目中比较常用的，如果你想实现一些酷炫的效果，可以了解一下开源项目ViewPagerIndicator，地址：https://github.com/JakeWharton/ViewPagerIndicator 。但是它的例子可能不能满足你的需求，那么你可以自定义。下面把我的经验和大家分享一下。

通过Activity的theme来自定义ViewPager的切换效果，代码如下：

vpi_style.xml展示style样式，代码如下：

style name="CustomUnderlinePageIndicator2">
        //这里是设置滑动线颜色
        @color/problem_feedback_circle_bg
        //这里是设置滑动线背景
        #00000000
        //这里是设置滑动线padding
        16dp
        16dp
        1000
        1000
    

我们可能还需要自定义滑动条的宽度，CustomUnderlinePageIndicator2 中paddingLeft和paddingRight 指的是滑动条距离屏幕左右的距离，滑动条的效果比较长，可能我们想要改进一下，如下图：

   

我们可以自定义滑动条的宽度，在UnderlinePageIndicator中设置，主要代码如下：

 protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (mViewPager == null) {
            return;
        }
        final int count = mViewPager.getAdapter().getCount();
        if (count == 0) {
            return;
        }

        if (mCurrentPage >= count) {
            setCurrentItem(count - 1);
            return;
        }
       /* 1. //这里获取CustomUnderlinePageIndicator 中paddingLeft、paddingRight值
        //paddingLeft、paddingRight默认是指示条句屏幕左右，那么指示条就会显得比较长
        final int paddingLeft = getPaddingLeft();
        //这是根据title的个数获取，指示条的宽度
        final float pageWidth = (getWidth() - paddingLeft - getPaddingRight()) / (1f * count);
        final float left = paddingLeft + pageWidth * (mCurrentPage + mPositionOffset);
        final float right = left + pageWidth;
        final float top = getPaddingTop();
        final float bottom = getHeight() - getPaddingBottom();*/


        // 2.这里获取CustomUnderlinePageIndicator 中paddingLeft、paddingRight值
       //paddingLeft、paddingRight我们自定义想让它为平分后距离左右边缘的距离，这么指示条的宽度我们就可以自定义了，自己可多尝试
        final int paddingLeft = getPaddingLeft();
        final int paddingRight = getPaddingRight();
       // 这是根据title的个数获取，指示条的宽度
        final float pageWidth = (getWidth()) / (1f * count);
        final float left = paddingLeft + pageWidth * (mCurrentPage + mPositionOffset);
        final float right = left + pageWidth - paddingLeft - paddingRight;
        final float top = getPaddingTop();
        final float bottom = getHeight() - getPaddingBottom();
        canvas.drawRect(left, top, right, bottom, mPaint);
    }

自定义后的效果图：

                   项目源码，点击下载......