无限轮播图片的实现原理

BAT 批处理程序 2017-07-10

无限轮播图相信是很多开发人员常用的一个功能,这里总结一下常用的两种方式的实现原理

一、使用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

相关推荐