制作循环滑动的ScrollView轻松实现图片循环播放
1、应用场景多张图片在手机屏幕上循环展示
2、设计思想
2.1、创建一个ScrollView
2.2、ScrollView中添加三个ImageView并设置contentSize
2.3、初始展示中间ImageView
2.4、滑动事件结束后,恢复默认展示并根据滑动方向切换各ImageView图片
3、代码实现
3.1、创建全局变量
UIScrollView *_scrollView;
NSUInteger_imageIndex;3.2、创建ScrollView
- (void)creatScrollView
{
// 创建scrollView
_scrollView = [ init];
// 设置尺寸大小为当前view大小
_scrollView.frame = self.view.frame;
// scrollView可视范围为三个窗口大小
_scrollView.contentSize = CGSizeMake(self.view.frame.width * 3, 0);
// 隐藏水平进度条
_scrollView.showsVerticalScrollIndicator = NO;
// 初始可视区域为中间图片视图
_scrollView.contentOffset = CGPointMake(self.view.frame.width, 0);
// 禁用越界弹簧效果
_scrollView.bounces = NO;
// 分页展示图片
_scrollView.pagingEnabled = YES;
// 设置当前控制器为scrollView代理
_scrollView.delegate = self;
// 添加scrollView到当前视图
;
// 添加图片
for (int i = 0; i < 3; i++){
// 通过循环添加三张图片,图片名分别为image_1.png、image_2.png、image_3.png
NSString *imageName = ;
UIImageView *imageView = [ initWithImage:image];
// 图片大小为scrollView大小,即整屏显示
imageView.frame = _scrollView.frame;
// 图片添加到scrollView
;
}
// 初始化图片序号
_imageIndex = 0;
}3.3、图片切换实现循环
#define kCounts 3
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
// 创建数组存储循环展示图片的文件名
NSMutableArray *pics = ;
for (int i = 0; i < kCounts; i++){
NSString *imageName = ;
UIImage *image = ;
// 如果图片不存在则退出循环,避免添加失败造成程序崩溃
if (image == nil) break;
;
}
// 取出scrollView中的三个图片视图
UIImageView *image0 = scrollView.subviews;
UIImageView *image1 = scrollView.subviews;
UIImageView *image2 = scrollView.subviews;
NSUInteger count = pics.count;
// 判断循环方向
if (scrollView.contentOffset.x > _vSize.width) { // 往后滑动,后推一张图片
// 图片序号后推1,取余循环
_imageIndex = ++_imageIndex % count;
} else if (scrollView.contentOffset.x < _vSize.width * 0.5){ // 往前滑动,前推一张图片
// 图片序号前推1,由于直接减1会出现负数,增加一个循环再减1取余
_imageIndex = (_imageIndex + count - 1) % count;
}
// 更换图片
image0.image = pics; // 0变成1
image1.image = pics[(_imageIndex + 1) % count]; // 1变成2
image2.image = pics[(_imageIndex + 2) % count]; // 2变成3
// 恢复默认展示中间图片
self.advScrollView.contentOffset = CGPointMake(self.view.frame.size.width, 0);
}
页:
[1]