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,没错,用他来实现简单的计时器最好不过了。
至于你怎么绘图就是你的事情了,这里只是简单的分析一下。


iOS--自动无限循环UIScrollView_第1张图片
run.png

HYBLoopScrollView

&SDCycleScrollView


随手点个喜欢 吧~

关注我

QQ -- iOS交流群:107548668

你可能感兴趣的:(iOS--自动无限循环UIScrollView)