自动轮播无限循环Android库

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

 

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

 

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

 

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

 

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

 

1

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