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开发中的一个分页控件，一些常用属性如下：

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

 

NSTimer:

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

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

 

具体实现的代码：

//
//  ViewController.m
// 
//
//  Created by xiaomoge on 14/12/31.
//  Copyright (c) 2014年 xiaomoge All rights reserved.
//

#import "ViewController.h"

@interface ViewController () <UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;//需要和storyboard连线
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;//需要和storyboard连线
@property (nonatomic, strong) NSTimer *timer;//定时器
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    int count = 5;
     CGSize size = self.scrollView.frame.size;
    //1 动态生成5个imageView
    for (int i = 0; i < count; i++) {
        UIImageView *iconView = [[UIImageView alloc] init];
        [self.scrollView addSubview:iconView];

        NSString *imgName = [NSString stringWithFormat:@"img_%02d",i+1];
        iconView.image = [UIImage imageNamed:imgName];

        CGFloat x = i * size.width;
        //frame
        iconView.frame = CGRectMake(x, 0, size.width, size.height);
    }
    
    //2 设置滚动范围
    self.scrollView.contentSize = CGSizeMake(count * size.width, 0);
   //隐藏滚动条
    self.scrollView.showsHorizontalScrollIndicator = NO;
    //3 设置分页
    self.scrollView.pagingEnabled = YES;
    //4 设置pageControl的页数
    self.pageControl.numberOfPages = count;
    //5 设置scrollView的代理
    self.scrollView.delegate = self;
    //6 定时器
    [self addTimerO];
}
/*
添加定时器的方法
*/
- (void)addTimerO
{
    NSTimer *timer = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
    self.timer = timer;
    //消息循环
    NSRunLoop *runloop = [NSRunLoop currentRunLoop];
    [runloop addTimer:timer forMode:NSRunLoopCommonModes];
}
/*
循环下一张图片
*/
- (void)nextImage
{
    //取得当前页码
    NSInteger page = self.pageControl.currentPage;
   //判断当前页码，如果是循环到最后一张后，设置当前页数为第一张
    if (page == self.pageControl.numberOfPages - 1) {
        page = 0;
    }else{//否则继续＋＋
        page++;
    }
   //添加一个动画效果，让图片偏移不致于很突兀
    CGFloat offsetX = page * self.scrollView.frame.size.width;
    [UIView animateWithDuration:1.0 animations:^{
        self.scrollView.contentOffset = CGPointMake(offsetX, 0);
    }];
}

#pragma mark - scrollView的代理方法
//正在滚动的时候
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //如果图片转了一半以上，那么就把页数＋1
    int page = (scrollView.contentOffset.x + scrollView.frame.size.width / 2)/ scrollView.frame.size.width;
    //把page赋给当前页
    self.pageControl.currentPage = page;
}
//开始滚动的时候，把定时器给停止了，否则当滚动停止时，仍然会执行滚动时所需要转动的页数的。
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    //停止定时器
    [self.timer invalidate];
}
//当停止滚动的时候，开启定时器，重新进入自动循环
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    [self addTimerO];
//    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
}
@end