前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ViewPager2打造Banner轮播图

ViewPager2打造Banner轮播图

作者头像
longzeqiu
发布2021-11-29 16:20:42
2.1K0
发布2021-11-29 16:20:42
举报
文章被收录于专栏:Android小知识Android小知识

效果图

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

一、如何使用ViewPager2

  • ①在app下的build.gradle文件中添加如下依赖
代码语言:javascript
复制
implementation "androidx.viewpager2:viewpager2:1.0.0"
  • ②同步之后就可以在布局中使用啦
代码语言:javascript
复制
<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/bannerVp"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    />
  • ③图中可以看出item布局需要圆角,实现方案有很多,这里选择使用官方提供的ShapeableImageView实现它的圆角需要写一个style
代码语言:javascript
复制
<style name="BannerStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">@dimen/_10dp</item>
</style>

布局中引用即可代码如下

代码语言:javascript
复制
<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最后一张图
代码语言:javascript
复制
val newList = arrayListOf<String>()
newList.add(pic[pic.size-1])
  • 最后一位添加第一张图
代码语言:javascript
复制
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方法
代码语言:javascript
复制
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方法进行实现
代码语言:javascript
复制
bannerVp.postDelayed(mLooper,1000)
  • mLooper是我定义的Runnable,后面会讲原因
代码语言:javascript
复制
private val mLooper = object : Runnable {
    override fun run() {
        bannerVp.currentItem = ++bannerVp.currentItem
        bannerVp.postDelayed(this,1000)
    }
}
  • 滑动实现了,但启停时机也很重要 所以这里选用onWindowFocusChanged因为它在窗体失去和获得焦点的时候会通知我们
代码语言:javascript
复制
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)给它设置监听即可
代码语言:javascript
复制
bannerVp.getChildAt(0).setOnTouchListener { _, event ->
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
           bannerVp.removeCallbacks(mLooper)
        }
        MotionEvent.ACTION_UP -> {
            bannerVp.postDelayed(mLooper,1000)
        }
    }
    return@setOnTouchListener false
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021/11/25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、如何使用ViewPager2
  • 二、轮播图左右无线滑动
  • 三、自动滑动
  • 触摸暂停滚动
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档