在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;
}
到目前为止，运行效果
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
