Sian 发表于 2014-8-2 18:59:55

制作循环滑动的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]
查看完整版本: 制作循环滑动的ScrollView轻松实现图片循环播放