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

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

写这篇博客已经距离我当时写差不多有一个月时间了,也完善了很多,基本是没有bug的,如果有,不妨留言,喜欢的话,劳烦各位点个赞,不喜欢的,不妨看看思路,提提意见

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;
    }
}

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

上图

工程地址–喜欢的话,劳烦各位点个赞,不喜欢的,不妨看看思路,提提意见