如何实现带滚动前剩余时间显示的Android ViewPager自动滚动指示器

云上老周

2026-9-26

带自动滚动倒计时进度的ViewPager指示器实现方案

无第三方依赖自定义实现

自定义容器控件，每个页面对应一个横向进度条，默认进度为0
绑定ViewPager页面切换监听，页面选中时启动对应进度条的线性属性动画，动画时长和你设置的自动滚动间隔完全一致
动画自然结束时触发ViewPager切页逻辑，切页后重置上一个进度条进度，启动下一个选中页的进度动画
处理手动滑动场景：用户手指按下ViewPager时暂停当前动画，手指抬起后从当前进度继续剩余时长的动画

核心代码示例：

// autoScrollDuration为你配置的自动滚动间隔，单位毫秒
private fun launchPageCountdown(currentPosition: Int) {
    // 清空上一轮动画
    countdownAnim?.cancel()
    // 重置所有进度条状态
    progressList.forEach { it.progress = 0 }
    
    countdownAnim = ValueAnimator.ofInt(0, 100).apply {
        duration = autoScrollDuration
        interpolator = LinearInterpolator()
        addUpdateListener { anim ->
            progressList[currentPosition].progress = anim.animatedValue as Int
        }
        addListener(object : Animator.AnimatorListener {
            override fun onAnimationEnd(p0: Animator?) {
                // 自动切到下一页，超过总页数时回到第一页
                viewPager.currentItem = (currentPosition + 1) % totalPageCount
            }
            override fun onAnimationStart(p0: Animator?) = Unit
            override fun onAnimationCancel(p0: Animator?) = Unit
            override fun onAnimationRepeat(p0: Animator?) = Unit
        })
        start()
    }
}