14

跟ViewHolder说再见!实现一个无限轮播图究竟有多简单? 12-27

 3 years ago
source link: https://zhpanvip.gitee.io/2020/12/27/bvp-v3-4-usage/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

去年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中添加如下配置:

allprojects {
		repositories {
			...
			maven { url 'https://www.jitpack.io' }
		}
	}

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

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

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

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

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

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!到这里一个页面自动切换、无限循环且带有指示器的轮播图就完成了!没错,就是这么简单,就是这么不讲武德!!还是运行起来看下效果吧。

m6FZJbN.gif!mobile

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

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))

运行起来看下效果:

UzIFVjY.gif!mobile

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

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

Github连接: BannerViewPager

Gitee连接 : BannerViewPager


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK