LJAutoScrollView自动轮播组件开源

设计目标

当前很多应用都有类似下图这样的轮播banner，这已经成为一种群众喜闻乐见的运营形式。

LJAutoScrollView.gif
目前开源社区有一些类似的组件，但是都不能完全满足需求。于是就造了一个轮子：LJAutoScrollView。

根据项目需求，这个组件需要满足：

• 支持自动循环轮播，使得各个位置的内容都有曝光的机会。
• 足够轻量，不引入更多的复杂度和第三方库
• 轮播内容并不局限于是一张图，而可能是任意自定义的View。目前很多开源的组件都是只支持图片。而LJAutoScrollView的目标是更轻量，也更灵活，将轮播的具体内容交给业务实现方。

实现思路

如果不考虑循环轮播，一个UICollectionView就可以轻松实现。于是思路也很自然，就在UICollectionView的基础上进行扩展，这样也可以直接利用其复用的特性。

自动播放

使用NSTimer起一个定时器，每隔一段时间滚动到下一个Cell。实现很简单，唯一需要注意的是对定时器的管理，避免内存泄漏。

循环播放

当滑到最后一个banner再继续往后滑时，需要回到第一个，开始一个新的循环。同理，用户在第一个banner往回滑时需要退到最后一个。这里使用了一些奇技淫巧。思路来源于http://iosdevelopertips.com/user-interface/creating-circular-and-infinite-uiscrollviews.html

假设我们有十张图，按顺序排放之后，在第十张图后面放置第一张图的副本，我们记为1'，同理在第一张图前面放置第十张图的副本，记为10'，如下图所示：

cycle_scroll.png

当滑到最后1'时，马上重新定位到1，开始一个新的循环。同理，当10'出现时，重新定位到10。代码如下：

- (void)resetContentOffset
{
    CGPoint offset = self.collectionView.contentOffset;
    NSInteger page = floor(offset.x / self.itemSize.width);
    if (page == 0) {
        CGFloat offset = self.itemSize.width * self.numberOfPages;
        [self.collectionView scrollRectToVisible:CGRectMake(offset, 0, self.itemSize.width, self.itemSize.height) animated:NO];
    } else if (page == self.numberOfPages + 1) {
        CGFloat offset = self.itemSize.width;
        [self.collectionView scrollRectToVisible:CGRectMake(offset, 0, self.itemSize.width, self.itemSize.height) animated:NO];
    }
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    [self resetContentOffset];
}

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
    [self resetContentOffset];
}

组件的使用

组件的整体实现很简单，对外暴露的接口基本上与UICollectionView非常相似。

1. 初始化一个LJAutoScrollView:

self.autoScrollView = [[LJAutoScrollView alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, kAutoScrollViewHeight)];
self.autoScrollView.delegate = self;
self.autoScrollView.itemSize = CGSizeMake(self.view.frame.size.width, kAutoScrollViewHeight);
self.autoScrollView.scrollInterval = 1.0f;
self.autoScrollView.numberOfPages = 5;

2. 实现delegate方法:

  - (UIView *)autoScrollView:(LJAutoScrollView *)autoScrollView customViewForIndex:(NSInteger)index {
      UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, kAutoScrollViewHeight)];
      [imageView setContentMode:UIViewContentModeScaleAspectFill];
      NSString *imageName = [NSString stringWithFormat:@"s%ld.jpg", index+1];
      [imageView setImage:[UIImage imageNamed:imageName]];
      return imageView;
}

<b>代码已开源：https://github.com/liaojinxing/LJAutoScrollView
欢迎使用，如有问题欢迎提issue和pull request</b>