效果图
- 上图是
天津地铁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"
/>
- ③图中可以看出
item布局需要圆角，实现方案有很多，这里选择使用官方提供的ShapeableImageView实现它的圆角需要写一个style
<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"
/>
- ④我们都知道
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位和最后一位时的处理分别如下
| 位置 | 处理 |
|---|---|
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
}
最后
写作不易，如果对你有一丢丢帮助或启发，感谢点赞支持，有问题也欢迎留言交流哦！
