码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-01-01 06:39:44      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:

实现思路:
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

 

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

标签:

原文地址:http://www.cnblogs.com/xiaomoge/p/4196936.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!