手把手教你用ViewPager自定义实现Banner轮播
欢迎大家关注android开源网络框架nohttp：https://github.com/yanzhenjie/nohttp
我们在实际开发中，很多app都会在做一个广告轮播器（可能是图片，可能是其他view），很多同学都是使用别人封装好的或者直接使用viewpager自己来改，但是有人可能并不理解里面的原理，或者有人遇到了手势滑动冲突。我们今天就用150行代码实现一自定义的广告轮播器并不干扰原来view滑动事件。
本例代码源码及demo传送门
效果演示
需求分析、解决方案
轮播器最重要的几个特点就是：自动滚动、手动滑动、滚动方向、每个item显示时间。因此我们设计提供以下几个方法供外部调用：
/** * 设置每个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类，这个类不是系统的，是达哥自定义的方向控制枚举，目前最常见的轮播方向无非就是左右轮播(上下本次先不讨论)，代码如下：
public enum direction {
/**
* 向左行动，播放的下一张应该是右边的
*/
left,
/**
* 向右行动，播放的下一张应该是左边的
*/
right
}
自定义view如何实现以及原理
上面分析到需要继承viewpager，so我们先结合上面的几个方法把完整的代码撸起来：
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的两个方法：
// 线程将被添加到消息队列，这个线程将会在ui线程（主线程）运行。 public boolean post(runnable action); // 线程将被添加到消息队列，在指定的时间之后运行，这个线程将会在ui线程（主线程）运行。 public boolean postdelayed(runnable action, long delaymillis);
看到第二个方法犹如醍醐灌顶啊有木有，既然是所有view都有的方法，viewpager必须有啊，这样不就可以在主线程定时发布一个任务了吗？所以我们这里写一个runnable来做这个定时任务。
/**
* 播放器
*/
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：
/**
* 开始
*/
public void start() {
postdelayed(player, showtime);
}
停止播放，我们把这个线程给取消了就行了，因此停止的方法的实现是：
/**
* 停止
*/
public void stop() {
removecallbacks(player);
}
但是为了防止开发者不停的调用start方法造成卡死现象，我们在start中做个优化，每次star前先把之前private runable player移除了，因此start方法完整的代码是：
/**
* 开始
*/
public void start() {
stop();
postdelayed(player, showtime);
}
核心重点：如何根据方向播放上一张和下一张
本例的核心和重点来了，现在回过头去实现刚才搁置的play(direction);方法，它要根据播放的方向来播放上一张和下一张，我们具体看代码，尤其要细细品味注释哦：
/**
* 执行播放
*
* @param direction 播放方向
*/
private synchronized void play(direction direction) {
// 拿到viewpager的适配器
pageradapter pageradapter = getadapter();
if (pageradapter != null) {// 判空
// item数量
int count = pageradapter.getcount();
// viewpager现在显示的第几个？
int currentitem = getcurrentitem();
switch (direction) {
case left:// 如是向左滚动的，currentitem+1播放下一个
currentitem++;
// 如果+到最后一个了，就到第一个
if (currentitem >= count)
currentitem = 0;
break;
case right:// 如是向右滚动的，currentitem-1播放上一个
currentitem--;
// 如果-到低一个了，就到最后一个
if (currentitem < 0)
currentitem = count - 1;
break;
}
setcurrentitem(currentitem);// 播放根据方向计算出来的position的item
}
// 这就是当可以循环播放的重点，每次播放完成后，再次开启一个定时任务
start();
}
到这里其实我们已经实现轮播啦，但是我们在使用的时候发现存在一种情况，当我们用手指刚滑完一张，紧接着第二张又出来了，不卖关子了，原因就是我们手指滑动的时候private runnable player这个任务没有停止，所以我们在手指滑动时停止player，手指松开的时候再次开启player：
@override
protected void onfinishinflate() {
addonpagechangelistener(new onpagechangelistener() {
@override
public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) {
}
@override
public void onpageselected(int position) {
}
@override
public void onpagescrollstatechanged(int state) {
if (state == scroll_state_idle)
start();
else if (state == scroll_state_dragging)
stop();
}
});
}
有些同学可能不知道为什么不在构造方法中而要在onfinishinflate中addonpagechangelistener，是因为这个方法会在view被加载完成后调用，所以我们在这里做一些初始化的工作比较合理。
自定义viewpager的完整代码如下：
package com.yolanda.autoviewpager;
import android.content.context;
import android.support.v4.view.pageradapter;
import android.support.v4.view.viewpager;
import android.util.attributeset;
/**
* <p>用viewpager自定义的广告轮播器。</p>.
*
* @author yolanda;
*/
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() {
stop();
postdelayed(player, showtime);
}
/**
* 停止
*/
public void stop() {
removecallbacks(player);
}
/**
* 播放上一个
*/
public void previous() {
if (direction == direction.right) {
play(direction.left);
} else if (direction == direction.left) {
play(direction.right);
}
}
/**
* 播放下一个
*/
public void next() {
play(direction);
}
/**
* 执行播放
*
* @param direction 播放方向
*/
private synchronized void play(direction direction) {
pageradapter pageradapter = getadapter();
if (pageradapter != null) {
int count = pageradapter.getcount();
int currentitem = getcurrentitem();
switch (direction) {
case left:
currentitem++;
if (currentitem > count)
currentitem = 0;
break;
case right:
currentitem--;
if (currentitem < 0)
currentitem = count;
break;
}
setcurrentitem(currentitem);
}
start();
}
/**
* 播放器
*/
private runnable player = new runnable() {
@override
public void run() {
play(direction);
}
};
public enum direction {
/**
* 向左行动，播放的应该是右边的
*/
left,
/**
* 向右行动，播放的应该是左边的
*/
right
}
@override
protected void onfinishinflate() {
super.onfinishinflate();
addonpagechangelistener(new onpagechangelistener() {
@override
public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) {
}
@override
public void onpageselected(int position) {
}
@override
public void onpagescrollstatechanged(int state) {
if (state == scroll_state_idle)
start();
else if (state == scroll_state_dragging)
stop();
}
});
}
}
如何使用
其实我们没有对viewpager做什么太大的干涉，所以我们使用和原生的没有什么区别。这里有几个注意的地方也写出来，免得有人踩坑。
如果使用自定viewpager
autoplayviewpager autoplayviewpage = (autoplayviewpager) findviewbyid(r.id.view_pager); autoplayviewpage.setadapter(banneradapter); // 以下两个方法不是必须的，因为有默认值 autoplayviewpage.setdirection(autoplayviewpager.direction.left);// 设置播放方向 autoplayviewpage.setcurrentitem(200); // 设置每个item展示的时间 autoplayviewpage.start(); // 开始轮播
如何优化adapter
其实我们看到就是多调用了一个star方法，但是还不够，我们在适配器中还要做一点点小事情。为了能让轮播无限循环，所以我们在getcount中返回int的最大值：
@override
public int getcount() {
return resids == null ? 0 : integer.max_value;
}
resids是我们的数据源。该了这个count后，我们的instantiateitem()方法也要修改，不然会发生下标越界的异常，我们在拿到position后要做个处理：
@override
public object instantiateitem(viewgroup container, int position) {
position = position % resids.size();
object xxoo = resids.get(position);
...
}
本例代码源码：http://xiazai.jb51.net/201609/yuanma/autoviewpager(jb51.net).rar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。