java轮播图_RxJava 实现ViewPager的轮播图
前言
在App中实现一个轮播图已经是很多产品的标配了,很多人都会想到使用ViewPager + Handler来完成轮播图的效果。但是在RxJava快速发展的情况下,已经可以使用RxJava来代替Handler完成这样任务了。
如果对RxJava还不熟悉的朋友可以看看以下的一些文章:
RxJava学习
给 Android 开发者的 RxJava 详解
效果图
ViewPager的操作
说到ViwePager应该大家都不陌生,它可以结合普通的View也可以结合Fragment一起使用。在此我也就不对它的使用方法进行过多的介绍了。直接开始介绍轮播的方法。
常见的轮播操作
private class ImageAdapter extends PagerAdapter{
private ArrayList viewlist;
public ImageAdapter(ArrayList viewlist) {
this.viewlist = viewlist;
}
@Override
public int getCount() {
//设置成最大,使用户看不到边界
return Integer.MAX_VALUE;
}
....
}
private static class ImageHandler extends Handler{
...
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
//检查消息队列并移除未发送的消息,这主要是避免在复杂环境下消息出现重复等问题。
if (activity.handler.hasMessages(MSG_UPDATE_IMAGE)){
activity.handler.removeMessages(MSG_UPDATE_IMAGE);
}
switch (msg.what) {
case MSG_UPDATE_IMAGE:
currentItem++;
activity.viewPager.setCurrentItem(currentItem);
//准备下次播放
activity.handler.sendEmptyMessageDelayed(MSG_UPDATE_IMAGE, MSG_DELAY);
break;
case MSG_KEEP_SILENT:
//只要不发送消息就暂停了
break;
case MSG_BREAK_SILENT:
activity.handler.sendEmptyMessageDelayed(MSG_UPDATE_IMAGE, MSG_DELAY);
break;
case MSG_PAGE_CHANGED:
//记录当前的页号,避免播放的时候页面显示不正确。
currentItem = msg.arg1;
break;
default:
break;
}
}
...
}
以上就是比较常见的轮播图的代码,我只是在网上随便找的。首先它的代码中将PagerAdapter的getCount()返回了一个Integer.MAX_VALUE;它的目的是为了让图片一直的播放下去,但是在一些极限情况下还是会crash的,并且它返回的数量太大了在一定程度上对内存也造成了较大的消耗。其次我们可以看到handler的代码极其的冗杂,不仅多而且逻辑也比较麻烦。 现在我们针对刚才的问题来进行优化
更好的轮播操作
更好的无限播放:设置页卡视图列表时,在前后额外各加一个页卡。最前面加最后一张图片,最后面加第1张图片。然后每当切换到最前的页卡时,就替换成倒数第2个页卡;每当切换到最后的页卡时,就替换成第2个页卡。这样一来就形成了连贯,自然实现了无限滑动的功能。
1)设置ViewPager的视图列表时,在前后各加一个页卡。
for (int i = 0; i < count + 2; i++) {
if (i == 0) {// 将最前面一页设置成本来最后的那页
Glide.with(context).
load(imageTitleBeanList.get(count - 1).getImageUrl()).into(ivImage);
tvTitle.setText(imageTitleBeanList.get(count - 1).getTitle());
} else if (i == count + 1) {// 将最后面一页设置成本来最前的那页
Glide.with(context).
load(imageTitleBeanList.get(0).getImageUrl()).into(ivImage);
tvTitle.setText(imageTitleBeanList.get(0).getTitle());
} else {
Glide.with(context).
load(imageTitleBeanList.get(i - 1).getImageUrl()).into(ivImage);
tvTitle.setText(imageTitleBeanList.get(i - 1).getTitle());
}
// 将设置好的View添加到View列表中
viewList.add(view);
}
2)在监听ViewPager的页卡状态改变中,当滑动到第1个页卡时替换成倒数第2个页卡;当滑动到最后一个页卡时替换成第2个页卡。
@Override
public void onPageScrollStateChanged(int state) {
switch (state) {
// 闲置中
case ViewPager.SCROLL_STATE_IDLE:
// “偷梁换柱”
if (vpImageTitle.getCurrentItem() == 0) {
vpImageTitle.setCurrentItem(count, false);
} else if (vpImageTitle.getCurrentItem() == count + 1) {
vpImageTitle.setCurrentItem(1, false);
}
currentItem = vpImageTitle.getCurrentItem();
break;
}
}
此部分参考自:使用ViewPager实现图片轮播。Handler现在就该由RxJava来替代了。
Interval 操作符
创建一个按固定时间间隔发射整数序列的Observable
Interval
Interval操作符返回一个Observable,它按固定的时间间隔发射一个无限递增的整数序列。
Interval
RxJava将这个操作符实现为interval方法。它接受一个表示时间间隔的参数和一个表示时间单位的参数。
interval默认在computation调度器上执行。你也可以传递一个可选的Scheduler参数来指定调度器。
用RxJava取代Handler
public void start() {
mViewPagerSubscribe = Observable.interval(5, 5, TimeUnit.SECONDS) // 5s的延迟,5s的循环时间
.subscribeOn(AndroidSchedulers.mainThread())
.observeOn(AndroidSchedulers.mainThread())
.subscribe(new Action1() {
@Override
public void call(Long aLong) {
// 进行轮播操作
if (mWeeklyMovieInfos != null && mWeeklyMovieInfos.size() > 0 && isAutoPlay) {
mCurrentPage++;
mWeeklyViewPager.setCurrentItem(mCurrentPage);
}
}
});
}
为了更好的用户体验,在用户进行滑动操作的时候,应该停止自动轮播
mPager.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
//监听ViewPager的触摸事件,当用户按下的时候取消注册,当用户手抬起的时候再注册
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
stop();
break;
case MotionEvent.ACTION_UP:
start();
break;
}
return false;
}});
public void stop() {
if(mViewPagerSubscribe.isUnsubscribed()) {
mViewPagerSubscribe.unsubscribe();
}
}
总结
本文主要是对ViewPager实现轮播图的一种总结。首先提出更好的轮播图的方法,其实讲解了RxJava中interval操作符的使用,最后用该操作符替换掉Handler完美实现轮播图。
代码点我下载
java轮播图_RxJava 实现ViewPager的轮播图相关推荐
- 使用ViewPager实现轮播图自动播放
使用ViewPager实现轮播图自动播放 通过使用ViewPager实现图片的自动轮播,也可以通过将自动滑动关闭通过手动滑动进行图片的滑动,现在简单分析一下实现的步骤: 1.让图片滑动起来. 2.让图 ...
- ViewPager无限轮播与小点点
在Android开发中经常简单会用到 ViewPager无限轮播与小点点,下面就简单介绍一下,其中的小点点可以找美工绘制,Android工程师也可以自己手动简易制作 定义XML布局文件 <Rel ...
- 【Java小游戏】小球躲避游戏 图片轮播爆炸效果、边缘反弹、计时功能
功能 Java开发的小球躲避小游戏.通过上下左右按键控制小球移动,小球移动的方向包括:横向.纵向.斜向,小球具有初始生命值.小球通过移动来躲避炮弹,当小球碰到炮弹时,产生爆炸的动画效果. 使用双缓冲方 ...
- css3轮播不用jpuery_js和CSS3 3D轮播图
这是一款js和CSS3 3D轮播图.这组3D轮播图中,共演示了6种轮播图效果.这些3D轮播图都是通过简单的JS代码配合CSS3来完成的. 使用方法 HTML结构 以8张图片的3D轮播图为例,它的基本H ...
- android 自动 轮播图,Android-自定义View实现轮播图
主要步骤 1.自定义View的实现过程(测量.布局.绘制) 2.事件拦截机制方法.图片轮播时的Scroller对象使用 3.轮播图自动轮播时,Timer.TimerTask.Handler三者的结合 ...
- android viewpager无限轮播
概述 github地址:https://github.com/Double2hao/ViewPagerCycleTest 一直很好奇ViewPager无限轮播的实现方式,于是稍微研究了下,作此文记录之 ...
- html轮播台袋效果,css3百叶窗轮播图效果
标题 #Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/ position:relative;} #con ...
- android在Fragment做轮播图,Android Fragment沉浸式轮播图
所谓的沉浸式轮播图,指的是轮播图位于状态栏后面,这是最近比较流行的一种设计方式,在电商客户端上面用的比较多.比如下面的京东Android客户端首页: 京东首页 Android 从Android4.4开 ...
- HTML视频能不能做成轮播图,vue.js能做轮播图吗?
vue.js能做轮播图吗?答案是:可以.下面本篇文章给大家通过实例介绍一下使用vue.js做轮播图.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 最近新学习了vuejs,尝试着用v ...
最新文章
- python文件的编译
- linux的同步与互斥
- python----yield(generator)生成器
- Hibernate之深入Hibernate的映射文件
- r语言转化为python_数值型与字符型转换总结|R语言
- xss攻击-跨站脚本漏洞修复 Springboot项目
- Springboot缓存实战笔记之概念篇
- 盒子模型(悬挂式布局)
- 802.11无线网络部署方案对比分析
- 2.1 Hadoop概述
- VM两个虚拟机之间的通讯测试
- 1.2.2合并线程(Joining Threads)
- 工作中windows客户端常见问题
- cvCompareHist() 直方图匹配
- BZOJ4198: [Noi2015]荷马史诗(哈夫曼树)
- macos 获取root权限
- 计算机中临时存储数据指令的部件,第一单元 探索计算机的奥秘
- 小米商城app端项目
- win10睡眠按啥键唤醒_win10关闭屏幕后无法唤醒怎么办?电脑黑屏只能重启的解决方法...
- Aspose.Slides使用教程:使用 C++ 在 PowerPoint 演示文稿中添加幻灯片切换