viewpager 的工具类，内置多种指示器，能够帮你快速完成，轮播图，app 引导页，viewpager 的 tab 指示器等等

ViewPagerHelper

项目地址：LillteZheng/ViewPagerHelper

简介：这是一个，viewpager 的工具类，内置多种指示器，能够帮你快速完成，轮播图，app 引导页，viewpager 的 tab 指示器等等

更多：作者提 Bug

标签：

viewpager-

你是否有遇到这样的问题，每次开发一个新的项目，在 viewpager 这一块上，总是在做重复的东西，比如 app 引导页，轮播图， viewpager+fragment 的 tab 指示器等等，这些虽然简单，但却是每个 app 都要的，而且很耗时，有没有每次在写这个，都很无语的感觉呢？

基于上面这种情况，ViewPagerHelper 就诞生了。ViewPagerHelper 是一个能快速帮你的完成 app 引导页，轮播，和 viewpager 指示器的工具，内面内置了常用属性，满足你日常对油腻的师姐的一切幻想，解放你的双手，释放你的灵魂。。。。。

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

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

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

然后在你的 module 中添加：

compile 'com.github.LillteZheng:ViewPagerHelper:v0.9'

版本迭代

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

效果图

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

1、轮播图

第一种

第二种

第三种

第四种

使用图片轮播，你需要以下几个步骤和需要注意的地方：

注意： 使用轮播图，如果设置动画自动启动，可以使用 stopAnim() 和 startAnim() 关闭和启动动画，如果退出，动画会自动退出，所以不用担心后台继续运行的问题；当视图可以滚动时，可以使用 isOutVisiableWindow() 方法，判断轮播图是否已经超过了可视界面，从而去停止它。

步骤一，配置布局，把 BannerViewPager 和指示器弄上，这里我用放大的 Indicator

它的父布局是一个 RelativeLayout，如果要上面魅族的放大效果，需要在父布局加上 clipChildren="false" 属性，然后配置你想要的自定义属性即可。

<com.zhengsr.viewpagerlib.view.BannerViewPagerandroid:id="@+id/loop_viewpager"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"zsr:banner_isloop="true"zsr:banner_looptime="3000"zsr:banner_switchtime="600" /><com.zhengsr.viewpagerlib.indicator.ZoomIndicatorandroid:id="@+id/bottom_scale_layout"android:layout_width="wrap_content"android:layout_height="30dp"android:layout_gravity="bottom|right"android:layout_marginRight="20dp"android:gravity="center"zsr:zoom_alpha_min="0.5"zsr:zoom_leftmargin="10dp"zsr:zoom_max="1.5"zsr:zoom_selector="@drawable/bottom_circle" />

其中 bottom_circle，只是一个白色的 shape 圆球，你也可以不自己写，默认就是白色的白球放大缩小。 demo 中的 layout 参看这里：https://raw.githubusercontent.com/LillteZheng/ViewPagerHelper/master/app/src/main/res/layout/activity_loop.xml

步骤二，填充轮播的数据，比如 url 或者 resId

配置数据,这里的 LoopBean，是我定义的类，用来显示图片和文字,(如果只有图片，可以用 String，也可以用 integer 类型)

        List<LoopBean> loopBeens = new ArrayList<>();for (int i = 0; i < TEXT.length; i++) {LoopBean bean = new LoopBean();bean.url = RESURL[i];bean.text = TEXT[i];loopBeens.add(bean);}

步骤三，配置 PageBean，设置指示器和数据

配置 PageBean，PageBean 是必须要添加的，主要是为了 viewpager 的指示器的作用，注意记得写上泛型.这里为上面的 LoopBean

PageBean bean = new PageBean.Builder<LoopBean>().setDataObjects(loopBeens).setIndicator(zoomIndicator).builder();

设置 viewpager 的动画(可不设)，这里提供了三种，分别是 MzTransformer，ZoomOutPageTransformer, 和 DepthPageTransformer，可以体验一下,这里可有可无，这里我设置了魅族的效果，这样加上弧形的图片更好看。

mBannerCountViewPager.setPageTransformer(false,new MzTransformer());

步骤四，监听数据

view 的接口提供出来，供大家自行配置，这样的好处在于，实用性更高，你可以添加 gif，或者视频，或者简单的图片,这里我用 glide 去加载图片的 url。 记得也在 PageHelperListener 加泛型，这样 getItemView 的数据就是你泛型的数据了

mBannerCountViewPager.setPageListener(bean, R.layout.loop_layout, new PageHelperListener<LoopBean>() {@Overridepublic void getItemView(View view, LoopBean data) {ImageView imageView = view.findViewById(R.id.loop_icon);imageView.setImageResource(data.res);TextView textView = view.findViewById(R.id.loop_text);textView.setText(data.text);//如若你要设置点击事件，也可以直接通过这个 view 来设置，或者图片的更新等等}});

其中，R.layout.loop_layout 为你的 banner item 布局,为什么要单独再添加一个 layout 呢？一时方便自定义，二是如果指定在 viewpager 写布局，容易出现 parent 冲突的问题；

demo 中的 activity 代码参考下面的链接：https://raw.githubusercontent.com/LillteZheng/ViewPagerHelper/master/app/src/main/java/com/zhengsr/viewpagerhelper/activity/LoopActivity.java

如果你要使用弧形图片，可以用 ArcImageView 这个控件，可以这样配置：

 <!--弧形图片，arc_height 为弧度的高度--><com.zhengsr.viewpagerlib.view.ArcImageViewandroid:id="@+id/arc_icon"android:layout_width="match_parent"android:layout_height="match_parent"app:arc_height="15dp"android:scaleType="centerCrop"/>

2、Tab 指示器

第一种

第二种，条形状的版本

第三种，文字颜色渐变的方式

这里的配置就更简单了，关键就是这个 TabIndicator 了，可以选择你想要的属性，上面三种效果都集中在 TabIndicator 了，详细可以下载 demo 查看。

xml 的配置

<com.zhengsr.viewpagerlib.indicator.TabIndicatorandroid:id="@+id/line_indicator"android:layout_width="match_parent"android:layout_height="50dp"android:background="@color/black_ff"app:tab_color="@color/white"app:tab_width="25dp"app:tab_height="5dp"app:tab_text_default_color="@color/white_ff"app:tab_text_change_color="@color/white"app:tab_show="true"app:tab_text_type="normaltext"app:tab_textsize="16sp"app:visiabel_size="3"app:tap_type="tri"></com.zhengsr.viewpagerlib.indicator.TabIndicator><ViewPage..../>

你可以通过这些属性，自由配置三角形，条状，或者只使用文字颜色变化，自定义属性的名字跟它的功能一样。

代码这样配置：

    /*** 把 TabIndicator 跟 viewpager 关联起来*/TabIndicator tabIndecator = (TabIndicator) findViewById(R.id.line_indicator);// 设置 viewpager 的切换速度，这样点击的时候比较自然tabIndecator.setViewPagerSwitchSpeed(viewPager,600);tabIndecator.setTabData(viewPager,mTitle, new TabIndicator.TabClickListener() {@Overridepublic void onClick(int position) {//顶部点击的方法公布出来viewPager.setCurrentItem(position);}});

这样，一个比较好用的 viewpager 加指示器的方式就完成了。

app 首次启动引导页

如果你要使用引导页，也是非常简单，只需要使用 GlideViewPager 即可。配置与上面基本一致，只需要三部，我们就可以实现引导图；小看效果

看一个完整的配置：

 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.setPageListener(bean, R.layout.image_layout, new PagerHelperListener<Integer>() {@Overridepublic void getItemView(View view, Integer data) {//通过获取到这个 view，你可以随意定制你的内容ImageView imageView = view.findViewById(R.id.icon);imageView.setImageResource(data);}});

xml 的配置如下：

<com.zhengsr.viewpagerlib.view.GlideViewPagerandroid:id="@+id/splase_viewpager"android:layout_width="match_parent"android:layout_height="match_parent"/><Buttonandroid:id="@+id/splase_start_btn"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_marginLeft="100dp"android:layout_marginRight="100dp"android:layout_marginBottom="50dp"android:background="@drawable/glide_bottom_btn_bg"android:textColor="@color/white"android:text="@string/start"android:textSize="18sp"android:visibility="gone"/><com.zhengsr.viewpagerlib.indicator.ZoomIndicatorandroid:id="@+id/splase_bottom_layout"android:layout_alignParentBottom="true"android:layout_width="match_parent"android:layout_height="50dp"android:gravity="center"zsr:zoom_selector="@drawable/bottom_circle"zsr:zoom_leftmargin="10dp"zsr:zoom_max="1.5"zsr:zoom_alpha_min="0.4"zsr:zoom_dismiss_open="true"android:orientation="horizontal"/>

可以就可以了，其实就是 viewpager 跟 indicator 指示器的配合。

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

一些自定义属性：

BannerViewPager

名称	类型	说明
banner_isloop	boolean	是否自动轮播
banner_looptime	integer	轮播的时间
banner_switchtime	integer	viewpager 的切换速度
banner_loop_max_count	integer	超过这个数字时，才会轮播效果

ZoomIndicator

名称	类型	说明
zoom_selector	reference	selecotr，一般就一个圆点即可
zoom_leftmargin	dimension	两个圆点之间的间距
zoom_max	float	小圆点放大的倍数
zoom_alpha_min	float	小圆点缩小的倍数
zoom_dismiss_open	boolean	做引导页的最后一页，是否隐藏圆点

NormalIndicator

名称	类型	说明
normal_selector	reference	selecotr，一般就一个圆点即可-
normal_leftmargin	dimension	两个圆点之间的间距
normal_dismiss_open	boolean	做引导页的最后一页，是否隐藏圆点

TransIndicator

名称	类型	说明
trans_width	dimension	指示器宽度
trans_height	dimension	指示器高度
trans_defaultcolor	color,reference	指示器默认的颜色
trans_leftmargin	dimension	两个圆点之间的间距
trans_movecolor	color,reference	指示器移动的颜色
trans_dismiss_open	boolean	做引导页的最后一页，是否隐藏圆点
trans_round_radius	dimension	矩形圆角
trans_type	round,circle	矩形圆角

TextIndicator

名称	类型	说明
word_show_circle	boolean	是否显示外援的圆圈
word_circle_color	reference,color	圆圈的颜色
word_text_color	reference,color	文字颜色
word_text_size	reference	文字大小

弧形图片 ArcImageView

名称	类型	说明
arc_height	dimension	弧度的高度

顶部 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	指示器类型，有三角形或者圆条

渐变文字 TextIndicator

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

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

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