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、轮播图

第一种

image

第二种

image

第三种

image

第四种

image

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

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

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

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

<com.zhengsr.viewpagerlib.view.BannerViewPager
                android: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.ZoomIndicator
                android: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>() {
            @Override
            public 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.ArcImageView
        android:id="@+id/arc_icon"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:arc_height="15dp"
        android:scaleType="centerCrop"/>

2、Tab 指示器

第一种

image

第二种,条形状的版本

image

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

image

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

xml 的配置

<com.zhengsr.viewpagerlib.indicator.TabIndicator
        android: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() {
        @Override
        public void onClick(int position) {
            //顶部点击的方法公布出来
            viewPager.setCurrentItem(position);
        }
    });

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

app 首次启动引导页

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

image imageimage

看一个完整的配置:

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

xml 的配置如下:

<com.zhengsr.viewpagerlib.view.GlideViewPager
        android:id="@+id/splase_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <Button
        android: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.ZoomIndicator
        android: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_isloopboolean是否自动轮播
banner_looptimeinteger轮播的时间
banner_switchtimeintegerviewpager 的切换速度
banner_loop_max_countinteger超过这个数字时,才会轮播效果

ZoomIndicator

名称类型说明
zoom_selectorreferenceselecotr,一般就一个圆点即可
zoom_leftmargindimension两个圆点之间的间距
zoom_maxfloat小圆点放大的倍数
zoom_alpha_minfloat小圆点缩小的倍数
zoom_dismiss_openboolean做引导页的最后一页,是否隐藏圆点

NormalIndicator

名称类型说明
normal_selectorreferenceselecotr,一般就一个圆点即可-
normal_leftmargindimension两个圆点之间的间距
normal_dismiss_openboolean做引导页的最后一页,是否隐藏圆点

TransIndicator

名称类型说明
trans_widthdimension指示器宽度
trans_heightdimension指示器高度
trans_defaultcolorcolor,reference指示器默认的颜色
trans_leftmargindimension两个圆点之间的间距
trans_movecolorcolor,reference指示器移动的颜色
trans_dismiss_openboolean做引导页的最后一页,是否隐藏圆点
trans_round_radiusdimension矩形圆角
trans_typeround,circle矩形圆角

TextIndicator

名称类型说明
word_show_circleboolean是否显示外援的圆圈
word_circle_colorreference,color圆圈的颜色
word_text_colorreference,color文字颜色
word_text_sizereference文字大小

弧形图片 ArcImageView

名称类型说明
arc_heightdimension弧度的高度

顶部 viewpager 指示器 TabIndicator

名称类型说明
visiabel_sizeinteger可视化个数,比如有一排,我们就只要显示 4 个
tab_colorcolor,reference指示器的颜色
tab_showboolean是否显示指示器
tab_text_typenormaltext,colortext顶部文字的类型,nromaltext 为普通的 textview,corlortext 为文件渐变
tab_widthdimension指示器的宽度
tab_heightdimension指示器的高度
tab_textsizedimension顶部文字的大小
tab_text_default_colorcolor,reference顶部文字默认的颜色
tab_text_change_colorcolor,reference移动时,顶部文字的颜色
tap_typetri,rect指示器类型,有三角形或者圆条

渐变文字 TextIndicator

名称类型说明
colortext_sizedimension文字大小
colortext_default_colorreference,color默认颜色
colortext_change_colorreference,color渐变颜色

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值