制作循环滑动的ScrollView轻松实现图片循环播放

Sian

1、应用场景
多张图片在手机屏幕上循环展示

2、设计思想
2.1、创建一个ScrollView
2.2、ScrollView中添加三个ImageView并设置contentSize
2.3、初始展示中间ImageView
2.4、滑动事件结束后，恢复默认展示并根据滑动方向切换各ImageView图片

3、代码实现
3.1、创建全局变量

1. UIScrollView *_scrollView;
2. NSUInteger  _imageIndex;

复制代码

3.2、创建ScrollView

1. - (void)creatScrollView
2. {
3.     // 创建scrollView
4.     _scrollView = [[UIScrollView alloc] init];
5.     // 设置尺寸大小为当前view大小
6.     _scrollView.frame = self.view.frame;
7.     // scrollView可视范围为三个窗口大小
8.     _scrollView.contentSize = CGSizeMake(self.view.frame.width * 3, 0);
9.     // 隐藏水平进度条
10.     _scrollView.showsVerticalScrollIndicator = NO;
11.     // 初始可视区域为中间图片视图
12.     _scrollView.contentOffset = CGPointMake(self.view.frame.width, 0);
13.     // 禁用越界弹簧效果
14.     _scrollView.bounces = NO;
15.     // 分页展示图片
16.     _scrollView.pagingEnabled = YES;
17.     // 设置当前控制器为scrollView代理
18.     _scrollView.delegate = self;
19.     // 添加scrollView到当前视图
20.     [self.view addSubview:_scrollView];
21.    
22.     // 添加图片
23.     for (int i = 0; i < 3; i++){
24.         // 通过循环添加三张图片，图片名分别为image_1.png、image_2.png、image_3.png
25.         NSString *imageName = [NSString stringWithFormat:@"image_%d.png", i];
26.         UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
27.         // 图片大小为scrollView大小，即整屏显示
28.         imageView.frame = _scrollView.frame;
29.         // 图片添加到scrollView
30.         [_scrollView addSubview:imageView];
31.     }
32.     // 初始化图片序号
33.     _imageIndex = 0;
34. }

复制代码

3.3、图片切换实现循环

1. #define kCounts 3
2. - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
3. {
4.     // 创建数组存储循环展示图片的文件名
5.     NSMutableArray *pics = [NSMutableArray array];
6.     for (int i = 0; i < kCounts; i++){
7.         NSString *imageName = [NSString stringWithFormat:@"image_%d.png", i];
8.         UIImage *image = [UIImage imageNamed:imageName];
9.         // 如果图片不存在则退出循环，避免添加失败造成程序崩溃
10.         if (image == nil) break;
11.         [pics addObject:image];
12.     }
13.     // 取出scrollView中的三个图片视图
14.     UIImageView *image0 = scrollView.subviews[0];
15.     UIImageView *image1 = scrollView.subviews[1];
16.     UIImageView *image2 = scrollView.subviews[2];
17.     NSUInteger count = pics.count;
18.     // 判断循环方向
19.     if (scrollView.contentOffset.x > _vSize.width) {                        // 往后滑动，后推一张图片
20.             // 图片序号后推1，取余循环
21.         _imageIndex = ++_imageIndex % count;
22.     } else if (scrollView.contentOffset.x < _vSize.width * 0.5){            // 往前滑动，前推一张图片
23.             // 图片序号前推1，由于直接减1会出现负数，增加一个循环再减1取余
24.         _imageIndex = (_imageIndex + count - 1) % count;
25.     }
26.    
27.     // 更换图片
28.     image0.image = pics[_imageIndex % count];                                        // 0变成1
29.     image1.image = pics[(_imageIndex + 1) % count];                // 1变成2
30.     image2.image = pics[(_imageIndex + 2) % count];                // 2变成3
31.     // 恢复默认展示中间图片
32.     self.advScrollView.contentOffset = CGPointMake(self.view.frame.size.width, 0);
33. }

复制代码