iOS--自动无限循环UIScrollView

无限循环:

我们都知道UIScrollView 有一种很流畅的切换效果,结合UIPageControl的辅助展示效果,就可以完成一个很不错的产品介绍功能页面。那么像一些购物APP中,商品展示页面无限滚动效果是如何实现的呢?

方法一:

前后 +1 的方法,这也是最常见的一种做法。假如我们有四张需要展示的图片;我们创建了一个数组来保存图片名字,此时数组中保存的是按顺序1.png、2.png、3.png、4.png,这四个图片的名字。要想实现无限循环的效果,我们需要改动下这个数组为:4.png、1.png、2.png、3.png、4png、1.png,我们发现在原来的数组的前后分别加入了一个图片的名字,即将要循环展示的下一张图片的名字。当你滑动到4.png的时候,下一张会是1.png。当你在 1.png往回滑动的时候,将要出现4.png。

核心内容:

我们发现目前数组中有6个图片,当我们从3.png滑动到4.png,又从4.png 滑到1.png 的时候,我们要神不知鬼不觉的迅速切换到排在第二位的1.png。反像滑到的时候也是如此,从1.png滑到4.png的时候,我们要神不知鬼不觉的切换排到倒数第二位的4.png。那么怎么样才能实现神不知鬼不觉呢?
看下面这两个UIScrollView的实例方法

- (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated;  // animate at constant velocity to new offset
- (void)scrollRectToVisible:(CGRect)rect animated:(BOOL)animated;         // scroll so rect is just visible (nearest edges). nothing if rect completely visible

这两个方法可以在animated参数为NO 的时候,帮我们迅速的切换视图。

当每一次滑到结束的时候,UIScrollViewDelegate 会有一个回调方法:

- (void)scrollViewDidEndDecelerating:(UIScrollView *)_scrollView

此时我们来检测是否滑到我们将要出发的1.png和4.png,如果是的话,那么就悄悄调用上面的两个方法中的任意一个来实现视图切换。

实现代码如下所示:

- (void)scrollViewDidEndDecelerating:(UIScrollView *)_scrollView
{
    if (currentPageIndex==0) {
      
        [_scrollView setContentOffset:CGPointMake(([imageArray count]-2)*viewSize.size.width, 0)];
    }
    if (currentPageIndex==([imageArray count]-1)) {
       
        [_scrollView setContentOffset:CGPointMake(viewSize.size.width, 0)];
        
    }

}

方法二:

瞒天过海,此方法中无论数据源有多少个,UIScrollView只保留其中的三个视图,其实这是方法一的变种。当你滑动UIScrollView的时候,无非是向前滑动,或者是向后滑动,所以能够组成无限循环的基本条件就是前、中、后三个视图。当你每次滑动的时候我都神不知鬼不觉的切换一下这三个视图。
这也是和方法一的最主要区别。

区别:

#pragma mark 滚动停止事件
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{
    //重新加载图片
//    [self reloadImage];
    //移动到中间
    [_scrollView setContentOffset:CGPointMake(_scrollView.frame.size.width, 0) animated:NO];
    
}

我们发现每一次滑动完成后,UIScrollView总是重新切换默认的中这一个视图。下面这个代理方法将要实现重置这三个视图:

#pragma mark 重新加载图片
- (void)reloadImage
{
    [self resumeTimerWithDelay] ;
    
    
    int leftImageIndex,rightImageIndex ;
    CGPoint offset = [_scrollView contentOffset] ;
    
    if (offset.x > self.frame.size.width)
    { //向右滑动
        _currentImageIndex = (_currentImageIndex + 1) % _imageCount ;
    }
    else if(offset.x < self.frame.size.width)
    { //向左滑动
        _currentImageIndex = (_currentImageIndex + _imageCount - 1) % _imageCount ;
    }
    
    _centerImageView.image = [UIImage imageNamed:_imglist[_currentImageIndex]];
    
//    NSLog(@"manual move at index : %d",_currentImageIndex) ;
    
    //重新设置左右图片
    leftImageIndex  = (_currentImageIndex + _imageCount - 1) % _imageCount ;
    rightImageIndex = (_currentImageIndex + 1) % _imageCount ;
    _leftImageView.image  = [UIImage imageNamed:_imglist[leftImageIndex]]  ;
    _rightImageView.image = [UIImage imageNamed:_imglist[rightImageIndex]] ;
    
}

方法三(这里就不讲解了):

原理:利用CollectionView来实现,代码也非常简单。一次性给数据源传入 images.count * 1000,然后默认加载的时候,跳转到 (images.count * 1000)/2.0 + ((images.count * 1000)/2.0) % images.count的位置就实现了

自动无限循环

刚才讲解了无限循环的两种不同实现方法,下面来讲解下让它自动滑动,我想大家都用过NSTime,没错,用他来实现简单的计时器最好不过了。
至于你怎么绘图就是你的事情了,这里只是简单的分析一下。


run.png

HYBLoopScrollView

&SDCycleScrollView


随手点个喜欢 吧~

关注我

QQ -- iOS交流群:107548668

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,692评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,482评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,995评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,223评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,245评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,208评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,091评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,929评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,346评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,570评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,739评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,437评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,037评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,677评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,833评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,760评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,647评论 2 354

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,095评论 4 62
  • 第七章 大型程序架构 虽然在一个脚本里完成一个web应用很便利,但是这也意味着它很难扩展。当程序不断增长,越来越复...
    易木成华阅读 914评论 0 1
  • 近期与友人聊天。他说,每天朝九晚五的生活令他崩溃,每天做一样的事同一样的人交谈,拿死工资,没有一点进步和动力,他想...
    吴希道阅读 5,310评论 0 8