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

For XXFor XX

作为一个高手
我习惯了孤独

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

转载请注明出处:For XX » iOS 关于类似于淘宝的广告上下滚动
标签:iOS
分享到: 更多