RollViewPager图片轮播效果开源框架的使用

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>

附上效果图: 

原文地址:https://www.cnblogs.com/ganchuanpu/p/8127417.html

时间: 2024-08-29 03:17:45

RollViewPager图片轮播效果开源框架的使用的相关文章

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

基本_移动类型轮播效果_框架

一.基本元素: D:display window;用户浏览的窗口: S:scroll window;存放内容的大容器:通过移动来改变显示的内容: C:content;内容信息: B:button;按钮,多种样式,可选: 二.思路: 通过移动S 的位置,由于C位于S中,所有的C将会同时跟随S而移动. 在D中显示的内容将会被改变. 三.html结构: 1 <div class=”D”> 2 <div class=”S”> 3 <div class=”C”>content&l

js实现淘宝首页图片轮播效果

原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>淘宝首页图片轮播效果</title> <style> <!-- * {margin: 0;padding:0;} body

jQuery个性化图片轮播效果

购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果 两个区域:   最外层容器区域,如上图红色线框矩形   选项卡区域 两个事件:    鼠标悬浮或鼠标划入mouseover    鼠标离开mouseleave /**大屏广告滚动样式**/ 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

首页图片轮播效果

<html><head><meta  charset="utf-8" /><title>首页图片轮播效果</title><style type="text/css">* {margin: 0;padding:0;}body {background: #222;}ol{list-style: none;}img {border: 0 none;}#slider { border: 1px soli

简单的图片轮播效果

用js代码来实现一个简单的图片轮播效果 鼠标移入图片后显示左右箭头按钮,点击就可以实现图片的切换. 以下分别是html代码和js代码,欢迎批评和讨论! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> *{padding:0px; margin:0px;

图片轮播效果

今天有点空,写了个图片轮播的效果,使用了jq,直接上代码吧. 效果:http://edwardzhong.github.io/blog/2014/10/31/slidePics.html html如下: <div class="wrap"> <div class="left fl"><</div> <div class="right fr">></div> <div c

安卓首页图片轮播效果(淘宝、京东首页广告效果)

直奔主题: 1.主要原理就是利用定时任务器定时切换ViewPager的页面. 2.里面用了一个读取网络图片的插件.做client使用本地图片轮播的也非常少. 先上个效果图: 项目代码结构截图: 自己定义View 的布局文件layout_slideshow.xml: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.and

Jquery实现图片轮播效果

废话不多说,先上源码 1 <div id="baner"> 2 <div class="imgt"> 3 <div class="shadeDiv clarity"></div><!-- 透明层 --> 4 <ul> 5 <li name="1"></li> 6 <li name="2"></l