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>

自定义后的效果图:

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值