代码驿站移动版

当前位置：主页 > 移动开发 > iOS代码 >

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

时间：2020-11-09 18:37:26 | 栏目：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句代码就可以实现图片的无限循环轮转。

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

您可能感兴趣的文章:

相关文章