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

2017-01-14 10:23:29来源:http://www.jianshu.com/p/71401b3be0fa作者:藍眼淚人点击

在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

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




最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台