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

        转载请标明原地址：Android实战之 自定义GitHub开源项目ViewPagerIndicator_高磊的专栏-CSDN博客

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

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

   <!--看清了android:theme是最重要的,在StyledIndicators2中自定义开源项目ViewPagerIndicator-->
        <activity android:name=".MainActivity"
            android:theme="@style/StyledIndicators2">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

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

<style name="StyledIndicators2" parent="@style/Theme.AppCompat.Light.NoActionBar">
        <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator2</item>
        <item name="vpiUnderlinePageIndicatorStyle">@style/CustomUnderlinePageIndicator2</item>
    </style>

<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
        <item name="android:background">#00000000</item>
        <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
        //这里是设置文本选中变色
        <item name="android:textColor">@drawable/selector_tabtext</item>
        <!--<item name="android:textColor">@color/contentTitleColor</item>-->
        <item name="android:textSize">16sp</item>
        //这里是设置文本间分割线
        <item name="android:divider">@drawable/custom_tab_indicator_divider</item>
        <item name="android:dividerPadding">10dp</item>
        <item name="android:showDividers">middle</item>
        <item name="android:paddingTop">8dp</item>
        <item name="android:paddingBottom">8dp</item>
        <item name="android:paddingLeft">8dp</item>
        <item name="android:paddingRight">8dp</item>
        <item name="android:fadingEdge">horizontal</item>
        <item name="android:fadingEdgeLength">8dp</item>
    </style>

style name="CustomUnderlinePageIndicator2">
        //这里是设置滑动线颜色
        <item name="selectedColor">@color/problem_feedback_circle_bg</item>
        //这里是设置滑动线背景
        <item name="android:background">#00000000</item>
        //这里是设置滑动线padding
        <item name="android:paddingLeft">16dp</item>
        <item name="android:paddingRight">16dp</item>
        <item name="fadeLength">1000</item>
        <item name="fadeDelay">1000</item>
    </style>

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

   

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

<span style="font-size:14px;"> 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);
    }</span>

自定义后的效果图：

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