首页 > 代码库 > UI基础--使用UIScrollView、UIPageControl、NSTimer实现图片循环播放

UI基础--使用UIScrollView、UIPageControl、NSTimer实现图片循环播放

2024-10-20 12:03:39   203人阅读

实现思路：
1、创建一个UIScrollView，这里设置为宽度300，高度130，通过storyboard创建；
2、使用代码在UIScrollView中添加ImageView，横向放入多张ImageView；
3、设置UIScrollView的contentSize为所有图片的宽度总和；
4、要保证UIScrollView的宽度等于一张ImageView的宽度，才能正确分页；
5、添加UIPageControl控件，设置当前页数和总页数；
6、添加NSTimer实现自动循环；

UIPageControl：

是iOS开发中的一个分页控件，一些常用属性如下：

 1 // 总页数，默认为0 2 @property(nonatomic) NSInteger numberOfPages;  3 // 当前页码 4 @property(nonatomic) NSInteger currentPage; 5 // 只有一页的时候隐藏页码，默认为NO 6 @property(nonatomic) BOOL hidesForSinglePage; 7 // 其他页码指示颜色 8 @property(nonatomic,retain) UIColor *pageIndicatorTintColor; 9 // 当前页码指示颜色10 @property(nonatomic,retain) UIColor *currentPageIndicatorTintColor;

 

NSTimer:

定时器，启动定时器的两个方法：

1 //12 //timerWithTimeInterval需要手工把timer加入到消息循环中3 NSTimer *timer = [NSTimer timerWithTimeInterval:2.0 target:self selector: @selector(xxx) userInfo:nil repeats:YES];4 NSRunLoop *loop = [NSRunLoop currentRunLoop];5 [loop addTimer:timer forMode:NSDefaultRunLoopMode]; //这个方法仅仅是提前执行timer要执行的方法6 //[timer fire];7 //28 //scheduledTimerWithTimeInterval自动把timer加入到消息循环中9 NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];

 

具体实现的代码：

  1 //  2 //  ViewController.m  3 //   4 //  5 //  Created by xiaomoge on 14/12/31.  6 //  Copyright (c) 2014年 xiaomoge All rights reserved.  7 //  8   9 #import "ViewController.h" 10  11 @interface ViewController () <UIScrollViewDelegate> 12 @property (weak, nonatomic) IBOutlet UIScrollView *scrollView;//需要和storyboard连线 13 @property (weak, nonatomic) IBOutlet UIPageControl *pageControl;//需要和storyboard连线 14 @property (nonatomic, strong) NSTimer *timer;//定时器 15 @end 16  17 @implementation ViewController 18  19 - (void)viewDidLoad { 20     [super viewDidLoad]; 21     int count = 5; 22      CGSize size = self.scrollView.frame.size; 23     //1 动态生成5个imageView 24     for (int i = 0; i < count; i++) { 25         UIImageView *iconView = [[UIImageView alloc] init]; 26         [self.scrollView addSubview:iconView]; 27  28         NSString *imgName = [NSString stringWithFormat:@"img_%02d",i+1]; 29         iconView.image = [UIImage imageNamed:imgName]; 30  31         CGFloat x = i * size.width; 32         //frame 33         iconView.frame = CGRectMake(x, 0, size.width, size.height); 34     } 35      36     //2 设置滚动范围 37     self.scrollView.contentSize = CGSizeMake(count * size.width, 0); 38    //隐藏滚动条 39     self.scrollView.showsHorizontalScrollIndicator = NO; 40     //3 设置分页 41     self.scrollView.pagingEnabled = YES; 42     //4 设置pageControl的页数 43     self.pageControl.numberOfPages = count; 44     //5 设置scrollView的代理 45     self.scrollView.delegate = self; 46     //6 定时器 47     [self addTimerO]; 48 } 49 /* 50 添加定时器的方法 51 */ 52 - (void)addTimerO 53 { 54     NSTimer *timer = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES]; 55     self.timer = timer; 56     //消息循环 57     NSRunLoop *runloop = [NSRunLoop currentRunLoop]; 58     [runloop addTimer:timer forMode:NSRunLoopCommonModes]; 59 } 60 /* 61 循环下一张图片 62 */ 63 - (void)nextImage 64 { 65     //取得当前页码 66     NSInteger page = self.pageControl.currentPage; 67    //判断当前页码，如果是循环到最后一张后，设置当前页数为第一张 68     if (page == self.pageControl.numberOfPages - 1) { 69         page = 0; 70     }else{//否则继续＋＋ 71         page++; 72     } 73    //添加一个动画效果，让图片偏移不致于很突兀 74     CGFloat offsetX = page * self.scrollView.frame.size.width; 75     [UIView animateWithDuration:1.0 animations:^{ 76         self.scrollView.contentOffset = CGPointMake(offsetX, 0); 77     }]; 78 } 79  80 #pragma mark - scrollView的代理方法 81 //正在滚动的时候 82 - (void)scrollViewDidScroll:(UIScrollView *)scrollView 83 { 84     //如果图片转了一半以上，那么就把页数＋1 85     int page = (scrollView.contentOffset.x + scrollView.frame.size.width / 2)/ scrollView.frame.size.width; 86     //把page赋给当前页 87     self.pageControl.currentPage = page; 88 } 89 //开始滚动的时候，把定时器给停止了，否则当滚动停止时，仍然会执行滚动时所需要转动的页数的。 90 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView 91 { 92     //停止定时器 93     [self.timer invalidate]; 94 } 95 //当停止滚动的时候，开启定时器，重新进入自动循环 96 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate 97 { 98     [self addTimerO]; 99 //    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];100 }101 @end

 

UI基础--使用UIScrollView、UIPageControl、NSTimer实现图片循环播放


联系
我们