无限轮播图片的实现原理
无限轮播图相信是很多开发人员常用的一个功能,这里总结一下常用的两种方式的实现原理
一、使用UIScrollview实现无限轮播
用UIScrollView实现,在scrollView上添加3个UIImageView,分别用来显示上一张图片,当前显示的图片,下一张图片。scrollView在不滑动的时候永远显示当前图片(第二张图片)即contentOffset = CGPointMake(scrollViewW,0),在滑动的时候可以预览部分上一张图片或下一张图片。现在以向左滑动为例,因为已经设置好三张图片,我们向左滑动可以看到下一张图片的一部分(此时屏幕显示着部分当前图片和部分下一张图片)。如果完成了向左滑动,在UIScrollView的代理方法 scrollViewDidEndDecelerating:里 将三个UIImageView上显示的图片更换(下标一次+1),此时第二个imageView显示的就是之前的第三个imageView上的图片,最后将scrollView的偏移量拉回到第二张图片上[scrollView setContentOffset:CGPointMake(bannerScrollViewW, 0) animated:NO]
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
NSInteger leftIndex;
NSInteger rightIndex;
if (scrollView.contentOffset.x == bannerScrollViewW * 2) {
/** 向左滑 计算 左 中 右 的下标索引*/
leftIndex = self.centerIndex % self.imageNames.count;
self.centerIndex = (self.centerIndex+1) % self.imageNames.count;
rightIndex = (self.centerIndex +1) % self.imageNames.count;
//NSLog(@"往左滑");
}else if (scrollView.contentOffset.x == 0) {
/** 向右滑 计算 左 中 右 的下标索引*/
rightIndex = self.centerIndex;
self.centerIndex = (self.centerIndex - 1) < 0?(self.imageNames.count - 1):(self.centerIndex - 1);
leftIndex = (self.centerIndex - 1) < 0?(self.imageNames.count - 1):(self.centerIndex - 1);
//NSLog(@"往右滑");
}else{
// 没有滑走 什么都不做,直接return
return;
}
/** 设置图片 */
self.leftImageView.image = [UIImage imageNamed:self.imageNames[leftIndex]];
self.centerImageView.image = [UIImage imageNamed:self.imageNames[self.centerIndex]];
self.rightImageView.image = [UIImage imageNamed:self.imageNames[rightIndex]];
/** 设置pageControl currentPage 因为永远显示中间的图片,故此currentPage=centerIndex */
self.pageControl.currentPage = self.centerIndex;
// 将 bannerScrollView 拉回到中间图片的位置 显示图片
[scrollView setContentOffset:CGPointMake(bannerScrollViewW, 0) animated:NO];
}
二、使用UICollectionView实现无限轮播
N张照片把contentsSize设置为N+2个图片的宽度,例子如下,两端填充如图,当处于一端时,且即将进入循环状态的时候,如第二张图,从状态1滑动到状态2,在滑动结束的时候,将当前的位置直接转到状态3,直接setContentOffset神不知鬼不觉,视觉上是循环的。
注意:这里不能使用- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView;
当我们滑动cell是是无法触发这个函数的,虽然它是动画结束后就可以触发,但是它指的动画是系统原生动画,如我们的手动滑动是无法触发该函数的。
总结源自:
http://www.jianshu.com/p/7123a07cc552