iOS 关于类似于淘宝的广告上下滚动

前言

如若项目中有类似于淘宝的广告上下滚动的需求，有可能是文字轮播，有可能是多行轮播，因为需求的变化太多，所以上下滚动的原理理解了就自己简单封装就好了。（ ps:封装的结果如果是框架，那么很多人将受益无穷，如果不是框架，只是罗列了那么几种可能，改动起来也是有些繁琐。）

言归正传

分析两个库：一个是SDCycleScrollView,一个是SGAdvertScrollView

第一个库是常用的轮播。里面有有文字轮播，demo里有说明：

 // 网络加载 --- 创建只上下滚动展示文字的轮播器
    // 由于模拟器的渲染问题，如果发现轮播时有一条线不必处理，模拟器放大到100%或者真机调试是不会出现那条线的
    SDCycleScrollView *cycleScrollView4 = [SDCycleScrollView cycleScrollViewWithFrame:CGRectMake(0, 750, w, 40) delegate:self placeholderImage:nil];
    cycleScrollView4.scrollDirection = UICollectionViewScrollDirectionVertical;
    cycleScrollView4.onlyDisplayText = YES;
    
    NSMutableArray *titlesArray = [NSMutableArray new];
    [titlesArray addObject:@"纯文字上下滚动轮播"];
    [titlesArray addObject:@"纯文字上下滚动轮播 -- demo轮播图4"];
    [titlesArray addObjectsFromArray:titles];
    cycleScrollView4.titlesGroup = [titlesArray copy];
    
    [demoContainerView addSubview:cycleScrollView4];

允许我中间插一句话，一致以来轮播图，不管是面试还是项目中，我们用的都是Scrollview封装的三张图轮播，两张图轮播，等等。但是在了解广告轮播的过程中我才到这个库里仔细看了一下原理。

SDCycleScrollView是基于UICollectionView封装的，在初始的时候他一次性创建了100份的图片数组，基于UICollectionView复用的特性，所以性能方面也是不错的。在定时器轮播的时候，当轮播到最后一张图的时候，会自动回滚到50倍的地方。然后就形成了自动轮播的假象。

源码片段如下：

100份的图片数组

 _totalItemsCount = self.infiniteLoop ? self.imagePathsGroup.count * 100 : self.imagePathsGroup.count;

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

轮播的代码：

- (void)scrollToIndex:(int)targetIndex
{
    if (targetIndex >= _totalItemsCount) {
        if (self.infiniteLoop) {
            targetIndex = _totalItemsCount * 0.5;
            [_mainView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:targetIndex inSection:0] atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
        }
        return;
    }
    [_mainView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:targetIndex inSection:0] atScrollPosition:UICollectionViewScrollPositionNone animated:YES];
}

可以很清楚的看到超过图片数组时会回滚到50倍的地方。

接下来说一下SGAdvertScrollView

在做广告上下滚动时，有多行的轮播，作者很巧妙的使用了100倍的数组（外面传入的模型数组），作为100个分区，回滚的思路和SDCycleScrollView一模一样。也就不再说明了。

源码片段：

static NSInteger const advertScrollViewMaxSections = 100;

- (void)beginUpdateUI {
    if (self.titleArr.count == 0) return;
    
    // 1、当前正在展示的位置
    NSIndexPath *currentIndexPath = [[self.collectionView indexPathsForVisibleItems] lastObject];
    
    // 马上显示回最中间那组的数据
    NSIndexPath *resetCurrentIndexPath = [NSIndexPath indexPathForItem:currentIndexPath.item inSection:0.5 * advertScrollViewMaxSections];
    [self.collectionView scrollToItemAtIndexPath:resetCurrentIndexPath atScrollPosition:UICollectionViewScrollPositionBottom animated:NO];

    // 2、计算出下一个需要展示的位置
    NSInteger nextItem = resetCurrentIndexPath.item + 1;
    NSInteger nextSection = resetCurrentIndexPath.section;
    if (nextItem == self.titleArr.count) {
        nextItem = 0;
        nextSection++;
    }

    NSIndexPath *nextIndexPath = [NSIndexPath indexPathForItem:nextItem inSection:nextSection];

    // 3、通过动画滚动到下一个位置
    [self.collectionView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionBottom animated:YES];
}

最后

理解了原理，我们就真的可以为所欲为了，定制自己的广告上下轮播。

这里是我写的一个小demo：LXAdvertScrollview

最后编辑于：2018.01.10 09:38:11