我们在实际开发中，很多App都会在做一个广告轮播器（可能是图片，可能是其他View），很多同学都是使用别人封装好的或者直接使用ViewPager自己来改，但是有人可能并不理解里面的原理，或者有人遇到了手势滑动冲突。我们今天就用150行代码实现一自定义的广告轮播器并不干扰原来View滑动事件。
效果演示
需求分析、解决方案
轮播器最重要的几个特点就是：自动滚动、手动滑动、滚动方向、每个Item显示时间。因此我们设计提供以下几个方法供外部调用：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/** * 设置每个Item的播放时间，默认3000毫秒 */ public void setShowTime(int showTimeMillis); /** * 设置滚动方向，默认向左滚动 */ public void setDirection(Direction direction); /** * 开始自动滚动 */ public void start(); /** * 停止自动滚动 */ public void stop(); /** * 播放上一个 */ public void previous(); /** * 播放下一个 */ public void next(); |
仔细看过上面方法的同学会发现，和我们的分析想比，还缺少一个手动滑动的方法，我们知道手势滑动肯定要用到onTouch等方法，所以我们想到v4包下ViewPager自带滑动效果，而且可以代码控制跳转到某个Item。因此我们自定义View继承ViewPager不就完美解决了。
我们看到上面的方法中有一个Direction类，这个类不是系统的，是达哥自定义的方向控制枚举，目前最常见的轮播方向无非就是左右轮播(上下本次先不讨论)，代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 |
public enum Direction { /** * 向左行动，播放的下一张应该是右边的 */ LEFT, /** * 向右行动，播放的下一张应该是左边的 */ RIGHT } |
自定义View如何实现以及原理
上面分析到需要继承ViewPager，so我们先结合上面的几个方法把完整的代码撸起来：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
public class AutoPlayViewPager extends ViewPager { public AutoPlayViewPager(Context context) { super(context); } public AutoPlayViewPager(Context context, AttributeSet attrs) { super(context, attrs); } /** * 播放时间 */ private int showTime = 3 * 1000; /** * 滚动方向 */ private Direction direction = Direction.LEFT; /** * 设置播放时间，默认3秒 * * @param showTimeMillis 毫秒 */ public void setShowTime(int showTimeMillis) { this.showTime = showTime; } /** * 设置滚动方向，默认向左滚动 * * @param direction 方向 */ public void setDirection(Direction direction) { this.direction = direction; } /** * 开始 */ public void start() { // TODO 待实现开始播放 } /** * 停止 */ public void stop() { // TODO 待实现停止播放 } /** * 播放上一个 */ public void previous() { // TODO 待实现播放上一个 } /** * 播放下一个 */ public void next() { // TODO 待实现播放下一个 } public enum Direction { /** * 向左行动，播放的应该是右边的 */ LEFT, /** * 向右行动，播放的应该是左边的 */ RIGHT } } |
setShowTime(int showTimeMillis)方法和setDirection(Direction direction)就是记录一下某一个状态而已，现在已经简单的实现了，重点就是开始播放和停止播放。
定时轮播的原理分析和实现
前方高能，各位看官小心裤子别掉了。现在我们使用ViewPager最主要的就是自动播放了，所以我们需要一个定时器去执行任务，but这样子就得用到Handler，就有点小题大做了。这里介绍View的两个方法：
|
1 2 3 4 5 |
// 线程将被添加到消息队列，这个线程将会在UI线程（主线程）运行。 public boolean post(Runnable action); // 线程将被添加到消息队列，在指定的时间之后运行，这个线程将会在UI线程（主线程）运行。 public boolean postDelayed(Runnable action, long delayMillis); |
看到第二个方法犹如醍醐灌顶啊有木有，既然是所有View都有的方法，ViewPager必须有啊，这样不就可以在主线程定时发布一个任务了吗？所以我们这里写一个Runnable来做这个定时任务。
|
1 2 3 4 5 6 7 8 9 |
/** * 播放器 */ private Runnable player = new Runnable() { @Override public void run() { play(direction); } }; |
这里看到有一个play(direction);的方法待我们去实现，我们暂且把这个方法先放一放，我们先来看怎么利用这个private Runnable player完成开始播放和停止播放。
实现开始播放和停止播放
开始播放时我们为了让当前显示的图片显示showTime的时间，所以我们利用postDelayed(Runnable action, long delayMillis);方法在showTime时间之后触发private Runnable player：
|
1 2 3 4 5 6 |
/** * 开始 */ public void start() { postDelayed(player, showTime); } |
停止播放，我们把这个线程给取消了就行了，因此停止的方法的实现是：
|
1 2 3 4 5 6 |
/** * 停止 */ public void stop() { removeCallbacks(player); } |
但是为了防止开发者不停的调用start方法造成卡死现象，我们在start中做个优化，每次star前先把之前private Runable player移除了，因此start方法完整的代码是：
|
1 2 3 4 5 6 7 |
/** * 开始 */ public void start() { stop(); postDelayed(player, showTime); } |
核心重点：如何根据方向播放上一张和下一张
本例的核心和重点来了，现在回过头去实现刚才搁置的play(direction);方法，它要根据播放的方向来播放上一张和下一张，我们具体看代码，尤其要细细品味注释哦：
