iOS换一种思路写一个无限轮播的滚动视图

摘要: 优雅的轮播图

不循环设置元数据,只用3个cell,连续滚动一辈子滚不到头???

哈哈哈,不开玩笑,你值得拥有
写这篇博客已经距离我当时写轮子差不多有一个月时间了,也完善了很多,基本是没有bug的,如果有,不妨留言,喜欢的话,劳烦各位点个赞,不喜欢的,不妨看看思路,提提意见
##github地址
##码云地址

###1. 以前的思路使用scrollView
基本是以下的方法

a,使用scrollView放轮播图,scroll分页放置图片可以实现左右轮播

b,在头尾各添加两个图片,然后在滑动到最后一张的时候处理滑动

例如123一共3张图片

加两个形成31231一共5张图片

c,当滑动到最后一张时候如何再往右滑动,瞬间无动画切换到起始位置的呢一张图,第一张往左滑动也同样处理

d,处理手动和定时器

scroll实现轮播图链接

###2.最近流行的使用collection
使用collectionView可以很方便的创建轮播图,并且利用collectionViewCell的复用,很方便的管理,原理也很简单

a,把轮播图的元数据扩大,123123123...123123123

b,创建视图把初始位置设置为中间点

c,处理滚动到头时候

如此基本可以解决问题,如果害怕滑动到头一般设置为9999

这里一般会优化数据源,
使用123,在读取时候循环读取

###3.自己的想法和优雅的点子

####想法1,数据源的读取并不优雅

数据源是个很明显的双向循环,这个结构跟以前"听说"的双向链表那么的契合,为什么不使用双向链表作为数据源呢

####想法2,collection设置99999真的的好么,表示我是一个崇尚优雅的猿

本来就是轮播嘛,滑动的时候怎么左右滚,划,总不会需要超过3个的cell吧

####Then->
假如我有一个链表,假如我只使用3个cell,那么我可以写成一个循环滚动的轮播图吗

####原理应该是
每次滑动结束之后就回到中间的那一张

左划3个cell的数据源整体向左,右划类推

###4,想法是不够的,轮子才是我想要的

####循环链表??...面向对象大发好

设置每一个数据

@interface SXLinkList : NSObject
@property(nonatomic, assign) NSInteger index;
@property(nonatomic, strong) id data;
@property(nonatomic, strong) SXLinkList *next;
@property(nonatomic, strong) SXLinkList *last;
@end

把数据联系起来,用for循环创建,然后把头和尾接起来

+ (SXLinkList *)createLinkListWithURLsArray:(NSArray *)urlArr {
//第一只
SXLinkList *head = [[SXLinkList alloc] init];
head.data = [urlArr firstObject];
head.index = 0;
SXLinkList *ptr = head;
for (int i=1; i<urlArr.count; i++){
SXLinkList *node = [[SXLinkList alloc] init];
node.index = i;
node.data = [urlArr objectAtIndex:i];
ptr.next = node;
node.last = ptr;
ptr = node;
}
//穿起来
head.last = ptr;
ptr.next = head;
return head;
}

然后创建了collectionView什么的就很随意的,个数呢,拒绝9,我们只要3

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return 3;
}

问题总是不经意的出现:
怎么判断左划还是又滑?

设置一个参数看是否滑动成功,成功则对比知道左右划,然后切换数据

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
SXCycleCollectionCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"SXCycleCollectionCell" forIndexPath:indexPath];

if (!_isMove) {
_isMove = YES;
_nowPtr = _ptr;
}
if (indexPath.row == 0) {
_ptr = _nowPtr.last;
} else if (indexPath.row == 2) {
_ptr = _nowPtr.next;
}
if (_isLocalImage) {
[cell setCellData:_ptr.data];
} else {
[cell setCellImageIsUrlData:_ptr.data];
}

return cell;
}

然后切换到下标为1的cell

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
if (scrollView.contentOffset.x <= 0 || scrollView.contentOffset.x >= 2 * self.bounds.size.width) {
_isMove = NO;                                                                     //重置是否移动
[scrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO]; //切换到下标1的cell
}
}

#####如此基本搞定!然而运行发现有个bug,慢速的滑动没有问题,快速的滑动会因为cell还没有被回收,会闪一下然后正常,所以不得不手动处理这个bug,所有上边的方法修改为下边

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
//tableViewCell的复用会延缓一点点时间,手动设置以防止没有复用的时候显示错误
if (scrollView.contentOffset.x <= 0 || scrollView.contentOffset.x >= 2 * self.bounds.size.width) {
_isMove = NO;                                                                     //重置是否移动
[scrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO]; //切换到下标1的cell
//更新cell的值(滑动过快时候cell没有回收复用)
SXCycleCollectionCell *cell = (SXCycleCollectionCell *) [self.mainView cellForItemAtIndexPath:[NSIndexPath indexPathForRow:1 inSection:0]];
if (_isLocalImage) {
[cell setCellData:_ptr.data];
} else {
[cell setCellImageIsUrlData:_ptr.data];
}
_pageControl.currentPage = _ptr.index;
}
}

最后设置定时器,添加本地图片,封装类方法

上图



欢迎提意见