图片轮播器(使用一个UIImageView实现轮播器的功能)

在iOS开发中,实现一个图片轮播器的方法有好多种,比如使用UIScrollView、UICollectionView或者利用三个UIImageView,以前三种方法都能实现一个图片轮播器的功能,这里使用的是利用一个UIImageView来实现。

首先,新建一个InfinitudeView,在.m文件中看下需要设置的属性

@interface InfinitudeView ()

@property (nonatomic, weak) UIImageView *imgView; /**< 图片容器 */
@property (nonatomic, assign) NSInteger index; /**< 图片索引 */
@property (nonatomic, assign) NSInteger imageCount; /**< 图片数量 */
@property (nonatomic, strong) NSTimer *timer; /**< 定时器 */
@property (nonatomic, weak) UILabel *showCountLabel; /**< 显示索引 */

@property (nonatomic, strong) UISwipeGestureRecognizer *leftSwipeGesture; /**< 左滑手势 */
@property (nonatomic, strong) UISwipeGestureRecognizer *rightSwipeGesture; /**< 右滑手势 */

@end

1.显示图片和图片的索引

    UIImageView *imgView = [[UIImageView alloc] initWithFrame:self.bounds];
    imgView.contentMode = UIViewContentModeScaleAspectFit;
    [self addSubview:imgView];
    self.imgView = imgView;

    UILabel *showCountLabel = [[UILabel alloc] init];
    [self addSubview:showCountLabel];
    self.showCountLabel = showCountLabel;
    showCountLabel.translatesAutoresizingMaskIntoConstraints = NO;
    showCountLabel.font = [UIFont systemFontOfSize:15.0f];
    [self addConstraints:@[
                           [NSLayoutConstraint constraintWithItem:showCountLabel attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeRight multiplier:1.0f constant:-20],
                           [NSLayoutConstraint constraintWithItem:showCountLabel attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeBottom multiplier:1.0f constant:-20]]
                          ];

2.在.h文件中添加一个图片数组,用于数据传递进来

@interface InfinitudeView : UIView

@property (nonatomic, strong) NSArray *imageArray; /**< 图片数组 */

@end

3.重写imageArray的setter方法,当传入图片的时候,设置好

/**
 *  根据图片数组设置图片
 *
 *  @param imageArray 图片数组
 */
- (void)setImageArray:(NSArray *)imageArray {
    
    _imageArray = imageArray;
    _imageCount = imageArray.count;
    _index = 0;
    [self setImage];
}

4.数组可以传入图片或者图片的链接字符串,因此需要做一下判断,加载网络图片为了简单一些,直接使用的第三方SDWebImage

/**
 *  设置图片
 */
- (void)setImage {
    
    // 显示图片索引
    [self setShowCountLabelText];
    id object = [_imageArray firstObject];
    // 如果传入的是图片则直接显示图片,如果是图片链接,网络加载
    if ([object isKindOfClass:[UIImage class]]) {
        _imgView.image = _imageArray[_index];
    } else if ([object isKindOfClass:[NSMutableString class]]) {
        [_imgView sd_setImageWithURL:[NSURL URLWithString:_imageArray[_index]]];
    }
}

5.索引的设置

/**
 *  显示索引
 */
- (void)setShowCountLabelText {
    
    NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] init];
    NSAttributedString *str1 = [[NSAttributedString alloc] initWithString:[NSString stringWithFormat:@"%zd", _index + 1] attributes:@{NSForegroundColorAttributeName : [UIColor colorWithRed:0.915 green:0.685 blue:0.574 alpha:1.000]}];
    NSAttributedString *str2 = [[NSAttributedString alloc] initWithString:[NSString stringWithFormat:@"/%zd", _imageCount] attributes:@{NSForegroundColorAttributeName : [UIColor whiteColor]}];
    [attributedString appendAttributedString:str1];
    [attributedString appendAttributedString:str2];
    _showCountLabel.attributedText = attributedString;
}

到目前为止,运行效果

图片轮播器(使用一个UIImageView实现轮播器的功能)_第1张图片
1.png

6.添加手势

/**
 *  添加手势
 */
- (void)addGuesture {
    
    // 1.添加左滑动手势
    _leftSwipeGesture = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(gestureMethod:)];
    _leftSwipeGesture.direction = UISwipeGestureRecognizerDirectionLeft;
    [self addGestureRecognizer:_leftSwipeGesture];
    
    // 2.添加右滑动手势
    _rightSwipeGesture = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(gestureMethod:)];
    _rightSwipeGesture.direction = UISwipeGestureRecognizerDirectionRight;
    [self addGestureRecognizer:_rightSwipeGesture];
}

7.手持的响应方法

/**
 *  手势响应方法
 *
 *  @param swipeGesture 响应的手势
 */
- (void)gestureMethod:(UISwipeGestureRecognizer *)swipeGesture {
    
    switch (swipeGesture.direction) {
        case UISwipeGestureRecognizerDirectionLeft:
            _index++;
            [self setImageWithIndex:_index];
            [self animationTransitionWithSwipeGestureRecognizerDirection:swipeGesture.direction];
            break;
        case UISwipeGestureRecognizerDirectionRight:
            _index--;
            [self setImageWithIndex:_index];
            [self animationTransitionWithSwipeGestureRecognizerDirection:swipeGesture.direction];
            break;
        default:break;
    }
}

8.根据滑动设置图片

/**
 *  根据手势设置图片
 */
- (void)setImageWithIndex:(NSInteger)index {
    
    if (index > _imageCount - 1) {
        _index = 0;
    } else if (index < 0) {
        _index = _imageCount - 1;
    }
    
    [self setImage];
}

9.设置转场动画

/**
 *  添加转场动画
 *
 *  @param direction 手势方向
 */
- (void)animationTransitionWithSwipeGestureRecognizerDirection:(UISwipeGestureRecognizerDirection)direction {
    
    CATransition *transition = [CATransition animation];
    transition.duration = 0.5f;
    // 设置动画的样式
    transition.type = kCATransitionPush;
    if (direction == UISwipeGestureRecognizerDirectionRight) {
        transition.subtype = @"fromLeft";
    } else {
        transition.subtype = @"fromRight";
    }
    [_imgView.layer addAnimation:transition forKey:nil];
}

运行

2.gif

9.接下来是添加一个定时器,在传入图片的时候添加

/**
 *  根据图片数组设置图片
 *
 *  @param imageArray 图片数组
 */
- (void)setImageArray:(NSArray *)imageArray {
    
    _imageArray = imageArray;
    _imageCount = imageArray.count;
    _index = 0;
    _timer = [NSTimer scheduledTimerWithTimeInterval:3.0f target:self selector:@selector(timerMethod) userInfo:nil repeats:YES];
    [self setImage];
}

/**
 *  定时器响应方法
 */
- (void)timerMethod {

    _index++;
    [self setImageWithIndex:_index];
    [self animationTransitionWithSwipeGestureRecognizerDirection:_leftSwipeGesture.direction];
}

当滑动的时候,定时器需要关闭

/**
 *  手势响应方法
 *
 *  @param swipeGesture 响应的手势
 */
- (void)gestureMethod:(UISwipeGestureRecognizer *)swipeGesture {
    
    [_timer invalidate];
    switch (swipeGesture.direction) {
        case UISwipeGestureRecognizerDirectionLeft:
            _index++;
            [self setImageWithIndex:_index];
            [self animationTransitionWithSwipeGestureRecognizerDirection:swipeGesture.direction];
            break;
        case UISwipeGestureRecognizerDirectionRight:
            _index--;
            [self setImageWithIndex:_index];
            [self animationTransitionWithSwipeGestureRecognizerDirection:swipeGesture.direction];
            break;
        default:break;
    }
    _timer = [NSTimer scheduledTimerWithTimeInterval:3.0f target:self selector:@selector(timerMethod) userInfo:nil repeats:YES];
}

再看看整体效果

3.gif

整体代码
https://github.com/JudeGGT/-

你可能感兴趣的:(图片轮播器(使用一个UIImageView实现轮播器的功能))