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

实现思路：

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 //1
2 //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 //2
8 //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