热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

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

这篇文章主要手把手教你用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;

/**
 * 

用ViewPager自定义的广告轮播器。

. * * @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 &#63; 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

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


推荐阅读
  • baresip android编译、运行教程1语音通话
    本文介绍了如何在安卓平台上编译和运行baresip android,包括下载相关的sdk和ndk,修改ndk路径和输出目录,以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]
  • 打开文件管理器_【教程】模组管理器3.1食用指南
    文编:byakko最近有部分小伙伴反应还不会使用unity模组管理器,现在我就给大家讲一下unity模组管理器——从下载到使用。完整视频版以下是无WiF ... [详细]
  • 在Docker中,将主机目录挂载到容器中作为volume使用时,常常会遇到文件权限问题。这是因为容器内外的UID不同所导致的。本文介绍了解决这个问题的方法,包括使用gosu和suexec工具以及在Dockerfile中配置volume的权限。通过这些方法,可以避免在使用Docker时出现无写权限的情况。 ... [详细]
  • 在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 云原生边缘计算之KubeEdge简介及功能特点
    本文介绍了云原生边缘计算中的KubeEdge系统,该系统是一个开源系统,用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建,并为网络应用程序提供基础架构支持。同时,KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外,KubeEdge还支持跨平台工作,在私有、公共和混合云中都可以运行。同时,KubeEdge还提供数据管理和数据分析管道引擎的支持。最后,本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]
  • 学习笔记(34):第三阶段4.2.6:SpringCloud Config配置中心的应用与原理第三阶段4.2.6SpringCloud Config配置中心的应用与原理
    立即学习:https:edu.csdn.netcourseplay29983432482?utm_sourceblogtoedu配置中心得核心逻辑springcloudconfi ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • Centos7.6安装Gitlab教程及注意事项
    本文介绍了在Centos7.6系统下安装Gitlab的详细教程,并提供了一些注意事项。教程包括查看系统版本、安装必要的软件包、配置防火墙等步骤。同时,还强调了使用阿里云服务器时的特殊配置需求,以及建议至少4GB的可用RAM来运行GitLab。 ... [详细]
  • 【Windows】实现微信双开或多开的方法及步骤详解
    本文介绍了在Windows系统下实现微信双开或多开的方法,通过安装微信电脑版、复制微信程序启动路径、修改文本文件为bat文件等步骤,实现同时登录两个或多个微信的效果。相比于使用虚拟机的方法,本方法更简单易行,适用于任何电脑,并且不会消耗过多系统资源。详细步骤和原理解释请参考本文内容。 ... [详细]
  • 20211101CleverTap参与度和分析工具功能平台学习/实践
    1.应用场景主要用于学习CleverTap的使用,该平台主要用于客户保留与参与平台.为客户提供价值.这里接触到的原因,是目前公司用到该平台的服务~2.学习操作 ... [详细]
  • 如何用UE4制作2D游戏文档——计算篇
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了如何用UE4制作2D游戏文档——计算篇相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
  • 使用在线工具jsonschema2pojo根据json生成java对象
    本文介绍了使用在线工具jsonschema2pojo根据json生成java对象的方法。通过该工具,用户只需将json字符串复制到输入框中,即可自动将其转换成java对象。该工具还能解析列表式的json数据,并将嵌套在内层的对象也解析出来。本文以请求github的api为例,展示了使用该工具的步骤和效果。 ... [详细]
author-avatar
有些人笨的不行
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有