iOS实现无限循环图片轮播器的封装
项目中很多时候会碰到这个需求，实现多张图片的无限循环轮转，以前做过，项目中几个地方的都用到了，当时没有封装，几个地方都拷贝几乎一样的代码，代码复用性不好，今天没事封装了一下，使用起来比较简单。
首先，说说我实现循环轮转图片的思想，在UIScrollView中添加了3个UIImageView，并排排列，我们看到的永远只是第二个UIImageView，这样的话，你一直可以向左，向右滑动，当你向左滑动是，这是你滑动到了最后一个UIImageView不能在向左边滑动了，这时，我在后面悄悄的将第二个UIImageView图片设置为当前要显示的图片，调整UIScrollView的contentOffset属性，如：
[_contentScrollViewsetContentOffset:CGPointMake(self.bounds.size.width,0)animated:NO]（使用者根本感觉不出来这种变化）所以，此时，你看到的又是第二个UIImageView，所以此时你又可以向左滑动，当你向右边滑动时候处理类似，导致结果你可以向左边，右边无线循环轮转图片。
JGCirculateSwitchImgView.h头文件
@interfaceJGCirculateSwitchImgView:UIView @property(nonatomic,strong)NSArray*imgUrlArr; @end
头文件中只有一个需要设置的成员变量imgUrlArr数组，就是你要显示图片路径的数组，将通过这个数组访问图片。
JGCirculateSwitchImgView.m文件
typedefNS_ENUM(NSInteger,SwitchDirection)
{
//未成功旋转
SwitchDirectionNone=-1,
//向右旋转图片
SwitchDirectionRight=0,
//向左训转图片
SwitchDirectionLeft=1,
};
定义了SwitchDirection枚举，表示图片向左，向右轮转，或者什么也不做。
//默认5秒训转图片一次,可以根据需要改变 #defineWiatForSwitchImgMaxTime5 #import"JGCirculateSwitchImgView.h" #import"UIImageView+WebCache.h" @interfaceJGCirculateSwitchImgView() //底部UIScrollView @property(nonatomic,weak)UIScrollView*contentScrollView; //显示页码的UIPageControl控件 @property(nonatomic,weak)UIPageControl*pageControlView; //用保存当前UIPageControl控件显示的当前位置 @property(nonatomic,assign)NSIntegercurrentPage; //用于保存当前显示图片在图片urlArr数组中的索引 @property(nonatomic,assign)NSIntegercurrentImgIndex; //UIScrollView上的三个UIImgaView这里通过3个UIImageView实现无限循环图片轮转 @property(nonatomic,weak)UIImageView*imgView1; @property(nonatomic,weak)UIImageView*imgView2; @property(nonatomic,weak)UIImageView*imgView3; @property(nonatomic,assign)BOOLisDragImgView; //SwitchDirection类型，用于保存滑动的方向 @property(nonatomic,assign)SwitchDirectionswDirection; @end
-(id)initWithFrame:(CGRect)frame
{
if(self=[superinitWithFrame:frame])
{
[selfcreateContentScrollView];
[selfcreatePageControlView];
//默认第一页
_currentPage=0;
//默认显示第一张图片
_currentImgIndex=0;
_isDragImgView=NO;
_swDirection=SwitchDirectionNone;
}
returnself;
}
创建UIScrollView代码
-(void)createContentScrollView
{
UIScrollView*scrollView=[[UIScrollViewalloc]initWithFrame:self.bounds];
scrollView.delegate=self;
scrollView.showsHorizontalScrollIndicator=NO;
scrollView.shouldGroupAccessibilityChildren=NO;
scrollView.pagingEnabled=YES;
[selfaddSubview:scrollView];
_contentScrollView=scrollView;
}
创建UIPageControl
-(void)createPageControlView
{
UIPageControl*pageControlVw=[[UIPageControlalloc]init];
pageControlVw.frame=CGRectMake(0,0,80,20);
pageControlVw.center=CGPointMake(self.center.x,self.bounds.size.height-20);
pageControlVw.backgroundColor=[UIColorredColor];
_pageControlView.pageIndicatorTintColor=[UIColoryellowColor];
_pageControlView.currentPageIndicatorTintColor=[UIColorpurpleColor];
[selfaddSubview:pageControlVw];
_pageControlView=pageControlVw;
}
//value对Count取模,并保证为正值
//这里很重要，是实现无限循环的重要的一步，比如现在显示的是第一张图片，_currentImgIndex=0,向左滑动后就显示_currentImgIndex+1张图片，可是_currentImgIndex+1可能回大于_imgUrlArr的数组count，这里取模，其次还要保证为正数，比如，如果向右边滑动是就显示_currentImgIndex-1张图片，_currentImgIndex-1取模也可能为负数，此时加上count保证为正数
-(NSInteger)switchToMValue:(NSInteger)valueCount:(NSInteger)count
{
NSIntegerresult=value%count;
returnresult>=0?result:result+count;
}
重写imgUrlArr的set方法
-(void)setImgUrlArr:(NSArray*)imgUrlArr
{
_imgUrlArr=[imgUrlArrcopy];
NSIntegercount=imgUrlArr.count;
if(count<=0)
{
return;
}
//如果只显示一张图片,那就没有旋转情况
if(count==1)
{
UIImageView*imgView=[[UIImageViewalloc]init];
imgView.frame=CGRectMake(0,0,self.bounds.size.width,self.bounds.size.height);
[_contentScrollViewaddSubview:imgView];
_pageControlView.numberOfPages=1;
_pageControlView.currentPage=0;
_contentScrollView.contentSize=CGSizeMake(self.bounds.size.width,self.bounds.size.height);
NSURL*imgUrl=[NSURLURLWithString:imgUrlArr[0]];
[imgViewsd_setImageWithURL:imgUrlplaceholderImage:nil];
return;
}
if(count>1)
{
//这里只使用3个ImgView轮转多张图片，数量2,3,4,5,6...
for(inti=0;i<3;i++)
{
UIImageView*imgView=[[UIImageViewalloc]init];
imgView.frame=CGRectMake(i*self.bounds.size.width,0,self.bounds.size.width,self.bounds.size.height);
imgView.layer.masksToBounds=YES;
NSString*urlStr=urlStr=_imgUrlArr[[selfswitchToValue:i-1Count:count]];
NSURL*imgUrl=[NSURLURLWithString:urlStr];
[imgViewsd_setImageWithURL:imgUrlplaceholderImage:nil];
if(i==0)
{
_imgView1=imgView;
}
elseif(i==1)
{
_imgView2=imgView;
}
elseif(i==2)
{
_imgView3=imgView;
}
[_contentScrollViewaddSubview:imgView];
}
_pageControlView.numberOfPages=count;
_pageControlView.currentPage=0;
_contentScrollView.contentSize=CGSizeMake(self.bounds.size.width*3,self.bounds.size.height);
_currentImgIndex=0;
[_contentScrollViewsetContentOffset:CGPointMake(self.bounds.size.width,0)animated:NO];
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT,0),^{
//循环轮转图片
[selfswitchImg];
});
}
}
5秒旋转图片
-(void)switchImg
{
while(1)
{
[NSThreadsleepForTimeInterval:WiatForSwitchImgMaxTime];
//如果正在拖拽图片，此次作废
if(_isDragImgView){
continue;
}
_currentPage=[selfswitchToValue:_currentPage+1Count:_imgUrlArr.count];
dispatch_async(dispatch_get_main_queue(),^{
_pageControlView.currentPage=_currentPage;
_contentScrollView.contentOffset=CGPointMake(2*self.bounds.size.width,0);
[selfreSetImgUrlWithDirection:SwitchDirectionLeft];
});
}
}
当手动旋转图片
-(void)switchImgByDirection:(SwitchDirection)direction
{
if(direction==SwitchDirectionNone){
return;
}
[selfreSetImgUrlWithDirection:direction];
[_contentScrollViewsetContentOffset:CGPointMake(self.bounds.size.width,0)animated:NO];
}
旋转图片后重新调整3个UIImageView显示的内容，如实现思想所述
-(void)reSetImgUrlWithDirection:(SwitchDirection)direction
{
if(direction==SwitchDirectionRight){
[_imgView1sd_setImageWithURL:[NSURLURLWithString:_imgUrlArr[[selfswitchToValue:_currentImgIndex-2Count:_imgUrlArr.count]]]placeholderImage:nil];
[_imgView2sd_setImageWithURL:[NSURLURLWithString:_imgUrlArr[[selfswitchToValue:_currentImgIndex-1Count:_imgUrlArr.count]]]placeholderImage:nil];
[_imgView3sd_setImageWithURL:[NSURLURLWithString:_imgUrlArr[[selfswitchToValue:_currentImgIndexCount:_imgUrlArr.count]]]placeholderImage:nil];
_currentImgIndex=[selfswitchToValue:_currentImgIndex-1Count:_imgUrlArr.count];
}
elseif(direction==SwitchDirectionLeft)
{
[_imgView1sd_setImageWithURL:[NSURLURLWithString:_imgUrlArr[[selfswitchToValue:_currentImgIndexCount:_imgUrlArr.count]]]placeholderImage:nil];
[_imgView2sd_setImageWithURL:[NSURLURLWithString:_imgUrlArr[[selfswitchToValue:_currentImgIndex+1Count:_imgUrlArr.count]]]placeholderImage:nil];
[_imgView3sd_setImageWithURL:[NSURLURLWithString:_imgUrlArr[[selfswitchToValue:_currentImgIndex+2Count:_imgUrlArr.count]]]placeholderImage:nil];
_currentImgIndex=[selfswitchToValue:_currentImgIndex+1Count:_imgUrlArr.count];
}
}
实现UIScrollVie3个代理方法
#pragmamark-------------Delegate---------------
//记住滑动的方向
-(void)scrollViewDidScroll:(UIScrollView*)scrollView
{
staticfloatnewx=0;
staticfloatoldx=0;
newx=scrollView.contentOffset.x;
if(newx!=oldx)
{
if(newx>oldx)
{
_swDirection=SwitchDirectionLeft;
}elseif(newx<oldx)
{
_swDirection=SwitchDirectionRight;
}
oldx=newx;
}
}
-(void)scrollViewWillBeginDragging:(UIScrollView*)scrollView
{
_isDragImgView=YES;
}
-(void)scrollViewDidEndDecelerating:(UIScrollView*)scrollView
{
//向左旋转
if(_swDirection==SwitchDirectionLeft)
{
_currentPage=[selfswitchToValue:_currentPage+1Count:_imgUrlArr.count];
}//向右旋转
elseif(_swDirection==SwitchDirectionRight)
{
_currentPage=[selfswitchToValue:_currentPage-1Count:_imgUrlArr.count];
}
_pageControlView.currentPage=_currentPage;
if(_swDirection!=SwitchDirectionNone){
[selfswitchImgByDirection:_swDirection];
}
_isDragImgView=NO;
}
以上为实现代码，现在看看怎么用，例如：
JGCirculateSwitchImgView*jView=[[JGCirculateSwitchImgViewalloc]initWithFrame:CGRectMake(20,100,280,250)]; NSArray*imgUrlArr=@[@"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201119031647109.jpg", @"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201116215754685.jpg", @"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201115524758041.jpg", @"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201114495822068.jpg", @"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201107522493367.jpg"]; jView.imgUrlArr=imgUrlArr; [self.viewaddSubview:jView];
可以看到封装之后，代码的重用性很高，使用起来很简单，就这么4句代码就可以实现图片的无限循环轮转。
以上就是本文的全部内容，希望对大家的学习有所帮助。