当前位置: 移动技术网 > IT编程>移动开发>Android > 手把手教你用ViewPager自定义实现Banner轮播

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

2019年07月24日  | 移动技术网IT编程  | 我要评论

成衣批发,43399,杭州灰色理想画室

欢迎大家关注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);
 ...
}

本例代码源码:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网