概述

  应用首页的广告轮播Banner,一般都会使用ViewPager来实现,但是ViewPager 没有轮播效果。
现成有这么几种实现方案,
  1.使用Integer.MAX_VALUE ,理论上很难达到边界。
  2.装饰adapter方式[imbryk/LoopingViewPager@Github]
  3.扩展ViewPager方式[yanzm/LoopViewPager]

相关库

  轮播效果其实就是一个定时任务,可以用定时器,Handler等。

[Trinea/Android Auto Scroll ViewPager@Github]

此库通过handler定时发送消息实现,用的比较多,使用中感觉切换并非无缝。主要代码如下:

/** * scroll only once */
public void scrollOnce() {
  PagerAdapter adapter = getAdapter();
  int currentItem = getCurrentItem();
  int totalCount;
if (adapter == null || (totalCount = adapter.getCount()) <= 1) {
  return;
}
int nextItem = (direction == LEFT) ? --currentItem : ++currentItem;
if (nextItem < 0) {
  if (isCycle) {
    setCurrentItem(totalCount - 1, isBorderAnimation);
  }
} else if (nextItem == totalCount) {
  if (isCycle) {
    setCurrentItem(0, isBorderAnimation);
  }
} else {
    setCurrentItem(nextItem, true);
    }
}

  

这里是在最后或第一页直接setCurrentItem(),因此,并非无缝轮播效果。

和本文开头的几个控件整合一下,即可方便 的实现我们想要无缝 的效果。

基本实现

1.修改[Trinea/Android Auto Scroll ViewPager@Github]

改变首页和最后一页的跳转设置。

    /**
* scroll only once
*/
public void scrollOnce() {
PagerAdapter adapter = getAdapter();
int currentItem = getCurrentItem();
if (adapter == null || adapter.getCount() <= 1) {
return;
} int nextItem = (direction == LEFT) ? --currentItem : ++currentItem;
setCurrentItem(nextItem, true);
}

  

2.实现方式选择

第一种方式其实主要改变了adapter中的index,大体如下:

@Override public int getCount() {
  return Integer.MAX_VALUE;
}
@Override public Object instantiateItem(ViewGroup container, int position) {
  position = position % listviews.size() ;
  //....
}

  

只是理论上的无限,需要自己处理position

第二种装饰了adapter,在前后各添加一个Item,当到了我们添加的临界item的时候,立即设置到正确的 position ,主要方法如下:

LoopPagerAdapterWrapper

int toRealPosition(int position) {
int realCount = getRealCount();
if (realCount == 0) return 0;
int realPosition = (position-1) % realCount;
if (realPosition < 0) realPosition += realCount;
return realPosition;
}

  

这里,内部封装position映射,不需要自己处理position,和正常ViewPager使用方式一样。

第三种,重写扩展ViewPager 继承 ViewGroup,使其item无限。需要自己处理position,而且 和 [JakeWharton/ViewPagerIndicator@Github]搭配使用起来不是很方便,setViewPager方法需要额外处理。

综上,使用第二种方式 扩展性和 易用性都比较好。

Indicator

[JakeWharton/ViewPagerIndicator@Github]
这是一个比较全面的indicator,如果我们只需要简单的CircleIndicator,可以抽取来使用。

优秀相关开源库:
[THEONE10211024/CircleIndicator@Github]
[ongakuer/CircleIndicator@Github]

也可以看看本人站在巨人肩膀上完成的[DrawableIndicator@Github]
实时偏移,切换动画,drawable资源

测试 

  my_banner.xml:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"> <com.bobomee.android.scrollloopviewpager.autoscrollviewpager.AutoScrollViewPager
android:id="@+id/picslooper1"
android:layout_width="match_parent"
android:layout_height="wrap_content" /> <com.bobomee.android.drawableindicator.widget.DrawableIndicator
android:id="@+id/pageIndexor1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
app:indicator_height="15dp"
app:indicator_margin="15dp"
app:indicator_select_src="@drawable/select_drawable"
app:indicator_unselect_src="@drawable/unselect_drawable"
app:indicator_width="15dp" />
</RelativeLayout>

   MainActivity:

AutoScrollViewPager viewPager = (AutoScrollViewPager) findViewById(R.id.picslooper1);
viewPager.setFocusable(true);
viewPager.setAdapter(new FragmentStateAdapter(getSupportFragmentManager())); BaseIndicator pageIndex = (BaseIndicator) findViewById(R.id.pageIndexor1);
pageIndex.setViewPager(viewPager); viewPager.startAutoScroll();

  
  最终效果图:

源码:
AutoScrollLoopViewPager@[Github]

Android真正意义上的无限轮播Banner的更多相关文章

  1. Android实现广告页图片无限轮播

    一.概述 对于一个联网的Android应用, 首页广告无限轮播基本已经成为标配了. 那么它是怎么实现的呢? 有几种实现方式呢? 二.无限轮播的实现 1.最常规的手段是用 ViewPager来实现 2. ...

  2. Android之仿京东淘宝的自动无限轮播控件

    在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于Re ...

  3. 安卓开发笔记——自定义广告轮播Banner(实现无限循环)

    关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...

  4. android-自定义广告轮播Banner(无限循环实现)

    关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...

  5. ViewPager实现无限轮播踩坑记

    最近笔者想通过ViewPager来实现一个广告Banner,并实现无限轮播的效果,但是在这个过程中踩了不少的坑,听我慢慢道来.如果大家有遇到和我一样的情况,可以参考我的解决方法,没有那就更好,如果针对 ...

  6. iOS开发之三个Button实现图片无限轮播(参考手机淘宝,Swift版)

    这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动.于是乎就有了今天这篇博客,看到“手机淘宝”这个 ...

  7. iOS开发之ImageView复用实现图片无限轮播

    在上篇博客中iOS开发之多图片无缝滚动组件封装与使用给出了图片无限轮播的实现方案之一,下面在给出另一种解决方案.今天博客中要说的就是在ScrollView上贴两个ImageView, 把ImageVi ...

  8. iOS开发UI篇—无限轮播(循环利用)

    iOS开发UI篇—无限轮播(循环利用) 一.无限轮播  1.简单说明 在开发中常需要对广告或者是一些图片进行自动的轮播,也就是所谓的无限滚动. 在开发的时候,我们通常的做法是使用一个UIScrollV ...

  9. iOS开发UI篇—无限轮播(循环展示)

    iOS开发UI篇—无限轮播(循环展示) 一.简单说明 之前的程序还存在一个问题,那就是不能循环展示,因为plist文件中只有五个数组,因此第一个和最后一个之后就没有了,下面介绍处理这种循环展示问题的小 ...

随机推荐

  1. css实现三角的一些方法

    css实现三角没有想象中的那么难,只要明白border的各种属性的意思就很好明白css三角是如何实现的. 一下是几个很简单的例子:   css三角形状的制作:     css样式:    .trian ...

  2. window bzr launchpad 安装配置

    1: https://launchpad.net/bzr/2.6/2.6b1/+download/bzr-2.6b1-1-setup.exe 使用Standalone版本  , 安装时选择plugin ...

  3. how to use a xml_id in field domain

    "[('parent_id','child_of', %(other_module.xml_id)d)]"

  4. iOS: 获取文件路径

    iOS: 获取文件路径   // 例如 - (NSString *)applicationDocumentsDirectory { return [NSSearchPathForDirectories ...

  5. 关于Unity导出的Android应用在小米、联想等机型上崩溃的问题

    应用在三星手机上运行没有出现问题,但在小米和联想手机上会崩溃.这个问题在刚开始时一直查不到问题所在,后来发现是因为Android清单文件中声明的权限出现了重复,去掉了重复的权限之后,就没有出现崩溃的情 ...

  6. Unity NGUI 3.0.4版本 制作网络版斗地主

    Unity NGUI 3.0.4版本 @by 灰太龙  开发环境 Win7旗舰版 Unity 4.2.1f4 本文就写个开门篇,告诉大家怎么用NGUI,第一步导入NGUI 3.0.4版本! 1.启动U ...

  7. 以Facebook为案例剖析科技公司应有的工具文化

    http://www.36kr.com/p/146507.html 编者按:本文由 @王淮Harry哥 撰写,摘自他即将出版的新书.王淮是 Facebook 早期员工,中国藉第二位工程师第一位研发经理 ...

  8. h.264语法结构分析

    NAL Unit Stream Network Abstraction Layer,简称NAL. h.264把原始的yuv文件编码成码流文件,生成的码流文件就是NAL单元流(NAL unit Stre ...

  9. 【转】Java中字符串中子串的查找共有四种方法(indexof())

    原文网址:http://wfly2004.blog.163.com/blog/static/1176427201032692927349/ Java中字符串中子串的查找共有四种方法,如下:1.int ...

  10. CodeForces 587A

    题目链接: http://codeforces.com/problemset/problem/587/A 题意: 输入n个数,在这n个数中,寻找有多少个数不能消除掉 消除方法:两个相同的数消除后,生成 ...