代码地址如下:
http://www.demodashi.com/demo/11608.html

前记

其实想写这个关于无限轮播的记录已经很久很久了,只是没什么时间,这只是一个借口,正如:时间就像海绵,挤一挤还是有的。记得在刚刚开始工作的时候,第一个接触到比较酷的东西就是图片的无限轮播,那还是三年多前的一个火辣辣的夏天,其实可以说是秋天,然而天府之国的成都并没有....下面我们进入正题吧

轮播的方式

到目前为止,我见过的轮播方法,大概有那么三种,由于轮播嘛,所以肯定都是在UIScrollView的基础上

1、在UIScrollView上添加N+2UIImageView

2、在UIScrollView上添加固定的3UIImageView

3、利用重用机制中的UICollectionView来实现

原理

下面,就简单阐述下三种不同方法的原理,以及其优缺点

  • 第一种:其原理图大概如下

该方案的原理是在UIScrollView 上添加N+2UIImageView ,比如上图中,有三张需要轮播的图,那么我们可以添加五个UIImageViewUIScrollView上,图片赋值的顺序如上图,当我们向左滑动到最左的时候,即到3这个位置的时候,调用setContentOffset ,让其滚动到右边的3这个位置,当然不能调用动画,这样肉眼是看不出来的,给我们造成一种视角错觉,如果是向右滑动到最右边的1,其原理也是一样的。

优点:容易理解

缺点:如果有100个图片,那么我们岂不是要添加102个,这样的话,内存肯定是吃不消的把。

  • 第二种:其原理图大概如下

该方案的原理是在UIScrollView 上添加固定的3UIImageView ,在初始化的时候,分别如上图那样赋值,并且调用setContentOffset,让其居中。of course,这只是前奏,对比第一种方法,肯定在逻辑处理上复杂点。

复杂逻辑,当我们向左或者向右滑动一张图片后,需要根据当前滚动的index来设置图片,并且由于滑动后UIScrollViewcontentOffset发生了改变,后续还需要处理一些其他逻辑。

比如向左滑动的话,就到了最右边,这样,我们再向右就不能再滑动了,所以为了保证能继续滑动,我们需要在滑动结束的时候,设置contentOffset,使第二个UIImageView一直处于屏幕中间,除此之外,我们还需要重新设置图片,由于我们向左滑动,图中的2显示的图片其实是我们需要展示的,因为我们要设置contentOffset,这样2这个imageView就又移动到最右边去了,所以这时候我们设置图片,就要将1imageView设置为后面一张即2imageView的图片,将3imageView设置为1之前的图片,如此来实现循环。

下面是部分代码

//减速停止的时候
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
_endOffsetX = scrollView.contentOffset.x; //给imageview赋值
[self loadImage];
//改变offset
[_scrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO]; if (self.didScrollToIndexBlock)
{
self.didScrollToIndexBlock(_currentIndex);
}
}

效果如如下:

优点:相比第一种,内存上开销很小

缺点:代码稍多,理解复杂,如果非常快速滑动,可能会出现最右或者最左滑不动,因为scrollViewDidEndDecelerating还未执行

  • 第三种:其原理图大概如下



其原理很简单,主要是根据UICollectionView 的重用机制,通过创建许多个cell,然后来实现,当然,内存就不用去考虑了,因为这个是通过重用机制实现的。

下面是部分代码

创建UICollectionView

- (void)addCollectionView
{
self.collectionFlowLayout = [[UICollectionViewFlowLayout alloc] init];
self.collectionFlowLayout.minimumLineSpacing = 0;
self.collectionFlowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
self.collectionFlowLayout.itemSize = self.bounds.size; self.collectionView = [[UICollectionView alloc] initWithFrame:self.bounds collectionViewLayout:self.collectionFlowLayout];
self.collectionView.dataSource = (id)self;
self.collectionView.delegate = (id)self;
self.collectionView.pagingEnabled = YES;
self.collectionView.showsVerticalScrollIndicator = self.collectionView.showsHorizontalScrollIndicator = NO;
[self.collectionView registerClass:[GLRollingScrollviewCell class] forCellWithReuseIdentifier:GLRollingScrollviewCellId];
[self addSubview:self.collectionView];
}

自动滚动定时器部分

//开启定时器
- (void)startTimer
{
[self cofigTimer];
} //关闭定时器
- (void)pauseTimer
{
if (self.timer)
{
CFRunLoopTimerInvalidate(self.timer);
CFRunLoopRemoveTimer(CFRunLoopGetCurrent(), self.timer, kCFRunLoopCommonModes);
}
} //配置定时器
- (void)cofigTimer
{
if (self.imageUrlArray.count <= 1)
{
return;
} if (self.timer)
{
CFRunLoopTimerInvalidate(self.timer);
CFRunLoopRemoveTimer(CFRunLoopGetCurrent(), self.timer, kCFRunLoopCommonModes);
} __weak typeof(self)weakSelf = self; CFRunLoopTimerRef time = CFRunLoopTimerCreateWithHandler(kCFAllocatorDefault, CFAbsoluteTimeGetCurrent()+ _intervalTimer, _intervalTimer, 0, 0, ^(CFRunLoopTimerRef timer) {
[weakSelf autoScroll];
});
self.timer = time;
CFRunLoopAddTimer(CFRunLoopGetCurrent(), time, kCFRunLoopCommonModes);
} //自动滚动
- (void)autoScroll
{
NSInteger currentIndex = (self.collectionView.contentOffset.x + self.collectionFlowLayout.itemSize.width * 0.5) / self.collectionFlowLayout.itemSize.width;
NSInteger toIndex = currentIndex + 1; NSIndexPath *indexPath = nil;
if (toIndex == self.totalNumber)
{
toIndex = self.totalNumber * 0.5;
indexPath = [NSIndexPath indexPathForRow:toIndex inSection:0];
[self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
}
else
{
indexPath = [NSIndexPath indexPathForItem:toIndex inSection:0]; [self.collectionView scrollToItemAtIndexPath:indexPath
atScrollPosition:UICollectionViewScrollPositionNone
animated:YES];
}
}

手动滑动时避免和定时器冲突

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
[self pauseTimer];
} - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
[self startTimer];
}

计算当前index

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
if (self.totalNumber == 0)
{
return;
} NSInteger currentIndex = (scrollView.contentOffset.x + self.collectionView.frame.size.width * 0.5) / self.collectionView.frame.size.width;; currentIndex = currentIndex % self.imageUrlArray.count; CGFloat x = scrollView.contentOffset.x - self.collectionView.frame.size.width;
NSUInteger index = fabs(x) / self.collectionView.frame.size.width;
CGFloat fIndex = fabs(x) / self.collectionView.frame.size.width; //下面的第二个条件 可以确保 尽量一次去执行block 而不多次
if (self.rollingDidScrollBlock && fabs(fIndex - (CGFloat)index) <= 0.00001)
{
// NSLog(@" 打印信息:%ld",(long)currentIndex); self.rollingDidScrollBlock(currentIndex);
} }

在上面代理scrollViewDidScroll 中,有个关键地方,大家都知道scrollViewDidScroll 只要再滑动过程中就会一直执行,为了避免多次执行,而导致内存问题,我们希望的是尽可能的在滑动结束的时候来执行,所以这个地方,加了一句判断fabs(fIndex - (CGFloat)index) <= 0.00001,因为在结束的时候,这两个值的差应该很小,几乎可以为0。所以,这样就不会导致代码在此多次执行。

项目文件截图:

文章结尾

针对上的三种方法,我对后面两种方式写了两个简单的demo,希望对大家有帮助。iOS 两种不同的图片无限轮播

代码地址如下:
http://www.demodashi.com/demo/11608.html

注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权

iOS 两种不同的图片无限轮播的更多相关文章

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

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

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

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

  3. iOS最笨的办法实现无限轮播图(网络加载)

    iOS最笨的办法实现无限轮播图(网络加载) 简单的做了一下: 使用方法: 把 请求返回的 图片地址(字符串类型)放进数组中就行 可以使用SDWebImage(我就是用的这个)等..需要自己导入并引用, ...

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

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

  5. iOS实现图片无限轮播之使用第三方库SDCycleScrollView(转)

    下载链接:github不断更新地址:https://github.com/gsdios/SDCycleScrollView #import "ViewController.h" # ...

  6. ViewPager—02图片无限轮播

    布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...

  7. iOS:实现图片的无限轮播

    为尊重原创,特注明原文链接:http://m.myexception.cn/operating-system/1949043.html 图片轮播及其无限循环效果 平时APP中的广告位或者滚动的新闻图片 ...

  8. iOS:实现图片的无限轮播(二)---之使用第三方库SDCycleScrollView

    iOS:实现图片的无限轮播(二)---之使用第三方库SDCycleScrollView 时间:2016-01-19 19:13:43      阅读:630      评论:0      收藏:0   ...

  9. iOS:实现图片的无限轮播---之使用第三方库SDCycleScrollView

    SDCycleScrollView API // //  SDCycleScrollView.h //  SDCycleScrollView #import <UIKit/UIKit.h> ...

随机推荐

  1. [BZOJ1564][NOI2009]二叉查找树 树形dp 区间dp

    1564: [NOI2009]二叉查找树 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 879  Solved: 612[Submit][Status] ...

  2. AC日记——[FJOI2007]轮状病毒 bzoj 1002

    1002 思路: 打表找规律: dp[i]=dp[i-1]*3-dp[i-2]+2; 套个高精就a了: 代码: #include <cstdio> #include <cstring ...

  3. jQuery 立即执行

    ;(function($){// 可以去掉开头的 ; (分号),国外的开发人员编写的插件时的一种习惯 $.fn.pluginName = function() { // Our plugin impl ...

  4. React Native - 0序言

    1. 什么是React Native? React Native是Facebook在React.js Conf 2015大会上推出的一个用于开发Android t iOS App的一个框架.主要编程语 ...

  5. 【转.解析清晰】你真明白 Python 装饰器么?

      原文出处: 武沛齐    装饰器是程序开发中经常会用到的一个功能,用好了装饰器,开发效率如虎添翼,所以这也是Python面试中必问的问题,但对于好多小白来讲,这个功能 有点绕,自学时直接绕过去了, ...

  6. IntelliJ IDEA Mac破解教程

    1.将下面的文件下载并放置到: 下载地址: http://idea.lanyus.com/jar/JetbrainsCrack-2.6.10-release-enc.jar 放到: /Applicat ...

  7. 【最短路】【spfa】小vijos P1447 Updown

    小vijos P1447 Updown 背景 开启了升降梯的动力之后,探险队员们进入了升降梯运行的那条竖直的隧道,映入眼帘的是一条直通塔顶的轨道.一辆停在轨道底部的电梯.和电梯内一杆控制电梯升降的巨大 ...

  8. Python easygui 和 xlrd的安装

    一.python的安装 1.我们从python官方网站:http://www.python.org下载python的安装包 2.解压后点击安装,安装完成后,将安装目录配置到环境变量的path里. 3 ...

  9. 让XCode的Stack Trace信息可读

    程序报错信息如下:

  10. winform treeView 数据绑定

    转载:http://www.jetwu.cn/archives/737 winform treeView 数据绑定 private void Form1_Load(object sender, Eve ...