作者：夏至，欢迎转载，也请保留这段申明，谢谢

blog.csdn.net/u011418943/…

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

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

How to use

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

allprojects {repositories {...maven { url 'https://jitpack.io' }}}123456复制代码

然后在你的 module 中添加：

compile 'com.github.LillteZheng:ViewPagerHelper:v0.1'1复制代码

裤子也脱了，那么现在就是看装逼图的时候，毕竟这是个看脸的世界。

效果图

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

1、轮播图

第一个，仿魅族的轮播图，加底部放大圆点：

这里解释一下底部圆点放大的原理，其实非常简单，就是用一个 shade，里面配置成 圆点，然后在代码中去设置透明度和放大缩小，就是这么简单；小伙伴们可以先按照这个思路自己做一下，或者可以下载代码验证一下。

第二个，现在比较流行的弧形图片

这个是比较流行的，像淘宝，京东这些，都用了这个；这个弧形imageview 呢，也很简单，相信学习过抛物线大神的自定义专栏，这个马上就能想到了用什么方法了；没错，就是用 BitmapShader,对图片进行裁剪，所以，我们可以用 path 把要绘制的形状弄出来，再用 BitmapShader 对图片进行裁剪即可。

如果你要使用弧形图片，可以用 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"/>1234567复制代码

第三个，底部指示器是移动的，看起来比较舒服

TransIndicator 提供了两种，一个是如图的椭圆形，还是就是圆点，可以选择自己喜欢的。它的原理呢，其实也不难，就是先写好4个小圆条，然后再绘制白色的圆条，再根据 viewpager 的 onPageScrolled 获取距离的变化，改变 canvas.translate 的绘制位置即可。

第四个，底部指示器文字版本

有些 app 也用文字的方式，这里也提供了一种，文字外面的圆圈可以取消。颜色什么的自行定义。

轮播功能配置

那么，想要使用上面那几个样式配置呢？很简单，你需要三步：
step1：

配置数据，这里把 url 或者本地的 resid 的封装到list中，因为我们一般是解析了gson之后，获取图片和文字说明的，所以，这里就用 list 吧。

        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);}12345678复制代码

step2：
配置PageBean，这里主要是为了viewpager的指示器的作用，注意记得写上泛型.这里为上面的LoopBean，如果你只是 String，就上鞋 url，如果是res，就协商 integer。

PageBean bean = new PageBean.Builder<LoopBean>().setDataObjects(loopBeens).setIndicator(zoomIndicator).builder();1234复制代码

设置viewpager的动画，这里提供了三种，分别是MzTransformer，ZoomOutPageTransformer, 和DepthPageTransformer，前者会魅族商城的方式，后者为 google 提供默认的两种动画，可以体验一下,这里可有可无，这里我设置了魅族的效果，这样加上弧形的图片更好看。

mBannerCountViewPager.setPageTransformer(false,new MzTransformer());1复制代码

step3：

view 的接口提供出来，供大家自行配置，这样的好处在于，实用性更高，你可以添加gif，或者视频，或者简单的图片，记得写上 layout 文件。

mBannerCountViewPager.setPagerListener(bean, R.layout.loop_layout, new PageHelperListener() {@Overridepublic void getItemView(View view, Object data) {ImageView imageView = view.findViewById(R.id.loop_icon);LoopBean bean = (LoopBean) data;new GlideManager.Builder().setContext(LoopActivity.this).setImgSource(bean.url).setLoadingBitmap(R.mipmap.ic_launcher).setImageView(imageView).builder();TextView textView = view.findViewById(R.id.loop_text);textView.setText(bean.text);//如若你要设置点击事件，也可以直接通过这个view 来设置，或者图片的更新等等}});1234567891011121314151617复制代码

xml的配置，其实就是一个viewpager 加一个 linearlayout，位置你自己去摆放

<com.zhengsr.viewpagerlib.view.BannerViewPagerandroid:id="@+id/loop_viewpager_arc"android:layout_width="match_parent"android:layout_height="200dp"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"android:clipChildren="false"zsr:isloop="false"zsr:switchtime="600" /><com.zhengsr.viewpagerlib.indicator.ZoomIndicatorandroid:id="@+id/bottom_zoom_arc"android:layout_width="match_parent"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" />123456789101112131415161718192021复制代码

这样就完成了轮播功能，是不是封装之后，妈妈再也不用担心我写轮播效果了呢

2、Tab指示器

说完轮播图，再说说 viewpager + fragment 这种更加常用的方式， 这里也提供了三种比较常用的样式。

第一种，无耻抄袭鸿洋大神的三角形版本

其实你会了轮播图的移动版本，那么这个对你来说，就是 a piece of cake。所以，就不解释啦

第二种，条形状的版本

没啥好说的，就是把上面的三角形改成条状的，机智如我，代码全靠抄！！！！果然一个项目的质量，取决于你复制粘贴的技巧!!

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

像我们常用的今日头条，就是用这种方式，而它的原理也是非常简单，就是用额 clipRect 这个属性，先绘制一遍正常颜色的，再绘制一遍其他颜色的，就可以了。我建议你先自己用 clipRect 试一下不同的颜色，再自己写一下，你会发现，卧槽，这么简单的。。。。。

这里的配置就更简单了，viewpager 就是普通的，关键就是这个 TabIndicator 了，因为我把这三种效果都装进去了.

三角形的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>1234567891011121314151617复制代码

可以看到你可以设置的它大小，里面的textview 的颜色变化，是否显示，和可视个数，如果你想改成圆条的，把 tab_type=”tri” 的 tri 改成 rect 即可，然后如果想使用 textview 颜色变化的，只需要把 tab_text_type=”normaltext” 中的 normaltext 改成 colortext 即可。

然后在代码中这样配置：

    /*** 把 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);}});12345678910111213复制代码

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

app 首次启动引导页

还有就是引导页了，这样跟 轮播图的配置差不多，因为用的也是那几个指示器。先看效果：

这里提供了三种样式，其实还有个文字，不没贴出来了，可以看轮播的；
引导图的配置非常简单，取一个底部为放大的来说：

 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的指示器的作用，注意记得写上泛型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() {@Overridepublic void getItemView(View view, Object data) {//通过获取到这个view，你可以随意定制你的内容ImageView imageView = view.findViewById(R.id.icon);imageView.setImageResource((Integer) data);}});12345678910111213141516171819202122232425262728复制代码

这里可以看到，我把 view 提供出来，供大家自行配置，这样的好处在于，实用性更高，你可以添加gif，或者视频，或者简单的图片。
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"/>1234567891011121314151617181920212223242526272829303132复制代码

这样就基本讲完了，虽然不难，确实经常用到的，封装起来，总比做无用功来得好。
奉上 github 链接：github.com/LillteZheng… 里面有一些自定义属性的说明。

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