lilltezheng / viewpagerhelper

这个一个 viewpager/viewpager2工具类，能够帮你快速实现导航栏轮播图，app引导页，viewpager/viewpager2 + fragment；内置多种tab指示器，让你告别 viewpager 的繁琐操作，专注逻辑功能

你是否有遇到这样的问题，每次开发一个新的项目，在 viewpager 这一块上，总是在做重复的东西，比如app引导页，轮播图， viewpager+fragment 的 tab 指示器等等，这些虽然简单，但却是每个app都要的，而且很耗时，有没有每次在写这个，都很无语的感觉呢？ 基于这个，ViewPagerHleper 就诞生了，它可以快速帮你搞定 banner 轮播图，实现高级定制化，内置多种指示器，满足你的日常需求，妈妈再也不用担心我不会复制粘贴了。

工程实际使用 - 玩Android 客户端 : https://github.com/LillteZheng/WanAndroid

注意注意注意！！！ 提问题的时候，请遵循以下标准

• 现象: 操作步骤，应用场景
• 对应代码: 贴图或者贴代码
• 机型或版本: 可选

后面对描述不清的问题，不予理会，精力有限，感谢理解

详细内容可以参考这篇博客： http://blog.csdn.net/u011418943/article/details/78493002

使用

这里用的是 jitpack 这个网站，所以：

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

然后在你的 module 中添加：

implementation 'com.github.LillteZheng.ViewPagerHelper:viewpagerlib:v2.9'

如果你使用 androidx 也想要使用 ViewPager2，可以添加 androidx 库

implementation 'com.github.LillteZheng.ViewPagerHelper:viewpagerlibx:v2.9'

ViewPager2 使用的是 BannerViewPager2 这个类，只支持横向的 ViewPager2，竖直的后面有时间再搞 使用与 BannerViewPageer 一样，只是多了 banner2_l_margin和banner2_r_margin，或者setMzMargin() 去设置一屏多页(魅族)的效果。

效果图

首先，大家最常用到的就是轮播图了，这里给大家提供了 常用的 Indicator

轮播图

文字效果	扇形效果

CircleIndicator	RectIndicator

图片放大效果	卡片效果

跟多说明请参考 轮播使用说明

Tab指示器

TabIndicator 已经不再维护；推荐大家使用新库：https://github.com/LillteZheng/FlowHelper 支持更多效果，功能更强大，且支持自己自定义

三角形版本	条形状版本	文字颜色渐变方式，加了滚动效果

https://github.com/LillteZheng/FlowHelper 的效果如下：

没有结合ViewPager	结合ViewPager

Tab指示器使用说明

弧形图片，支持高斯模糊

弧形图片

版本说明

v2.9

• 添加 Androidx lib，支持viewpager2
• 修复card mode 快速滑报错问题

v2.7

• 处理设置 setCurrentPosition 的问题

v2.6

• 处理刷新时，indicator 成倍增加，以及动画和位置不是从头再来的问题

v2.1

• 大改动，去掉了之前很多无用代码和逻辑
• Indicator 效果全部统一到了 CircleIndicator 和 RectIndicator，其他的去掉
• BannerViewPager 增加 setCurrentPosition(int page) 默认选中第几页方法
• BannerViewPager 修复和 Recyclerview 结合，移除窗口后回来，滚动失败的问题

v1.9

• 处理TabIndicator第一次没加载数据报错和优化部分代码

v1.8

• 修改ArcImageView
• 增加缩放因子
• 增加缩放中心点坐标

v1.7

• 修改ArcImageView
• arcHeight 支持负数，凹进去，方便在user界面使用
• 增加高斯模糊，arc_blur ，对应参数0到25
• 支持使用背景色，采用arc_use_color

v1.6

• ArcImageView 去掉scaleType中的 matrix 属性

v1.5

• 修改了BannerViewpager 的一些自定说明，避免歧义，小伙伴记得更新呀
• 自定义控件，全部增加动态设置参数接口，写得好累啊
• BannerViewpager 增加了卡片式布局的效果
• 优化Readme说明

其他版本

• v1.4 --> 添加ScaleImageView可缩放控件，可支持在viewpager等滑动控件中使用
• v1.3 --> TabIndicator 支持滚动，app:tab_iscanscroll 默认true滚动，可设置不滚动
• v0.9 --> 处理第一次轮播图 index 不对问题，优化代码
• v0.8 --> 退出时自动关轮播，isOutVisiableWindow()方法，用于有滚动时，判断是否停止轮播
• v0.5 --> 增加 banner_loop_max_count 变量，当数据大于这个数值时，才会填充多个数据和轮播
• v0.4 --> 解决app引导页，快速滑动时，“立即体验”按钮会不显示问题,并修改自定义属性，防止干扰
• v0.3 --> 从lib中移除glide的依赖，防止干扰其他项目，去掉和优化一些代码，谢谢各位的提醒
• v0.2 --> 修复TabIndicator的宽度，不是 match_parent时，通过SetTabData添加数据，却显示不全的问题
• v0.1 --> 发布稳定版

QQ群

为方便大家交流，创建了一个qq群，群号216618259

如果该项目对您有帮助，赞赏一下吧 ^_^

下面可以看一下自定义的属性，方便大家在用的时候调用：

一些自定义属性：

BannerViewPager

名称	类型	说明
banner_isAutoLoop	boolean	是否自动轮播
banner_looptime	integer	轮播的时间
banner_switchtime	integer	viewpager的切换速度
banner_loop_max_count	integer	超过这个数字时，才会轮播效果
banner_card_height	integer,dimension	卡片的高度
banner_iscycle	boolean	是否循环
banner_transformer	card,mz,zoom,depath	transformer的效果
banner2_l_margin	dimension	Viewpager2专属，左边偏移量
banner2_r_margin	dimension	Viewpager2专属，右边偏移量

CircleIndicator

名称	类型	说明
cir_type	integer	效果，支持3中，normal、cirToRect、scale
cir_normalColor	color	默认的颜色
cir_selectedColor	color	选中时的颜色
cir_horizon_margin	dimension	两个小圆球的距离
cir_size	dimension	小球的大小
cir_rect_width	dimension	当type为 cirToRect时，矩形的宽度
cir_scale_factor	float	当type 为scale，放大倍数
cir_canMove	boolean	是否可移动，默认支持移动

RectIndicator

名称	类型	说明

|rect_normalColor|color|默认的颜色| |rect_selectedColor|color|选中时的颜色| |rect_horizon_margin|dimension|两个矩形的距离| |rect_width|dimension|矩形的宽度| |rect_height|dimension|矩形的高度| |rect_round_size|dimension|矩形的圆角| |rect_canMove|boolean|是否可移动，默认支持移动|

TextIndicator

其实就是一个 textview ，自己配置大小颜色和背景即可

弧形图片 ArcImageView

名称	类型	说明
arc_height	dimension	弧度的高度
arc_blur	integer	图片的模糊度，0到25
arc_use_color	color，reference	是否使用背景色
arc_scaleX	dimension	缩放中心点X方向
arc_scaleY	dimension	缩放中心点Y方向
arc_scaleFactor	float	缩放比例
arc_auto_fix	boolean	自动适配大小，如果用glide，可以忽略,默认为true

顶部viewpager指示器 TabIndicator

名称	类型	说明
visiabel_size	integer	可视化个数，比如有一排，我们就只要显示4个
tab_color	color,reference	指示器的颜色
tab_show	boolean	是否显示指示器
tab_text_type	normaltext,colortext	顶部文字的类型，nromaltext为普通的textview，corlortext为文件渐变
tab_width	dimension	指示器的宽度
tab_height	dimension	指示器的高度
tab_textsize	dimension	顶部文字的大小
tab_text_default_color	color,reference	顶部文字默认的颜色
tab_text_change_color	color,reference	移动时，顶部文字的颜色
tap_type	tri,rect	指示器类型，有三角形或者圆条
tab_iscanscroll	boolean	指示器是否支持滚动

渐变文字 ColorTextVIew

名称	类型	说明
colortext_size	dimension	文字大小
colortext_default_color	reference,color	默认颜色
colortext_change_color	reference,color	渐变颜色

缩放控件 ScaleImageView

名称	类型	说明
scale_auto_time	reference,integer	双击时，达到放大的时间
scale_limit_board	boolean	是否限制边界，即不能缩放到比控件小
scale_autofit	boolean	自动适配缩放值，有些图片是正方形，如果你的高度没设定好，建议设置为false，不能会变形
scale_double_factor	integer	双击时放大倍数
scale_max_factor	integer	可放大的最大倍数
scale_interrupt_parent_touch	boolean	是否截获父控件触摸事件，放大时，需要截取，不然无法移动

如果你有想要的效果，而本项目中没有的，你可以在 issue 中提出来，作者看到了，会抽空去实现的， 如果有发现问题了或者需要提供哪些接口出来，也可以在 issue 中提出来。当然，喜欢请 start 或 fork 来一波。

代码是最好的老师，可以download，改成自己喜欢的。

viewpagerhelper's Issues

如果只有一张图片或者两张怎么显示？一张的时候会显示三张一样的

ViewPagerHelperUtils 里面复写ScollerDE startScroll(int startX, int startY, int dx, int dy) 方法有问题

问题1：

ViewPagerHelperUtils 里面复写Scoller的
@OverRide
public void startScroll(int startX, int startY, int dx, int dy) {
super.startScroll(startX, startY, dx, time);
}

这里这个方法应该不用复写，这里time替换了dy，dy应该是垂直移动的距离。

只用复写
@OverRide
public void startScroll(int startX, int startY, int dx, int dy, int duration) {
super.startScroll(startX, startY, dx, dy, time);
}

问题2：
GlideViewpager类里面setPageListener，设置了setCurrentItem(bean.datas.size());
setCurrentItem(0); 这里应该是设置了两次，应该只需要设置setCurrentItem(0)

资源,属性名加前缀

不然容易跟其他库冲突

比如text_color,text_size改成:

另外,尽快升到gradle-plugin 3.0

CardTransformer

快速向左滑动 java.lang.IllegalArgumentException: Cannot set 'scaleX' to -Infinity, the value must be >= -3.4028235E38
com.zhengsr.viewpagerlib.anim.CardTransformer.transformPage(CardTransformer.java:28)

tab_text选中时文字大小改变

急急急！请支持viewPager2

急急急！请支持viewPager2

小米10 android11，卡片效果 没有效果，在低版本上没有问题

error

v0.9， 使用TransIndicator 会有两层indicator

recycleview中不能轮播

这是伪无限循环吗？

这是伪无限循环吗？

indicator图片自定义

indicator选中和未选中状态的图片能够分别定义就好了

mHandler内存泄露

mHandler存在内存泄露！

轮播图只有三张图片的时候初始化不正确

轮播图只有三张图片的时候初始化显示的第二张图片，指示器在第一个位置，第一次轮播的时候表现为图片从第二张到第三张，指示器直接从第一个到第三个

TransIndicator 指示器默认为圆点，当前的page的为长条。

效果如题，不清楚有没有实现该效果？

TabIndicator无法平铺

如题，tab的文字黏一起了

下拉刷新 广告banner 下面指示器成倍增加如何破啊

README.md里面的 引导页的代码函数名错了，改一下吧。

PageBean PagerBean

PageHelperListener PagerHelperListener

我直接copy的代码，调了好久，才发现是这个问题。。

只有一张图片，怎么禁止轮播图可滑动

下面这个地方应该是PageXXX，不是PagerXXX吧。README文件写的

下面这个地方应该是PageXXX，不是Pager吧。README文件写的
看一个完整的配置：

GlideViewPager viewPager = (GlideViewPager) findViewById(R.id.splase_viewpager);
ZoomIndicator zoomIndicator = (ZoomIndicator) findViewById(R.id.splase_bottom_layout);
Button button = (Button) findViewById(R.id.splase_start_btn);

    //先把本地的图片 id 装进 list 容器中
    List<Integer> images = new ArrayList<>();
    for (int i = 0; i < RES.length; i++) {
        images.add(RES[i]);

    }
    //配置pagerbean，这里主要是为了viewpager的指示器的作用，然后把最后一页的button也添加进来，注意记得写上泛型
    **PagerBean** bean = new **PagerBean**.Builder<Integer>()
            .setDataObjects(images)
            .setIndicator(zoomIndicator)
            .setOpenView(button)
            .builder();

    // 把数据添加到 viewpager中，并把view提供出来，这样除了方便调试，也不会出现一个view，多个
    // parent的问题，这里在轮播图比较明显
    viewPager.**setPagerListener**(bean, R.layout.image_layout, new **PagerHelperListener**<Integer>() {
        @Override
        public void getItemView(View view, Integer data) {
            //通过获取到这个view，你可以随意定制你的内容
            ImageView imageView = view.findViewById(R.id.icon);
            imageView.setImageResource(data);
        }
    });

能修改轮播图其他未选中的默认颜色不？

BannerView设置layout_height="wrap_content"无高度

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipChildren="false">

    <com.zhengsr.viewpagerlib.view.BannerViewPager
        android:id="@+id/loop_viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

android:layout_height="wrap_content"加载图片时无高度

更新库到v2.6 轮播问题

为什么更新库到2.6之后 进入页面轮播图不自动轮播了呢 然后进入二级页再返回首页 就开始自动轮播了 大佬 能回复下这是个什么情况吗

zsr命名空间怎么指定？

如题

请问在2.1版本里 要怎么创建PageBean呢, 之前的PageBean.Builder不能用了

请问在2.1版本里 要怎么创建PageBean呢, 之前的PageBean.Builder不能用了

思路不错 点赞

先fork下来 根据业务需求改改

为啥我写的不自动轮播？缺少什么设置吗

我的getItemView方法没有被自动调用？图片没有显示出来

ArcImageView 不支持gif的样子

bug

如果 有四个字 有2个字的 下面的 tops根本不对齐

侧拉栏 轮播图问题

侧拉栏 拉出来 轮播图 有时候会轮到播放的图 不显示了 gai
该怎么办

能否给TabIndicator配置一些属性，例如：两个标题之间的距离和设置可以滑动（类似今日头条的顶部导航栏）

在layout中设置了轮播时间，但是页面中却不会自动轮播，请问是什么原因呢

引导页Demo快速切换问题

引导页Demo快速切换时，开始体验按钮会不显示。

BannerViewPager.setCurrentPosition() 在2.6 失效了

在2.1 的时候表现正常, 可以正常改变默认显示的元素, 但是 把库升级到2.6后就无效了, 不管设置多少 都是默认显示0位置的元素.

另外请问有可以获取到 BannerViewPager当前显示item 的 position 方法吗?

请问如何让幻灯片和指示器不从第一个图片开始播放

比如有方法可以让幻灯片从第二个和第三个图开始播放的吗?

另外还有个问题是 在bannerViewPages.setPageListener 的getItemView方法里 有办法能获取到被触发的view对应的列表position吗?

谢谢.

你好，每次刷新的时候，indicator会成倍增加，这个怎么处理呢

是这么写的mBannerViewPager.addPageBean(mPageBean).addIndicator(indicator);
我改成
mBannerViewPager.addIndicator(null)
mBannerViewPager.addPageBean(mPageBean).addIndicator(indicator);
也没用，刷新一次，指示器会根据size多加几个

轮播图片之间的间距

轮播图片之间的间距能否设置？ setPageMargin

onPause 方法有问题

如题
if (!isFocused())
if (isFirst)
2个判断错了

希望尽快解决吧

还有个隐藏的比较深的 bug ，会白屏
具体操作就是下拉刷新，轮播图滑出屏幕，多操作几次，轮播图就自动变白屏

不显示按钮

pageBean = new PageBean.Builder()
.data(guide)
.openView(tv_use)
.builder();

我是这么写的，我不需要指示器

卡片叠起来的效果

怎么设置卡片有叠起来的效果的？

什么时候可以支持androidX啊

建议

建议把pager跟indicator分开成两个包，
建议暴露图片加载接口，第三方包不要硬集成