SDCycleScrollView简单实用

需求如下:

SDCycleScrollView简单实用_第1张图片

屏幕快照 2018-09-10 下午6.40.59.png

简单来说就是几张图片轮播滚动。

原理:采用UICollectionView的重用机制和循环滚动的方式实现图片的轮播滚动。

可以实现的需求方式有:

1、本地加载:可以创建不带标题的图片轮播器

2、网络加载:创建带标题的图片轮播器(支持自定义分页控件图标颜色的修改)

3、网络加载:创建自定义图片的pageControlDot的图片轮播器

{currentPageDotImage,pageDotImage}

需要在项目中:    pod 'SDCycleScrollView'

在使用的地方:#import "SDCycleScrollView.h"

注意事项

由于该库中图片处理采用了SDWebImage所以需要导入第三方库SDWebImage

首先我们先看下代码结构:

SDCycleScrollView简单实用_第2张图片

屏幕快照 2018-09-12 下午3.25.10.png

SDCycleScrollView实现的代码都放在SDCycleScrollView.m中。

项目中如果想使用并初始化SDCycleScrollView,可以使用如下方式:

/** 初始轮播图(推荐使用) */+ (instancetype)cycleScrollViewWithFrame:(CGRect)frame delegate:(id)delegate placeholderImage:(UIImage*)placeholderImage;+ (instancetype)cycleScrollViewWithFrame:(CGRect)frame imageURLStringsGroup:(NSArray*)imageURLStringsGroup;/** 本地图片轮播初始化方式 */+ (instancetype)cycleScrollViewWithFrame:(CGRect)frame imageNamesGroup:(NSArray*)imageNamesGroup;/** 本地图片轮播初始化方式2,infiniteLoop:是否无限循环 */+ (instancetype)cycleScrollViewWithFrame:(CGRect)frame shouldInfiniteLoop:(BOOL)infiniteLoop imageNamesGroup:(NSArray*)imageNamesGroup;

结合本次需求,我采用了推荐使用的方式进行初始化

UIView*infoView = [[UIViewalloc] init];    infoView.backgroundColor = [UIColorwhiteColor];    [scrollView addSubview:infoView];NSArray*imagesURLStrings = [self.model.resources_list valueForKey:@"resource_url"];    SDCycleScrollView *cycleScrollView = [SDCycleScrollView cycleScrollViewWithFrame:CGRectMake(24,14, kSCREEN_WIDTH -48, (kSCREEN_WIDTH -48) /327*160) delegate:selfplaceholderImage:[UIImageimageNamed:@"placeholder"]];    cycleScrollView.pageControlAliment = SDCycleScrollViewPageContolAlimentCenter;    cycleScrollView.currentPageDotColor = [UIColorwhiteColor];    cycleScrollView.imageURLStringsGroup = imagesURLStrings;    cycleScrollView.autoScrollTimeInterval =5;    cycleScrollView.currentPageDotColor = [UIColorZHBlueColor];    cycleScrollView.pageDotColor = [UIColorwhiteColor];    cycleScrollView.layer.masksToBounds =YES;    cycleScrollView.layer.cornerRadius =4;    [infoView addSubview:cycleScrollView];

我看到源代码中实现自动轮播滚动代码是这样子滴

通过创建一个Timer,开启后加到runloop中,目的是防止滑动工程中出现的卡顿现象。

- (void)setupTimer{    [selfinvalidateTimer];// 创建定时器前先停止定时器,不然会出现僵尸定时器,导致轮播频率错误。NSTimer*timer = [NSTimerscheduledTimerWithTimeInterval:self.autoScrollTimeInterval target:selfselector:@selector(automaticScroll) userInfo:nilrepeats:YES];    _timer = timer;    [[NSRunLoopmainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];}

无线循环中添加timer的目的是要获取到当前的index,以及滚动到当前的index,作者是这样实现的:

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

然后作者创建了count * 100的这样的一个collectionView,每次都是从中间位置开始轮播。当currentIndex >= _totalItemsCount的时候就会将contentOffset设置到_totalItemsCount *0.5的位置

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

在layoutSubViews方法中作者也实现了类似的方法,初始化的时候就从_totalItemsCount *0.5的位置开始轮播

if(_mainView.contentOffset.x ==0&&  _totalItemsCount) {inttargetIndex =0;if(self.infiniteLoop) {            targetIndex = _totalItemsCount *0.5;        }else{            targetIndex =0;        }        [_mainView scrollToItemAtIndexPath:[NSIndexPathindexPathForItem:targetIndex inSection:0] atScrollPosition:UICollectionViewScrollPositionNoneanimated:NO];    }

并且作者还针对app置于后台一会后再置于前台,有可能会出现卡住的现象。作者在这里添加了一个解决方法:重新设置_totalItemsCount *0.5的位置开始轮播

#pragma mark - public actions- (void)adjustWhenControllerViewWillAppera{longtargetIndex = [selfcurrentIndex];if(targetIndex < _totalItemsCount) {        [_mainView scrollToItemAtIndexPath:[NSIndexPathindexPathForItem:targetIndex inSection:0] atScrollPosition:UICollectionViewScrollPositionNoneanimated:NO];    }}

如果需要实现点击、滚动回调需要设置代理,完成相应的delegate即可。

@protocolSDCycleScrollViewDelegate@optional/** 点击图片回调 */- (void)cycleScrollView:(SDCycleScrollView *)cycleScrollView didSelectItemAtIndex:(NSInteger)index;/** 图片滚动回调 */- (void)cycleScrollView:(SDCycleScrollView *)cycleScrollView didScrollToIndex:(NSInteger)index;

作者:羊妞麻麻

链接:https://www.jianshu.com/p/4385dd5172ee

来源:

著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

你可能感兴趣的:(SDCycleScrollView简单实用)