手把手教你用 ViewPager 自定义实现 Banner 轮播

我们在实际开发中,很多App都会在做一个广告轮播器(可能是图片,可能是其他View),很多同学都是使用别人封装好的或者直接使用ViewPager自己来改,但是有人可能并不理解里面的原理,或者有人遇到了手势滑动冲突。我们今天就用150行代码实现一自定义的广告轮播器并不干扰原来View滑动事件。

本例代码源码及Demo传送门

效果演示

轮播效果演示

 

需求分析、解决方案

轮播器最重要的几个特点就是:自动滚动、手动滑动、滚动方向、每个Item显示时间。因此我们设计提供以下几个方法供外部调用:

仔细看过上面方法的同学会发现,和我们的分析想比,还缺少一个手动滑动的方法,我们知道手势滑动肯定要用到onTouch等方法,所以我们想到v4包下ViewPager自带滑动效果,而且可以代码控制跳转到某个Item。因此我们自定义View继承ViewPager不就完美解决了。
我们看到上面的方法中有一个Direction类,这个类不是系统的,是达哥自定义的方向控制枚举,目前最常见的轮播方向无非就是左右轮播(上下本次先不讨论),代码如下:

自定义View如何实现以及原理

上面分析到需要继承ViewPager,so我们先结合上面的几个方法把完整的代码撸起来:

setShowTime(int showTimeMillis)方法和setDirection(Direction direction)就是记录一下某一个状态而已,现在已经简单的实现了,重点就是开始播放和停止播放。

定时轮播的原理分析和实现

前方高能,各位看官小心裤子别掉了。现在我们使用ViewPager最主要的就是自动播放了,所以我们需要一个定时器去执行任务,but这样子就得用到Handler,就有点小题大做了。这里介绍View的两个方法:

看到第二个方法犹如醍醐灌顶啊有木有,既然是所有View都有的方法,ViewPager必须有啊,这样不就可以在主线程定时发布一个任务了吗?所以我们这里写一个Runnable来做这个定时任务。

这里看到有一个play(direction);的方法待我们去实现,我们暂且把这个方法先放一放,我们先来看怎么利用这个private Runnable player完成开始播放和停止播放。

实现开始播放和停止播放

开始播放时我们为了让当前显示的图片显示showTime的时间,所以我们利用postDelayed(Runnable action, long delayMillis);方法在showTime时间之后触发private Runnable player

停止播放,我们把这个线程给取消了就行了,因此停止的方法的实现是:

但是为了防止开发者不停的调用start方法造成卡死现象,我们在start中做个优化,每次star前先把之前private Runable player移除了,因此start方法完整的代码是:

核心重点:如何根据方向播放上一张和下一张

本例的核心和重点来了,现在回过头去实现刚才搁置的play(direction);方法,它要根据播放的方向来播放上一张和下一张,我们具体看代码,尤其要细细品味注释哦:

到这里其实我们已经实现轮播啦,但是我们在使用的时候发现存在一种情况,当我们用手指刚滑完一张,紧接着第二张又出来了,不卖关子了,原因就是我们手指滑动的时候private Runnable player这个任务没有停止,所以我们在手指滑动时停止player,手指松开的时候再次开启player

有些同学可能不知道为什么不在构造方法中而要在onFinishInflateaddOnPageChangeListener,是因为这个方法会在view被加载完成后调用,所以我们在这里做一些初始化的工作比较合理。
自定义ViewPager的完整代码如下:

如何使用

其实我们没有对ViewPager做什么太大的干涉,所以我们使用和原生的没有什么区别。这里有几个注意的地方也写出来,免得有人踩坑。

如果使用自定ViewPager

如何优化Adapter

其实我们看到就是多调用了一个star方法,但是还不够,我们在适配器中还要做一点点小事情。为了能让轮播无限循环,所以我们在getCount中返回int的最大值:

resIds是我们的数据源。该了这个Count后,我们的instantiateItem()方法也要修改,不然会发生下标越界的异常,我们在拿到position后要做个处理:

本例代码源码及Demo传送门

1 3 收藏 评论

关于作者:严振杰

他说正直刚烈,嫉恶如仇,且有勇有谋,文武双全。 个人主页 · 我的文章 · 1 ·      

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部