少年郎,你需要封装好的ViewPager工具类

阅读 2721
收藏 347
2017-11-12
原文链接:blog.csdn.net

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

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' }
        }
    }

然后在你的 module 中添加:

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

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

效果图

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

1、轮播图

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

image

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

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

image

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

如果你要使用弧形图片,可以用 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"/>

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

image

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

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

有些 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);

        }

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

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

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

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

step3:

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

mBannerCountViewPager.setPagerListener(bean, R.layout.loop_layout, new PageHelperListener() {
            @Override
            public 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 来设置,或者图片的更新等等
            }
        });

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

<com.zhengsr.viewpagerlib.view.BannerViewPager
    android: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.ZoomIndicator
    android: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" />

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

这里写图片描述

2、Tab指示器

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

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

image

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

第二种,条形状的版本

image

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

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

image

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

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

三角形的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>

可以看到你可以设置的它大小,里面的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() {
        @Override
        public void onClick(int position) {
            //顶部点击的方法公布出来
            viewPager.setCurrentItem(position);
        }
    });

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

app 首次启动引导页

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

image image image

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

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

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

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

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

评论

查看更多 >