自动轮播无限循环Android库

最新推荐文章于 2024-08-09 07:25:55 发布

Bue_Sky

最新推荐文章于 2024-08-09 07:25:55 发布

阅读量1k

点赞数

分类专栏： Android 文章标签： Android 轮播

本文链接：https://blog.csdn.net/Bue_Sky/article/details/103579667

版权

本文介绍了BannerViewPager，一个高度可定制的Android轮播库，支持多种样式和任意指示器布局。通过设置不同的参数，可以实现如一屏三页、自定义指示器样式等功能。同时，文章探讨了轮播库的实现细节，包括如何在手指滑动时暂停自动轮播，如何处理页面滑动的平滑性问题，以及优化instantiateItem的方法。 BannerViewPager源码可在GitHub找到。

摘要由CSDN通过智能技术生成

最近公司项目在升级AndroidX，由于项目中用到的一些比较老的库都已停止更新维护，因此需要将这些库替换掉，其中就包括自动轮播的Banner库。

恰逢笔者在之前写过一个轮播图，因此就在此基础上重构，打造出了一个全新的支持多种样式的轮播库---BannerViewPager。

https://github.com/zhpanvip/BannerViewPager/

BannerViewPager拥有简洁高效的代码，更是因为它高度的可定制性。BannerViewPager不仅支持任意的页面布局，而且可以支持任意的Indicator样式。

甚至连Indicator的位置都可以做到任意摆放。是的，就是这么随心所欲。无图言叼，还是先通过图片和代码一览BannerViewPager的功能吧(多图预警)。

BannerViewPager效果预览及API介绍

由于GIF图片质量问题，下面的预览图并不清晰，大家可以点击下面链接或者扫描二维码下载Apk体验。Apk存放在github上，下载速度可能会比较慢。

https://github.com/zhpanvip/BannerViewPager/raw/master/download/app.apk

1. setIndicatorStyle（开局就放王炸？）

BannerViewPager目前内置了CIRCLE和DASH两种样式的指示器,通过setIndicatorStyle(int)一行代码就可以切换指示器的样式。当然，如果内置样式不满足你的需求。

BannerViewPager还提供了自定义指示器的功能。只要继承BaseIndicatorView或者实现IIndicator接口，并重写相应方法，就可以通过自定义View为所欲为的打造任意的Indicator了。

如下图【自定义】就是自己实现的指示器样式。

Circle:

Dash

自定义

下面通过代码演示如何切换指示器：

mViewPager.setIndicatorStyle(IndicatorStyle.DASH)
  .setIndicatorHeight(BannerUtils.dp2px(3f))
  .setIndicatorWidth(BannerUtils.dp2px(3), BannerUtils.dp2px(10))
  .setHolderCreator(() -> new ImageResourceViewHolder(0))
  .create(mDrawableList)

通过5行代码就轻松的实现了上图【Dash】仿支付宝的Indicator样式（大家可以留意一下支付宝的轮播Indicator，挺有意思）。

关于自定义IndicatorView将会放在后边章节详细讲解。

2.setPageStyle

通过setPageStyle(int)一行代码开启一屏三页模式，一屏三页模式下目前有三种样式，分别如下图所示：

Multi Page

Multi Page Scale

Multi Page Overlap

代码演示：

mViewPager.setPageStyle(PageStyle.MULTI_PAGE)
  .setPageMargin(BannerUtils.dp2px(10))
  .setRevealWidth(BannerUtils.dp2px(10))
  .setHolderCreator(() -> new ImageResourceViewHolder(BannerUtils.dp2px(5)))
  .create(mDrawableList);

同样通过短短5行代码就实现了上图【MULTI_PAGE】的效果，简单好用！

3.如何实现指示器位置任意摆放？

我们看到上面图表中MULTI_PAGE_OVERLAP模式下指示器显示到了Banner的下边。这种效果该怎么实现呢？

其实BannerViewPager是支持把Indicator摆放在任意位置的。

之所以能如此强大是因为我们通过自定义指示器替换了内置的IndicatorView，也就是说此时的IndicatorView已经脱离了BannerViewPager,也就理所当然的可以放在任意位置了。

接下来通过代码来看下如何实现：

(1)Xml布局文件如下

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.zhpan.bannerview.BannerViewPager
        android:id="@+id/banner_view"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:layout_marginTop="20dp"
        app:bvp_page_style="multi_page" />

    <com.zhpan.bannerview.indicator.CircleIndicatorView
        android:id="@+id/indicator_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/banner_view"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp" />
 </RelativeLayout>

(2)通过setIndicatorView(IIndicator)替换内部指示器

CircleIndicatorView indicatorView = findViewById(R.id.indicator_view);
mViewPager.setIndicatorView(indicatorView)
    .setIndicatorColor(Color.parseColor("#888888"),
         Color.parseColor("#118EEA"))
    .setHolderCreator(() -> new ImageResourceViewHolder(BannerUtils.dp2px(5)))
    .create(mDrawableList);

CircleIndicatorView是什么？

其实他就是内置在BannerViewPager中的指示器，现在你只需要把它同BannerViewPager放在同一个布局文件中就可以了。又是仅仅通过一行代码就完成了对内部指示器的替换，不知道你看完之后是否会拍案叫绝，竟然如此简单！

注：2.5.0版本中CircleIndicatorView与DashIndicatorView已被弃用，可以用IndicatorView来替代这两个指示器。IndicatorView承载了CIRCLE与DAS