ViewPager2打造轮播Banner

效果图

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

一、如何使用ViewPager2

• ①在app下的build.gradle文件中添加如下依赖implementation "androidx.viewpager2:viewpager2:1.0.0"<androidx.viewpager2.widget.ViewPager2 android:id="@ id/bannerVp" android:layout_width="match_parent" android:layout_height="200dp" /><style name="BannerStyle"> <item name="cornerFamily">rounded</item> <item name="cornerSize">@dimen/_10dp</item> </style>布局中引用即可代码如下<com.google.android.material.imageview.ShapeableImageView android:id="@ id/banner_image" android:layout_width="0dp" android:layout_height="match_parent" android:scaleType="fitXY" app:shapeAppearance="@style/BannerStyle" />
• ②同步之后就可以在布局中使用啦
• ③图中可以看出item布局需要圆角，实现方案有很多，这里选择使用官方提供的ShapeableImageView实现它的圆角需要写一个style
• ④我们都知道ViewPager2的适配器和RecyclerView的使用一样，这里就不贴代码了
• ⑤最后我们给ViewPager2设置上adapter即可

二、轮播图左右无线滑动

• 数据源的第一位add最后一张图val newList = arrayListOf<String>() newList.add(pic[pic.size-1])for (item in pic) { newList.add(item) } newList.add(pic[0])
• 最后一位添加第一张图
• 当ViewPager2滑动到第0位和最后一位时的处理分别如下

• 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) } } } })三、自动滑动bannerVp.postDelayed(mLooper,1000)private val mLooper = object : Runnable { override fun run() { bannerVp.currentItem = bannerVp.currentItem bannerVp.postDelayed(this,1000) } }override fun onWindowFocusChanged(hasFocus: Boolean) { super.onWindowFocusChanged(hasFocus) if (hasFocus){ bannerVp.postDelayed(counter,1000) }else{ //失去焦点时移除 bannerVp.removeCallbacks(counter) } }触摸暂停滚动bannerVp.getChildAt(0).setOnTouchListener { _, event -> when (event.action) { MotionEvent.ACTION_DOWN -> { bannerVp.removeCallbacks(mLooper) } MotionEvent.ACTION_UP -> { bannerVp.postDelayed(mLooper,1000) } } return@setOnTouchListener false }最后写作不易，如果对你有一丢丢帮助或启发，感谢点赞支持，有问题也欢迎留言交流哦！
• 这里采用了view的postDelayed方法进行实现
• mLooper是我定义的Runnable，后面会讲原因
• 滑动实现了，但启停时机也很重要 所以这里选用onWindowFocusChanged因为它在窗体失去和获得焦点的时候会通知我们
• 我们知道触摸调用setOnTouchListener即可，但是给ViewPager2使用的时候你会发现不起作用。
• ViewPager2是一个视图组，未调用setOnTouchListener是因为recyclerview拦截事件并首先调用onTouchEvent
• bannerVp.getChildAt(0)给它设置监听即可