欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

RollViewPager图片轮播效果开源框架使用方法详解

程序员文章站 2023-11-23 21:20:22
rollviewpager是一个自动轮播的viewpager,支持无限循环。 触摸时会暂停播放,直到结束触摸一个延迟周期以后继续播放。 看起来就像这样。指示器可以为点可以为...

rollviewpager是一个自动轮播的viewpager,支持无限循环。 触摸时会暂停播放,直到结束触摸一个延迟周期以后继续播放。 看起来就像这样。指示器可以为点可以为数字还可以自定义,位置也可以变。

附上rollviewpager github地址:https://github.com/jude95/rollviewpager

使用android studio开发在gradle添加依赖:

compile 'com.jude:rollviewpager:1.4.5'

在布局文件当中使用:

<com.jude.rollviewpager.rollpagerview
  android:layout_width="match_parent"
  android:layout_height="180dp"
  app:rollviewpager_play_delay="3000"/>

要使用到rollviewpager自定义属性的时候,在布局文件当中我们必须添加:

xmlns:app="http://schemas.android.com/apk/res-auto

rollpagerview自定义属性:

app:rollviewpager_play_delay="3000" 播放间隔时间,单位ms。填0则不播放。默认为0 app:rollviewpager_hint_gravity="center" 指示器位置,提供left,center,right。默认center
app:rollviewpager_hint_color="#7c7c7c" 指示器背景颜色.默认黑色
app:rollviewpager_hint_alpha="80" 指示器背景透明度。0全透明,255不透明。默认0.
app:rollviewpager_hint_paddingleft="16dp" 指示器左边距
app:rollviewpager_hint_paddingright="16dp" 指示器右边距
app:rollviewpager_hint_paddingtop="16dp" 指示器上边距
app:rollviewpager_hint_paddingbottom="16dp" 指示器下边距

一般指定一下间隔时间。

rollviewpager提供了自定义指示器的类:hintview 用法

参数说明:上下文,当前轮播图指示器图片 默认指示器图片
mrollviewpager.sethintview(new iconhintview(this,r.drawable.point_focus,r.drawable.point_normal));
mrollviewpager.sethintview(new colorpointhintview(this, color.yellow,color.white));
mrollviewpager.sethintview(new texthintview(this));
mrollviewpager.sethintview(null);//隐藏指示器

设置点击事件:

pagerview.setonitemclicklistener(new onitemclicklistener() {
      @override
      public void onitemclick(int position) {
        toast.maketext(mainactivity.this,""+position,toast.length_short).show();
      }
    });

提供以下三种种方便的pageradapter供使用。

本viewpager也可以使用其他任意pageradapter。

staticpageradapter:

存储页面的adapter。view添加进去就存储不会再次getview,减少页面创建消耗,消耗内存。一般自动播放的情况这种方案比较好。不然会大量构造view。 概念参照fragmentpageradapter。可以用于其他viewpager。

class mypageradapter extends staticpageradapter {

    private int[] image = {r.mipmap.one, r.mipmap.two, r.mipmap.three, r.mipmap.four};


    // setscaletype(imageview.scaletype.center_crop);
    // 按比例扩大图片的size居中显示,使得图片长(宽)等于或大于view的长(宽)

    @override
    public view getview(viewgroup container, int position) {
      imageview imageview = new imageview(container.getcontext());
      imageview.setimageresource(image[position]);
      imageview.setscaletype(imageview.scaletype.center_crop);
      imageview.setlayoutparams(new viewgroup.layoutparams(viewgroup.layoutparams.match_parent, viewgroup.layoutparams.match_parent));
      return imageview;
    }

    @override
    public int getcount() {
      return image.length;
    }
  }

dynamicpageradapter (跟以上adapter用法一样)
动态的adapter。当创建3号view时会销毁1号view(递推),会时常调用getview。增加页面创建消耗,减小内存消耗。 概念参照fragmentstatepageradapter。可以用于其他viewpager。

looppageradapter

无限循环的adapter。无限循环上采用的是getcount返回int大数的方法(并没有什么缺点,另外估计1s的间隔时间你在有生之年看不到他播放到底)。实测比第n页跳转到第1页的效果好。

数据采用staticpageradapter的方案。节省创建view开销。 本adapter只能用于本rollviewpager;

无需其他设置,很简单。

mrollviewpager.setadapter(new testloopadapter(mrollviewpager));
private class testloopadapter extends looppageradapter{
  private int[] imgs = {
      r.drawable.img1,
      r.drawable.img2,
      r.drawable.img3,
      r.drawable.img4,
  };

  public testloopadapter(rollpagerview viewpager) {
    super(viewpager);
  }

  @override
  public view getview(viewgroup container, int position) {
    imageview view = new imageview(container.getcontext());
    view.setimageresource(imgs[position]);
    view.setscaletype(imageview.scaletype.center_crop);
    view.setlayoutparams(new viewgroup.layoutparams(viewgroup.layoutparams.match_parent, viewgroup.layoutparams.match_parent));
    return view;
  }

  @override
  public int getrealcount() {
    return imgs.length;
  }
}

播放控制

rollviewpager.pause()
rollviewpager.resume()
rollviewpager.isplaying()

mainactivity代码:

public class mainactivity extends appcompatactivity {

  private rollpagerview pagerview;

  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);

    pagerview = (rollpagerview) findviewbyid(r.id.rollpagerview);

    //设置适配器
    pagerview.setadapter(new mypageradapter());

    pagerview.setonitemclicklistener(new onitemclicklistener() {
      @override
      public void onitemclick(int position) {
        toast.maketext(mainactivity.this,""+position,toast.length_short).show();
      }
    });
    //对指示器的自定义 参数说明:上下文,当前轮播图指示器图片 默认指示器图片
//    pagerview.sethintview(new iconhintview(this,r.mipmap.ic_launcher,r.mipmap.fouse));

  }

  class mypageradapter extends staticpageradapter {

    private int[] image = {r.mipmap.one, r.mipmap.two, r.mipmap.three, r.mipmap.four};


    // setscaletype(imageview.scaletype.center_crop);
    // 按比例扩大图片的size居中显示,使得图片长(宽)等于或大于view的长(宽)

    @override
    public view getview(viewgroup container, int position) {
      imageview imageview = new imageview(container.getcontext());
      imageview.setimageresource(image[position]);
      imageview.setscaletype(imageview.scaletype.center_crop);
      imageview.setlayoutparams(new viewgroup.layoutparams(viewgroup.layoutparams.match_parent, viewgroup.layoutparams.match_parent));
      return imageview;
    }

    @override
    public int getcount() {
      return image.length;
    }
  }
}

xml代码:

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <!--rollviewpager_play_delay 播放时间间隔默认为0-->
  <com.jude.rollviewpager.rollpagerview
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:id="@+id/rollpagerview"
    app:rollviewpager_play_delay="3000"
    >
  </com.jude.rollviewpager.rollpagerview>
</relativelayout>


附上效果图:

RollViewPager图片轮播效果开源框架使用方法详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。