首页 > 系统 > iOS > 正文

iOS实现无限循环图片轮播器的封装

2019-10-21 18:55:27
字体:
来源:转载
供稿:网友
这篇文章主要为大家详细介绍了iOS实现无限循环图片轮播器的封装,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
 

 项目中很多时候会碰到这个需求,实现多张图片的无限循环轮转,以前做过,项目中几个地方的都用到了,当时没有封装,几个地方都拷贝几乎一样的代码,代码复用性不好,今天没事封装了一下,使用起来比较简单。

  首先,说说我实现循环轮转图片的思想,在UIScrollView中添加了3个UIImageView,并排排列,我们看到的永远只是第二个UIImageView,这样的话,你一直可以向左,向右滑动,当你向左滑动是,这是你滑动到了最后一个UIImageView不能在向左边滑动了,这时,我在后面悄悄的将第二个UIImageView图片设置为当前要显示的图片,调整UIScrollView的contentOffset属性,如:

[_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO](使用者根本感觉不出来这种变化)所以,此时,你看到的又是第二个UIImageView,所以此时你又可以向左滑动,当你向右边滑动时候处理类似,导致结果你可以向左边,右边无线循环轮转图片。

 JGCirculateSwitchImgView.h头文件

@interface JGCirculateSwitchImgView : UIView@property(nonatomic,strong)NSArray *imgUrlArr;@end

  头文件中只有一个需要设置的成员变量imgUrlArr数组,就是你要显示图片路径的数组,将通过这个数组访问图片。

JGCirculateSwitchImgView.m文件

typedef NS_ENUM(NSInteger, SwitchDirection){//未成功旋转  SwitchDirectionNone = -1,//向右旋转图片 SwitchDirectionRight = 0,//向左训转图片SwitchDirectionLeft = 1,};

定义了SwitchDirection枚举,表示图片向左,向右轮转,或者什么也不做。

//默认5秒训转图片一次,可以根据需要改变#define WiatForSwitchImgMaxTime 5#import "JGCirculateSwitchImgView.h"#import "UIImageView+WebCache.h"@interface JGCirculateSwitchImgView ()//底部UIScrollView@property(nonatomic,weak)UIScrollView *contentScrollView;//显示页码的UIPageControl控件@property(nonatomic,weak)UIPageControl *pageControlView;//用保存当前UIPageControl控件显示的当前位置@property(nonatomic,assign)NSInteger currentPage;//用于保存当前显示图片在图片urlArr数组中的索引@property(nonatomic,assign)NSInteger currentImgIndex;//UIScrollView上的三个UIImgaView这里通过3个UIImageView实现无限循环图片轮转@property(nonatomic,weak)UIImageView *imgView1;@property(nonatomic,weak)UIImageView *imgView2;@property(nonatomic,weak)UIImageView *imgView3;@property(nonatomic,assign)BOOL isDragImgView;//SwitchDirection类型,用于保存滑动的方向@property(nonatomic,assign)SwitchDirection swDirection;@end
-(id)initWithFrame:(CGRect)frame{    if (self = [super initWithFrame:frame])    {       [self createContentScrollView];       [self createPageControlView];      //默认第一页      _currentPage = 0;      //默认显示第一张图片      _currentImgIndex = 0;     _isDragImgView = NO;     _swDirection = SwitchDirectionNone;   }     return self;}

创建UIScrollView代码

-(void)createContentScrollView{    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];    scrollView.delegate = self;    scrollView.showsHorizontalScrollIndicator = NO;    scrollView.shouldGroupAccessibilityChildren = NO;    scrollView.pagingEnabled = YES;    [self addSubview:scrollView];    _contentScrollView = scrollView;}

创建UIPageControl

-(void)createPageControlView{    UIPageControl *pageControlVw = [[UIPageControl alloc] init];   pageControlVw.frame = CGRectMake(0, 0, 80, 20);   pageControlVw.center = CGPointMake(self.center.x, self.bounds.size.height - 20);   pageControlVw.backgroundColor = [UIColor redColor];   _pageControlView.pageIndicatorTintColor = [UIColor yellowColor];   _pageControlView.currentPageIndicatorTintColor = [UIColor purpleColor];   [self addSubview:pageControlVw];   _pageControlView = pageControlVw;}
//value对Count取模,并保证为正值//这里很重要,是实现无限循环的重要的一步,比如现在显示的是第一张图片,_currentImgIndex=0,向左滑动后就显示_currentImgIndex+1张图片,可是_currentImgIndex+1可能回大于_imgUrlArr的数组count,这里取模,其次还要保证为正数,比如,如果向右边滑动是就显示_currentImgIndex-1张图片,_currentImgIndex-1取模也可能为负数,此时加上count保证为正数-(NSInteger)switchToMValue:(NSInteger)value Count:(NSInteger)count{    NSInteger result = value % count;    return result >=0 ? result : result + count;}

重写imgUrlArr的set方法

 

-(void)setImgUrlArr:(NSArray *)imgUrlArr{    _imgUrlArr = [imgUrlArr copy];    NSInteger count = imgUrlArr.count;    if (count <= 0 )    {      return;    }   //如果只显示一张图片,那就没有旋转情况   if (count == 1)   {       UIImageView *imgView = [[UIImageView alloc]init];       imgView.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);      [_contentScrollView addSubview:imgView];       _pageControlView.numberOfPages = 1;       _pageControlView.currentPage = 0;      _contentScrollView.contentSize = CGSizeMake(self.bounds.size.width, self.bounds.size.height);      NSURL *imgUrl = [NSURL URLWithString:imgUrlArr[0]];     [imgView sd_setImageWithURL:imgUrl placeholderImage:nil];     return;   }   if (count > 1)   {         //这里只使用3个ImgView轮转多张图片,数量2,3,4,5,6...         for(int i = 0; i < 3 ;i++)         {             UIImageView *imgView = [[UIImageView alloc] 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[[self switchToValue:i-1 Count:count]];             NSURL *imgUrl = [NSURL URLWithString:urlStr];              [imgView sd_setImageWithURL:imgUrl placeholderImage:nil];              if (i == 0)              {                  _imgView1 = imgView;                }               else if (i == 1)              {                  _imgView2 = imgView;              }              else if (i == 2)              {                 _imgView3 = imgView;               }              [_contentScrollView addSubview:imgView];         }        _pageControlView.numberOfPages = count;         _pageControlView.currentPage = 0;        _contentScrollView.contentSize = CGSizeMake(self.bounds.size.width * 3,   self.bounds.size.height);        _currentImgIndex = 0;       [_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO];      dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0),  ^{           //循环轮转图片           [self switchImg];     });   }}

5秒旋转图片

-(void)switchImg{     while (1)     {          [NSThread sleepForTimeInterval:WiatForSwitchImgMaxTime];          //如果正在拖拽图片,此次作废            if (_isDragImgView) {               continue;           }            _currentPage = [self switchToValue:_currentPage + 1 Count:_imgUrlArr.count];            dispatch_async(dispatch_get_main_queue(), ^{                  _pageControlView.currentPage = _currentPage;                 _contentScrollView.contentOffset = CGPointMake(2 * self.bounds.size.width, 0);                 [self reSetImgUrlWithDirection:SwitchDirectionLeft];         });     }}

当手动旋转图片

-(void)switchImgByDirection:(SwitchDirection)direction{     if (direction == SwitchDirectionNone) {         return;     }     [self reSetImgUrlWithDirection:direction];     [_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO];}

旋转图片后重新调整3个UIImageView显示的内容,如实现思想所述

-(void)reSetImgUrlWithDirection:(SwitchDirection)direction{     if (direction == SwitchDirectionRight) {         [_imgView1 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex - 2 Count:_imgUrlArr.count]]] placeholderImage:nil];         [_imgView2 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex - 1 Count:_imgUrlArr.count]]] placeholderImage:nil];         [_imgView3 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex Count:_imgUrlArr.count]]] placeholderImage:nil];         _currentImgIndex = [self switchToValue:_currentImgIndex - 1 Count:_imgUrlArr.count];      }     else if(direction == SwitchDirectionLeft)     {          [_imgView1 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex Count:_imgUrlArr.count]]] placeholderImage:nil];          [_imgView2 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex + 1 Count:_imgUrlArr.count]]] placeholderImage:nil];          [_imgView3 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex + 2 Count:_imgUrlArr.count]]] placeholderImage:nil];          _currentImgIndex = [self switchToValue:_currentImgIndex + 1 Count:_imgUrlArr.count];     }}

实现UIScrollVie3个代理方法

#pragma mark -------------Delegate---------------//记住滑动的方向- (void)scrollViewDidScroll:(UIScrollView *)scrollView{    static float newx = 0;    static float oldx = 0;   newx= scrollView.contentOffset.x ;   if (newx != oldx )   {       if (newx > oldx)       {           _swDirection = SwitchDirectionLeft;       }else if(newx < oldx)      {          _swDirection = SwitchDirectionRight;      }      oldx = newx;   }}- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{    _isDragImgView = YES;}- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{     //向左旋转     if (_swDirection == SwitchDirectionLeft)     {          _currentPage = [self switchToValue:_currentPage + 1 Count:_imgUrlArr.count];     }//向右旋转     else if (_swDirection == SwitchDirectionRight)     {         _currentPage = [self switchToValue:_currentPage - 1 Count:_imgUrlArr.count];     }     _pageControlView.currentPage = _currentPage;     if (_swDirection != SwitchDirectionNone) {     [self switchImgByDirection:_swDirection];     }    _isDragImgView = NO;}

以上为实现代码,现在看看怎么用,例如:

JGCirculateSwitchImgView *jView = [[JGCirculateSwitchImgView alloc] 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.view addSubview:jView];

可以看到封装之后,代码的重用性很高,使用起来很简单,就这么4句代码就可以实现图片的无限循环轮转。

以上就是本文的全部内容,希望对大家的学习有所帮助。



发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表