年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 4587|回复: 0

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

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 2014-8-2 18:59:55 | 显示全部楼层 |阅读模式
    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. }
    复制代码
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-28 23:00 , Processed in 0.049507 second(s), 23 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表