iOS无限轮播思路（一）

在iOS开发中其实无限轮播是一个很常见的UI组件,在没有UICollectionView之前一般都是用UIScrollView去实现的,在本文中主要是记录下无限轮播用的实现思路.

这个系列一共介绍两种思路,本文先来介绍第一种思路:

思路一

大致的思路是这样的:在ScrollView上一共放n+2个内容(n代表要展示的图片数),例如我现在要展示5张图片,那么n+2的话就需要7张图片,那么图片的顺序依次是:图片5，图片1，图片2，图片3，图片4，图片5，图片1,当我滚动到第七张的时候,我们展示的是图片1,这时候我们要将设置ContentOffset来将ScrollView滚动到第二张的位置(也是图片1),这个时候用户继续划动的话,下一张图片就是图片2了,这样可以给用户制造出一种无限滑动的假象,那么用户往回划的时候划到第一张(图片5)的时候,将ScrollView滚动到第六张图片的位置(也是图片5),这样在继续往回划动的话就滚动到了图片4的位置.

我们来看下代码:

• 设置展示的图片数据源

- (void)setimagesArray:(NSArray<NSString *> *)imageNamesArray
{
    NSInteger arrayCount = imageNamesArray.count + 2;
    // 拼接数据源数组
    NSMutableArray *tempImageNamesArray = [NSMutableArray arrayWithCapacity:arrayCount];
    [tempImageNamesArray addObject:[imageNamesArray lastObject]];
    [tempImageNamesArray addObjectsFromArray:imageNamesArray];
    [tempImageNamesArray addObject:[imageNamesArray firstObject]];
    
    // 创建图片数组
    NSMutableArray *tempImagesArray = [NSMutableArray arrayWithCapacity:arrayCount];
    [tempImageNamesArray enumerateObjectsUsingBlock:^(NSString *  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        
        CGRect imageViewFrame = CGRectMake(idx * self.frame.size.width, 0, self.frame.size.width, self.frame.size.height);
        UIImage *image = [UIImage imageNamed:obj];
        UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
        imageView.frame = imageViewFrame;
        [tempImagesArray addObject:imageView];
        
    }];
    
    _imagesArray = tempImagesArray.copy;
}

• 我们需要将ScrollView滚动到第二张的位置(图片1).

// (0, 0)为起始位置,要展示第二张图片要设置ScrollView的位置
[self.scrollView setContentOffset:CGPointMake(self.frame.size.width, 0) animated:NO];

在滚动过程我们需要用到UIScrollViewDelegate中的scrollViewDidEndDecelerating:方法来判定是否需要回滚到我们指定的位置,这个方法是整个思路的核心,代码如下:

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    // 根据偏移量获取到当前展示的是图片几
    NSInteger pageNum = scrollView.contentOffset.x / self.frame.size.width;
    
    /*
    判断如果当前展示的是否是最后一张图片(图片1), 
    如果是的话就滚动到第二张图片(图片1)的位置
    如果当前展示的是第一张图片(图片5)的话就滚动到第六张(图片5)的位置
    */ 
    if (pageNum == _imagesArray.count - 1)
    {
        [scrollView setContentOffset:CGPointMake(self.frame.size.width, 0) animated:NO];
        self.pageControl.currentPage = 0;
        return;
    }
    else if (pageNum == 0)
    {
        [scrollView setContentOffset:CGPointMake(self.frame.size.width * (_imagesArray.count - 2), 0) animated:NO];
        self.pageControl.currentPage = _imagesArray.count - 2;
        return;
    }
    
    // 设置pageControl的currentPage数
    self.pageControl.currentPage = pageNum - 1;
}

这里还要说明下,最终用户看到的其实就是我们需要展示的5张图片,那么PageControl的numberOfPages就是5.

以上就是整个思路的大概流程.

再补充下上面说到的是手动拖动的流程,那么我们日常的看见的无线轮播都是自动播放的,那么这里就需要增加一个定时器来定时执行滑动方法

- (void)scrollAnimation
{
    // 获取当前正在第几页
    NSInteger pageNum = self.scrollView.contentOffset.x / self.frame.size.width;
    
    // 滚动到下一页
    [self.scrollView setContentOffset:CGPointMake(self.frame.size.width * (pageNum + 1), 0) animated:YES];
    self.pageControl.currentPage = pageNum;
}

其中setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated;这个方法中如果后面那个参数填写的YES的话就会调用UIScrollViewDelegate中的scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView这个方法,由于是往一个方向移动所以不用关注反向操作

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
    // 如果当前展示的是最后一张图片(图片1), 就滚动到第二张图片(图片1)的位置
    NSInteger pageNum = self.scrollView.contentOffset.x / self.frame.size.width;
    if (pageNum == _imagesArray.count - 1)
    {
        self.pageControl.currentPage = 0;
        [self.scrollView setContentOffset:CGPointMake(self.frame.size.width, 0) animated:NO];
    }
}

以上就是思路一中所有的大致流程.接下来的一篇文章中会说一下另外一种方式,而另一种方式是这个思路一的升级版.