设计目标
当前很多应用都有类似下图这样的轮播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非常相似。
- 初始化一个
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;
- 实现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>
