项目中很多时候会碰到这个需求，实现多张图片的无限循环轮转，以前做过，项目中几个地方的都用到了，当时没有封装，几个地方都拷贝几乎一样的代码，代码复用性不好，今天没事封装了一下，使用起来比较简单。
首先，说说我实现循环轮转图片的思想，在UIScrollView中添加了3个UIImageView，并排排列，我们看到的永远只是第二个UIImageView，这样的话，你一直可以向左，向右滑动，当你向左滑动是，这是你滑动到了最后一个UIImageView不能在向左边滑动了，这时，我在后面悄悄的将第二个UIImageView图片设置为当前要显示的图片，调整UIScrollView的contentOffset属性，如：
[_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO]（使用者根本感觉不出来这种变化）所以，此时，你看到的又是第二个UIImageView，所以此时你又可以向左滑动，当你向右边滑动时候处理类似，导致结果你可以向左边，右边无线循环轮转图片。
JGCirculateSwitchImgView.h头文件
|
1
2
3
|
@interface JGCirculateSwitchImgView : UIView@property(nonatomic,strong)NSArray *imgUrlArr;@end |
头文件中只有一个需要设置的成员变量imgUrlArr数组，就是你要显示图片路径的数组，将通过这个数组访问图片。
JGCirculateSwitchImgView.m文件
|
1
2
3
4
5
6
7
8
9
10
11
12
|
typedef NS_ENUM(NSInteger, SwitchDirection){//未成功旋转 SwitchDirectionNone = -1,//向右旋转图片 SwitchDirectionRight = 0,//向左训转图片SwitchDirectionLeft = 1,}; |
定义了SwitchDirection枚举，表示图片向左，向右轮转，或者什么也不做。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
//默认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 |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
-(id)initWithFrame:(CGRect)frame{ if (self = [super initWithFrame:frame]) { [self createContentScrollView]; [self createPageControlView]; //默认第一页 _currentPage = 0; //默认显示第一张图片 _currentImgIndex = 0; _isDragImgView = NO; _swDirection = SwitchDirectionNone; } return self;} |
创建UIScrollView代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
-(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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
-(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;} |
|
1
2
3
4
5
6
7
8
9
10
11
12
|
//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方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
-(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秒旋转图片
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
-(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]; }); }} |
当手动旋转图片
|
1
2
3
4
5
6
7
8
9
10
11
|
-(void)switchImgByDirection:(SwitchDirection)direction{ if (direction == SwitchDirectionNone) { return; } [self reSetImgUrlWithDirection:direction]; [_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO];} |
旋转图片后重新调整3个UIImageView显示的内容，如实现思想所述
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
-(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个代理方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
#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;} |
以上为实现代码，现在看看怎么用，例如：
|
1
2
3
4
5
6
7
8
9
10
|
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句代码就可以实现图片的无限循环轮转。
以上就是本文的全部内容，希望对大家的学习有所帮助。
