ViewPager2打造Banner轮播图

效果图

• 上图是天津地铁APP的Banner也是本文要实现的效果

一、如何使用ViewPager2

• ①在app下的build.gradle文件中添加如下依赖

implementation "androidx.viewpager2:viewpager2:1.0.0"

• ②同步之后就可以在布局中使用啦

• ③图中可以看出item布局需要圆角，实现方案有很多，这里选择使用官方提供的ShapeableImageView实现它的圆角需要写一个style

布局中引用即可代码如下

• ④我们都知道ViewPager2的适配器和RecyclerView的使用一样，这里就不贴代码了
• ⑤最后我们给ViewPager2设置上adapter即可

二、轮播图左右无线滑动

• 数据源的第一位add最后一张图

val newList = arrayListOf()
newList.add(pic[pic.size-1])

• 最后一位添加第一张图

for (item in pic) {
    newList.add(item)
}
newList.add(pic[0])

• 当ViewPager2滑动到第0位和最后一位时的处理分别如下

位置	处理
currentPosition == 0	setCurrentItem(adapter.itemCount - 2, false)
currentPosition == adapter.itemCount - 1	setCurrentItem(1, false)

• ViewPager2添加滑动监听代码如下
  关键点在onPageScrollStateChanged方法

bannerVp.registerOnPageChangeCallback(object :
    ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        currentPosition = position
    }
    override fun onPageScrollStateChanged(state: Int) {
        //只有在空闲状态，才让自动滚动
        if (state == ViewPager2.SCROLL_STATE_IDLE) {
            if (currentPosition == 0) {
                bannerVp.setCurrentItem(adapter.itemCount - 2, false)
            } else if (currentPosition == adapter.itemCount - 1) {
                bannerVp.setCurrentItem(1, false)
            }
        }
    }
})

三、自动滑动

• 这里采用了view的postDelayed方法进行实现

bannerVp.postDelayed(mLooper,1000)

• mLooper是我定义的Runnable，后面会讲原因

private val mLooper = object : Runnable {
    override fun run() {
        bannerVp.currentItem = ++bannerVp.currentItem
        bannerVp.postDelayed(this,1000)
    }
}

• 滑动实现了，但启停时机也很重要
  所以这里选用onWindowFocusChanged因为它在窗体失去和获得焦点的时候会通知我们

override fun onWindowFocusChanged(hasFocus: Boolean) {
    super.onWindowFocusChanged(hasFocus)
    if (hasFocus){
        bannerVp.postDelayed(counter,1000)
    }else{
    //失去焦点时移除
        bannerVp.removeCallbacks(counter)
    }
}

触摸暂停滚动

• 我们知道触摸调用setOnTouchListener即可，但是给ViewPager2使用的时候你会发现不起作用。
• ViewPager2是一个视图组，未调用setOnTouchListener是因为recyclerview拦截事件并首先调用onTouchEvent
• bannerVp.getChildAt(0)给它设置监听即可

bannerVp.getChildAt(0).setOnTouchListener { _, event ->
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
           bannerVp.removeCallbacks(mLooper)
        }
        MotionEvent.ACTION_UP -> {
            bannerVp.postDelayed(mLooper,1000)
        }
    }
    return@setOnTouchListener false
}

最后

写作不易，如果对你有一丢丢帮助或启发，感谢点赞支持，有问题也欢迎留言交流哦！