ViewPager2打造Banner轮播图

·  阅读 2008
ViewPager2打造Banner轮播图

效果图

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

一、如何使用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 == 0setCurrentItem(adapter.itemCount - 2, false)
currentPosition == adapter.itemCount - 1setCurrentItem(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)
            }
        }
    }
})
复制代码

三、自动滑动

  • 这里采用了viewpostDelayed方法进行实现
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(mLooper,1000)
    }else{
    //失去焦点时移除
        bannerVp.removeCallbacks(mLooper)
    }
}
复制代码
  • 原因就在上面removeCallbacks的时候要把mLooper传进去,所以单独定义出来

触摸暂停滚动

  • 我们知道触摸调用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
}
复制代码

最后

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

分类:
Android
标签:
分类:
Android
标签:
收藏成功!
已添加到「」, 点击更改