需求如下:
屏幕快照 2018-09-10 下午6.40.59.png
简单来说就是几张图片轮播滚动。
原理:采用UICollectionView的重用机制和循环滚动的方式实现图片的轮播滚动。
可以实现的需求方式有:
1、本地加载:可以创建不带标题的图片轮播器
2、网络加载:创建带标题的图片轮播器(支持自定义分页控件图标颜色的修改)
3、网络加载:创建自定义图片的pageControlDot的图片轮播器
{currentPageDotImage,pageDotImage}
需要在项目中: pod 'SDCycleScrollView'
在使用的地方:#import "SDCycleScrollView.h"
注意事项
由于该库中图片处理采用了SDWebImage所以需要导入第三方库SDWebImage
首先我们先看下代码结构:
屏幕快照 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
来源:
著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。