iOS - 封装轮播图 Demo -- 两个 UIImageView 实现无限轮播

宇朋Look
1,518 阅读4分钟
原文链接： www.jianshu.com

无限轮播.gif

看到有些用 ScrollView 加三个 UIImageView 实现较为完美无限轮播，我就想着那用手势加两个 UIImageView应该也是可以实现的，于是今天尝试弄了一个初步小Demo！ 【GitHub】

思路分析：
  • 用数组把需要展示的照片名称存进去， 有时间再去写加载网络照片吧！
  • 用一个属性记录当前展示的图片的下标，那么前一张和后一张的下标自然可以表示出来。
  • 给封装的View添加平移手势， 让当前的ImageView跟随者手势一起移动。
  • 我们用两个UIImageView展示图片， 当前ImageView展示着当前下标的照片，手势向 左（右）滑动的时候，另个ImageView紧挨着当前的ImageView，位于当前ImageView的右（左）侧！两个ImageView一起滑动！
  • 手势停止的时候，判断需要展示哪个ImageView！并把记录当前照片的ImageView指针指向这个展示的照片，记录下一个照片的指针指向不在视线的哪个ImageView。
  • 这样就完成了一次滑动切换照片，其他重复这样的操作就好了，在这基础上添加定时器实现自动切换功能！
上代码：
/**
 创建方法
 @param imageArray 存放照片名称的数组
 @param frame      位置
 */
- (instancetype)initWithImageArray:(NSArray *)imageArray
                              fram:(CGRect)frame;
@property (assign, nonatomic) NSInteger currentIndex;// 当前展示视图对应的下标
@property (assign, nonatomic) NSInteger nextIndex; // 对应的下一个坐标
@property (assign, nonatomic) NSInteger previousIndex;// 对应上一个坐标
@property (strong, nonatomic) UIPanGestureRecognizer *pan;// 手势
@property (strong, nonatomic) NSArray *imageNames;// 存照片的名字数组
@property (strong, nonatomic) UIImageView *currentImage;// 当前展示的照片
@property (strong, nonatomic) UIImageView *nextImage; // 将要展示的照片

@property (strong, nonatomic) NSTimer *changeImageTime; // 定时器
// 定义一个滑动方向枚举 手势停止的时候判断需要展示哪一张照片
typedef enum : NSUInteger
{
    MoveDirectionLeft,
    MoveDirectionRight,
} MoveDirection;
  • 抽离获取下标和照片的方法
    // 获取当前下标下一个坐标
- (NSInteger)nextIndex
{
 return _currentIndex == _imageNames.count - 1 ? 0 : _currentIndex + 1;
}
// 获取当前下标的上一个坐标
- (NSInteger)previousIndex
{
 return _currentIndex == 0 ? _imageNames.count - 1 : _currentIndex - 1;
}
// 根据下标取到照片
- (UIImage *)getImageForIndex:(NSInteger)index
{
 return [UIImage imageNamed:[NSString stringWithFormat:@"LoopImg.bundle/%@",_imageNames[index]]];
}

  • 初始化方法

    / 初始化方法
- (instancetype)initWithImageArray:(NSArray *)imageArray
                           fram:(CGRect)frame
{
 if (self = [super initWithFrame:frame])
 {
//  存
     _imageNames = imageArray;
     _currentIndex = 0;
     _currentImage = [[UIImageView alloc] initWithFrame:self.bounds];
     _currentImage.userInteractionEnabled = YES;
     _currentImage.image = [self getImageForIndex:_currentIndex];
     [self insertSubview:_currentImage atIndex:1];  
     // 下一张图片
     _nextImage = [[UIImageView alloc] init];
     _nextImage.userInteractionEnabled = YES;
     [self insertSubview:_nextImage atIndex:0];
     // 添加平移手势
     // pan手势处理切换
     _pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panChangeImage:)];
     [self addGestureRecognizer:_pan];

     // 添加定时器
     [self addTime];
        }
 return self;
}

  • 手势事件

    // 切换图片
- (void)panChangeImage:(UIPanGestureRecognizer *)pan
{
 // 手势的时候先移除 time
 [self.changeImageTime invalidate];
 self.changeImageTime = nil;

 // 向左滑 x 为负 向右滑 x 为正  （末位置 减 初始位置）
 CGPoint panOffSet = [pan translationInView:self];
 float changeX = panOffSet.x;
 NSLog(@"-------->%f",changeX);
 // 获取 当前的视图位置
 CGRect frame = _currentImage.frame;
 // 清空手势的偏移量
 [_pan setTranslation:(CGPointZero) inView:self];

 // 处理左右照片
 float resulet = frame.origin.x + (changeX < 0 ? - DBL_EPSILON : DBL_EPSILON);
//  小于 0 就是向左滑动了 大于 0 就是向右 滑动 了
 resulet <= 0 ? [self leftScroll:changeX frame:frame] : [self rightScroll:changeX frame:frame] ;
}

  • 当前照片左滑动 出现右侧照片

    - (void)leftScroll:(float)offX frame:(CGRect)frame
{// 记录当前的 滑动后的 x
 float tempX = frame.origin.x + offX;
 // 移动当前的图片
 _currentImage.frame = CGRectMake(tempX, frame.origin.y, frame.size.width, frame.size.height);
 // 设置下一张照片
 _nextImage.image = [self getImageForIndex:self.nextIndex];
 _nextImage.frame = CGRectOffset(_currentImage.frame, kScreenW, 0);

 // 手势停止的时候
 if (_pan.state == UIGestureRecognizerStateEnded)
 {
     // 回复定时器
     [self addTime];
     // 判断手势停止的时候展示哪一个 照片
     MoveDirection result = tempX <= - kScreenW / 2 ? [self leftOut:_currentImage rightIn:_nextImage duration:0.3f] : [self leftIn:_currentImage rightOut:_nextImage duration:0.3f];

     // 判断需要当先展示的是下张图片的时候  去操作
     if (result == MoveDirectionLeft)
     {
         _currentIndex = self.nextIndex;// 改变当前展示的下标
         // 交换 _nextImage 和 _currentImage 指针指向，这样的话当前的指针指向就是展示在当前的界面的图片
         UIImageView *temp = _nextImage;
         _nextImage = _currentImage;
         _currentImage = temp;
     }
 }  
}

  • 当前图片右滑动 出现左侧照片

    - (void)rightScroll:(float)offX frame:(CGRect)frame
{
  float tempX = frame.origin.x + offX;
  // 移动当前的图片
  _currentImage.frame = CGRectMake(tempX, frame.origin.y, frame.size.width, frame.size.height);
  // 设置上一张照片
  _nextImage.image = [self getImageForIndex:self.previousIndex];
  _nextImage.frame = CGRectOffset(_currentImage.frame, -kScreenW, 0);

  // 收拾停止的时候
  if (_pan.state == UIGestureRecognizerStateEnded)
  {
      // 回复定时器
      [self addTime];

      // 判断手势停止的时候展示哪一个 照片
      MoveDirection result = tempX <= kScreenW / 2 ? [self leftOut:_nextImage rightIn:_currentImage duration:0.3f] : [self leftIn:_nextImage rightOut:_currentImage duration:0.3f];

      // 要展示上一张照片
      if (result == MoveDirectionRight)
      {
          _currentIndex = self.previousIndex;
          UIImageView *temp = _nextImage;
          _nextImage = _currentImage;
          _currentImage = temp;
      }
  }
}

  • 抽离代码，手势结束时候 判断两个UIImageView展示哪一个，并用动画调整好位置。

    // 最终展示右侧的图片
- (MoveDirection)leftOut:(UIImageView *)leftView rightIn:(UIImageView *)rightView duration:(NSTimeInterval)duration
{/*
  当手势结束的时候  左边的 ImageView 滑出视线之外  右侧的 ImageView 占据整个屏幕
  */
 [UIView animateWithDuration:duration animations:^{
     leftView.frame = CGRectOffset(self.bounds, - kScreenW, 0);
     rightView.frame = self.bounds;
 } completion:^(BOOL finished) 
{    
 }];
 return MoveDirectionLeft;
}
// 最终展示
- (MoveDirection)leftIn:(UIImageView *)leftView rightOut:(UIImageView *)rightView duration:(NSTimeInterval)duration
{
 /*
  当手势结束的时候  展示位于左边的照片 右侧的看不见
  */
 [UIView animateWithDuration:duration animations:^{
     rightView.frame = CGRectOffset(self.bounds, kScreenW, 0);
     leftView.frame = self.bounds;
 } completion:^(BOOL finished) {

 }];
 return MoveDirectionRight;
}

  • 设置定时器

    - (void)addTime
{
 _changeImageTime = [NSTimer scheduledTimerWithTimeInterval:1.5f target:self selector:@selector(changeActionForTime) userInfo:nil repeats:YES];
}
- (void)changeActionForTime
{
 // 设置下一张照片
 self.nextImage.image = [self getImageForIndex:self.nextIndex];
 self.nextImage.frame = CGRectOffset(_currentImage.frame, kScreenW, 0);
 [self leftOut:self.currentImage rightIn:self.nextImage duration:0.5f];
 self.currentIndex = self.nextIndex;// 改变当前展示的下标
 // 交换 _nextImage 和 _currentImage 指针指向，这样的话当前的指针指向就是展示在当前的界面的图片
 UIImageView *temp = self.nextImage;
 self.nextImage = self.currentImage;
 self.currentImage = temp;
}

    PS：整体的代码没有调整的太好，大家见谅哈！有时间我在好好整理一下！

avatar
文章
阅读
粉丝