UICollectionView实现无限轮播图控件

UICollectionView是一个很棒的控件,今天用collectionview实现了一下轮播图控件,主要记录一下思路和一些比较小技巧吧,以便日后翻阅:
首先,基本思路是利用collectionview的本身的一些特性简化我们,我们可以在在每一个cell上添加一个imgeview,将要轮播的图片设置在每一个cell上,可以说基本功能就完成了,因为collectionview类似于uitableview,可以自由滚动,而且可以循环利用,到此一个基本的轮播图控件就完成了。上面这些不再详述,大家都懂,主要是说一下我们标题所示的无限轮播
其实,我的实现方法是利用人的视觉差:
1、首先,根据拿到的图片数组imgs,重新构造一个图片数组carouselImages,新数组的结构是carouselImages = [imgs[lastObject],..imgs的所有元素...,imgs[0]],就是在imgs数组的最前面添加imgs的最后一个元素,在最后面添加imgs的第一个元素,构成新数组carouselImages
2、然后利用新数组carouselImages来作为数据实现基本轮播功能
3、特殊处理
3.1让collectionview默认滚动到row = 1(其实就是我们要轮播的第一张图片)可以在layoutsubviews中实现

    //默认滚动到第一张图片
    if (self.loop && self.carouselView.contentOffset.x == 0)
    {
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:1 inSection:0];
        [self.carouselView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
        self.currentIndex = 1;
    }

3.2在- (void)scrollViewDidScroll:(UIScrollView *)scrollView方法中在滚动到最后一张图片时,继续滚向后动跳到第一张,在当滚动到第一张图片时,继续向前滚动跳到最后一张,而且不能有动画。因为在前面我们重新构造的新数组,当滚动到最后一个图片继续滚动的时候,继续滚动就会滚动出新添加的第一张图片,此时,我们直接让collectionview滚动到第一张图片所在的cell,而且不能带动画,此时,图片没有变,但是collectionview已经重新滚动到第一个cell,由于没有动画,我们基本感觉不出来collectionview的滚动,这样就很自然的从最后一个cell滚动到第一个cell,从而实现了循环,反向滚动思路一样,利用在最前面添加的数组元素即可。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (self.loop)
    {
        CGFloat width = self.frame.size.width;
        NSInteger index = scrollView.contentOffset.x / width;
        
        //当滚动到最后一张图片时,继续滚向后动跳到第一张
        if (index == self.imgs.count + 1)
        {
            self.currentIndex = 1;
            NSIndexPath *indexPath = [NSIndexPath indexPathForItem:self.currentIndex inSection:0];
            [self.carouselView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
            return;
        }
        
        //当滚动到第一张图片时,继续向前滚动跳到最后一张
        //当且仅当滚过第0张图片的一半的时候,滚动到最后一张
        if (scrollView.contentOffset.x < width * 0.5){
            self.currentIndex = self.imgs.count;
            NSIndexPath *indexPath = [NSIndexPath indexPathForItem:self.currentIndex inSection:0];
            [self.carouselView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
            return;
        }
    }
}

项目整体代码地址
https://github.com/tiancanfei/ADCarouselView.git

你可能感兴趣的:(UICollectionView实现无限轮播图控件)