跟ViewHolder说再见！实现一个无限轮播图究竟有多简单？

去年8月份，我在Github开源了一个无限循环的轮播图库—BannerViewPager(以下简称BVP)。时至今日，一年多的时间过去了，BVP在大家的支持下已经在GitHub上收获了1.9k的Star。前段时间，我将BVP迁移到了Gitee，也很有幸受到了Gitee官方的认可，并得到了Gitee官方的推荐，短时间内在Gitee上收获了近120个Star。当然，能够取得这么大的成绩离不开大家的支持。

BVP最初的目标是做一个全网最好用的轮播图库，让大家用尽可能少的代码实现任意想要的效果。现在回头看看，那些吹过的牛似乎也在慢慢实现。今年四月份，BVP迎来了3.0版本的重大更新—从ViewPager迁移到了ViewPager2。在3.0版本中BVP的API向ViewPager2对齐，并且大幅优化了代码结构。使得BVP在使用上大幅简化。

而在近期的3.4.0版本中，BVP又进行了一次重要更新。这次更新使得开发者无需开发者无需再编写ViewHolder类，这一优化让BVP的使用进一步简化。那么让我们来看一下使用最新版本的BVP实现一个无限循环轮播图究竟有多简单吧。

1.gradle中添加依赖

在项目根目录的build.gradle中添加如下配置：

1
2
3
4
5
6
7
allprojects {
		repositories {
			...
			maven { url 'https://www.jitpack.io' }
		}
	}

然后在app目录下的gradle中添加依赖：

1
implementation 'com.github.zhpanvip:BannerViewPager:3.4.0'

2.继承BaseBannerAdapter,并重写相关方法

重写getLayoutId方法，并在这个方法中返回Item布局。然后重写bindData方法，在这个方法中通过BaseViewHolder进行数据绑定。

1
2
3
4
5
6
7
8
9
10
class SimpleAdapter : BaseBannerAdapter<CustomBean>() {

    override fun bindData(holder: BaseViewHolder<CustomBean>, data: CustomBean?, position: Int, pageSize: Int) {
        holder.setImageResource(R.id.banner_image, data!!.imageRes)
    }

    override fun getLayoutId(viewType: Int): Int {
        return R.layout.item_custom_view;
    }
}

3.在Activity中构建BannerViewPager

1
2
3
4
5
6
7
8
9
10
private lateinit var mViewPager: BannerViewPager<CustomBean>
...

private fun setupViewPager() {
          mViewPager = findViewById(R.id.banner_view)
          mViewPager.apply {
              adapter = SimpleAdapter()
              setLifecycleRegistry(lifecycle)
          }.create(getPicList(4))
      }

OK！到这里一个页面自动切换、无限循环且带有指示器的轮播图就完成了！没错，就是这么简单，就是这么不讲武德！！还是运行起来看下效果吧。
在这里插入图片描述

有同学可能说，这个效果太难看了。我们产品说想要一个炫酷一点的。没关系，这是一个加参(jiā)数(qián)就能解决的问题。看代码：

1
2
3
4
5
6
7
8
9
10
mViewPager.apply {
            adapter = SimpleAdapter()
            setLifecycleRegistry(lifecycle)
            setScrollDuration(800)
            setRevealWidth(resources.getDimensionPixelOffset(R.dimen.dp_15))
            setPageStyle(PageStyle.MULTI_PAGE_OVERLAP)
            setIndicatorSliderColor(getColor(R.color.red_normal_color), getColor(R.color.red_checked_color))
            setIndicatorSliderRadius(resources.getDimensionPixelOffset(R.dimen.dp_4), resources.getDimensionPixelOffset(R.dimen.dp_6))
            setIndicatorSlideMode(IndicatorSlideMode.SCALE)
        }.create(getPicList(4))

运行起来看下效果：

在这里插入图片描述

什么？产品小姐姐还不满意？没关系，现在就把BVP的文档摔到她脸上，让她 随！便！挑！包她满意。

最后欢迎大家到Github关注BVP，你的Star是给我最大的支持！

Github链接：BannerViewPager

自定义View
BVP ViewPager2

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！

qrcode