自动无限循环UIScrollView原理

无限循环:

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

方法1:前后+1方法,这也最常见的一种做法。假如我们有四张需要展示的图片,我们创建了一个数组来保存图片名字,此时数组中保存的是按顺序的1.png,2.png,3.png,4.png,这四个图片名字。要实现无限循环的效果,我们需要改动一下这个数组为:4.png,1.png,2.png,3.png,4.png,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;
- (void)scrollRectToVisible:(CGRect)rect animated:(BOOL)animated;
这两个方法可以在animated参数为NO的时候,帮助我们迅速切换视图。

当每一次滑动结束的时候,UIScrollViewDelegate会有一个回调方法:
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;

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

实现代码如下所示:
int currentPage = (int)self.scrollView.contentOffset.x/320;
if (currentPage==0)
{
    [self.scrollView scrollRectToVisible:CGRectMake(320 * [slideImages count]-2,0,320,460) animated:NO]; // 序号0,跳转到最后1页
}
else if (currentPage==[slideImages count]-1)
{
    [self.scrollView scrollRectToVisible:CGRectMake(320,0,320,460) animated:NO]; // 最后+1,循环第1页
}

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

看看下面的区别:

- (void)scrollViewDidEndDecelerating:(UIScrollView *)aScrollView {
    
    [_scrollView setContentOffset:CGPointMake(_scrollView.frame.size.width, 0) animated:YES];
    
}

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

int x = aScrollView.contentOffset.x;
    //往下翻一张
    if(x >= (2*self.frame.size.width)) {
        [self loadData];
    }
    //往上翻
    if(x <= 0) {
        [self loadData];
    }
}

loadData() 的实现原理非常简单,现将UIScrollView的所有视图移除,在重新根据数据源绘图来加载到UIScrollView中。
- (void)loadData
{    
    //从scrollView上移除所有的subview
    NSArray *subViews = [_scrollView subviews];
    if([subViews count] != 0) {
        [subViews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    }
        
    for (int i = 0; i < 3; i++) {  //只有3个视图
        UIView *v = [_curViews objectAtIndex:i];
        v.frame = CGRectOffset(v.frame, v.frame.size.width * i, 0);
        [_scrollView addSubview:v];
    }
    
    [_scrollView setContentOffset:CGPointMake(_scrollView.frame.size.width, 0)];
}

至于你怎么绘图就是你的事情了,我这里只是简单的分析一下。

自动无限循环

刚才讲解了无限循环的两种不同实现方法,下面来讲解一下如何让它自动滑动。我想大家都用过NSTimer,没错,用它来实现简单的计时器最好不过了。

在适当位置初始化一个NSTimer,设定3秒执行一次runTimePage()方法:

// 定时器 循环
    [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(runTimePage) userInfo:nil repeats:YES];

在runTimePage()方法中,我们将要实现获取当前page页数,然后跳转到下一个page。

- (void)runTimePage
{
    int page = pageControl.currentPage; // 获取当前的page
    page++;
    pageControl.currentPage = page > [slideImages count]-2 ? 0 : page ;
    [self.scrollView setContentOffset:CGPointMake(320*(page+1),0) animated:YES];
}

参考demo地址:

demo1:http://code4app.com/ios/EScrollerView/51935e166803fac572000003

demo2:http://code4app.com/ios/循环滚动视图/5052e6a26803fa4a0c000003

demo3:http://code4app.com/ios/循环滚动图片/51df58a16803fadd44000000

时间: 2024-11-10 15:14:41

自动无限循环UIScrollView原理的相关文章

viewpager 自动无限循环 这段代码移到你的程序中就可以用了

本程序需要懂得viewpager的基础知识,也就是说你能够自己写出一个手动滑动的viewpager,下面我将附带加小圆点的知识 那么我们回顾一下图片轮转的基础知识,如果你已经对viewpager很熟悉了就不用看了,浪费时间 1.viewpager是在v4兼容报里面的,使用控件时请带上报名 2.数据来源用list存放,我这里用的是textview做的小圆点list<textview>,layout做的单张幻灯片list<view>,将xml文件inflate成为view,View.i

多组图自动无限循环(swiper轮播)

前两天的一个项目中遇到多组图片无限轮播,当时采用了swiper 但是没有解决让它无限轮播.今天再次尝试了一下发现是自己的样式写错了.今天在这里写一下,为了给自己一个警醒不要犯同样的错误 首先先引入一下swiper的css文件和js文件 <link rel="stylesheet" type="text/css" href="../swiper-4.5.0/dist/css/swiper.min.css" /> <script s

UIScrollView实现图片轮播器及其无限循环效果

图片轮播器: 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" 2 3 @interface YYViewController () <UIScrollViewDelegate> 4 @property (weak, nonatomic) IBOutlet UIScrollView *scrollview; 5 /** 6 * 页码 7 */ 8 @prop

IOS开发系列--无限循环的图片浏览器

--UIKit之UIScrollView 概述 UIKit框架中有大量的控件供开发者使用,在iOS开发中不仅可以直接使用这些控件还可以在这些控件的基础上进行扩展打造自己的控件.在这个系列中如果每个控件都介绍一遍确实没有必要,所谓授人以鱼不如授人以渔,这里会尽可能让大家明白其中的原理,找一些典型的控件进行说明,这样一来大家就可以触类旁通.今天我们主要来看一下UIScrollView的内容: UIView UIScrollView 实战--图片浏览器 UIView 在熟悉UIScrollView之前

iOS无限循环滚动scrollview

经常有园友会问"博主,有没有图片无限滚动的Demo呀?", 正儿八经的图片滚动的Demo我这儿还真没有,今天呢就封装一个可以在项目中直接使用的图片轮播.没看过其他iOS图片无限轮播的代码,也不了解他们的原理,我今天封装这个图片无限轮播是借鉴Web前端中的做法,因为之前写Web前端的时候,实现幻灯片就是这么做的,今天就在iPhone上搞搞.下面的东西是自己写的了,关于轮播的东西这个开源项目也是相当不错的https://github.com/nicklockwood/iCarousel ,

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

关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户"友好性",下面来看几个示例图:    再来看下我仿写的效果: 关于广告轮播Banner这个东西,GitHub上面应该有现成的开源组件,不过我没去找过,觉得实现起来不会太难,就自己去仿写了,下面我说下实现的思路: 1.首先看到这个可以滑动切换图片的界面,我们很自然就会想到ViewPager控

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

关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户"友好性",下面来看几个示例图:     再来看下我仿写的效果: 关于广告轮播Banner这个东西,GitHub上面应该有现成的开源组件,不过我没去找过,觉得实现起来不会太难,就自己去仿写了,下面我说下实现的思路: 1.首先看到这个可以滑动切换图片的界面,我们很自然就会想到ViewPager

Ubuntu中输入startx并重启后登录界面无限循环问题

今天,在学习了编程两个多月后遇到的第一个菜鸟技术问题,解决后有一种兴奋和迷茫. 言归正传,说说遇到的问题和解决方案. 在Ubuntu14.04中,按照linux的传统做法(基于redhat),在root下输入了startx并enter,结果出现了一个没有任何图标的界面,没有任何命令可以输入,于是选择重启,那么问题来了. 重启后进入登录界面,但是正确输入密码后还是输入密码的无限循环,纠结...Google.百度后发现原来有好多菜鸟也有同样的问题,于是对此问题进行了探讨学习. 先说解决方案: (1)

Unity UGUI —— 无限循环List

还记得大学毕业刚工作的时候是做flash的开发,那时候看到别人写的各种各样的UI组件就非常佩服,后来自己也慢慢尝试着写,发现其实也就那么回事.UI的开发其实技术的成分相对来说不算多,但是一个好的UI是绝对少不了底层组件的支持的.我个人认为UI组件中相对比较复杂的就是List了,所以,这两天实现了一个UGUI的list,写了好几个版本,最终这个版本是相对比较好用的,在这我介绍一下大概思路,一是巩固一下知识做个记录,二是发扬一下分享精神.嘿嘿,大家多多赐教. 写List有两个重点是需要考虑的: 1.