• 当从第一个页面手指向左滑动，页面向右时，第一个页面对应的指示符宽度由大->小，最后一个对应的指示符宽度由小->大，其余指示符向左平移，有联动效果。

代码实现

TKBanner

实现无限轮播图功能，默认支持圆点和数字指示符。

| 仿知乎日报 APP 轮播图 | 仿品玩 APP 轮播图 | 仿虎嗅 APP 轮播图

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

CuteIndicator

自定义 View，实现 ViewPager 页面滑动过程中指示符切换动画效果。

相关属性

关键代码

• 覆盖onMeasure方法，计算设置指示符宽度和高度。目前没有根据测量模式去判断计算，简单的计算指示符总宽度=(指示符数量-1)*(未选中指示符宽度+指示符之间的间隔)+选中指示符的宽度，此处还有很多优化空间。

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {super.onMeasure(widthMeasureSpec, heightMeasureSpec)if(mIndicatorCount>0) {val width = ((mIndicatorCount - 1) * (mIndicatorMargin + mIndicatorWidth) + mIndicatorSelectedWidth).toInt()setMeasuredDimension(width, mIndicatorHeight.toInt())}}

• 覆盖onDraw方法,绘制指示符，针对第一个页面和最后一个页面滑动时特别处理。

override fun onDraw(canvas: Canvas) {super.onDraw(canvas)if (mIndicatorCount <= 0) {return}var left=0fvar right=0fif (position == (mIndicatorCount - 1) && positionOffset > 0f) {for (i in 0 until mIndicatorCount) {if(i==0){left=0fright=left+mIndicatorWidth+(mIndicatorSelectedWidth - mIndicatorWidth) * positionOffsetmIndicatorPaint.color = ColorUtils.blendARGB(mIndicatorColor, mIndicatorSelectedColor, positionOffset)}else if(i<position){right=left+mIndicatorWidthmIndicatorPaint.color = mIndicatorColor}else if(i==position){right=i*(mIndicatorWidth+mIndicatorMargin)+mIndicatorSelectedWidthmIndicatorPaint.color = ColorUtils.blendARGB(mIndicatorColor, mIndicatorSelectedColor, 1-positionOffset)}canvas.drawRoundRect(RectF(left, 0f, right, mIndicatorHeight), mIndicatorWidth / 2, mIndicatorWidth / 2, mIndicatorPaint)left=right+mIndicatorMargin}} else {for (i in 0 until mIndicatorCount) {if (i < position) {left = i * (mIndicatorWidth + mIndicatorMargin)right = left + mIndicatorWidthmIndicatorPaint.color = mIndicatorColor} else if (i == position) {left = i * (mIndicatorWidth + mIndicatorMargin)right = left + mIndicatorWidth + (mIndicatorSelectedWidth - mIndicatorWidth) * (1 - positionOffset)mIndicatorPaint.color = ColorUtils.blendARGB(mIndicatorColor, mIndicatorSelectedColor, 1 - positionOffset)} else if (i == (position + 1)) {left = (i - 1) * (mIndicatorMargin + mIndicatorWidth) + mIndicatorWidth + (mIndicatorSelectedWidth - mIndicatorWidth) * (1 - positionOffset) + mIndicatorMarginright = i * (mIndicatorMargin + mIndicatorWidth) + mIndicatorSelectedWidthmIndicatorPaint.color = ColorUtils.blendARGB(mIndicatorColor, mIndicatorSelectedColor, positionOffset)} else {