在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];
}
}
以上就是思路一中所有的大致流程.接下来的一篇文章中会说一下另外一种方式,而另一种方式是这个思路一的升级版.
