基于ScrollerView上的滚动视图,自动轮播及pageController控制图片

1,实现图片轮播需要设置scrollerView 的contentSize 进而通过控制scrollerView的ContentSize实现图片的播放

2,实现图片的循环播放其实是在轮播的图片首尾各添加一张图片,之后利用时间差来实现图片的循环播放

3,运用的组件包括 :

　　　　　　　　a:UIScrollerView

　　　　　　　　b:NSTimer

　　　　　　　　c:UIPageControl

一,首先创建一个单一的Single View Application

二,在ViewController.m里面进行声明

1 {
2     UIScrollView * scrView;
3     NSTimer * timer;      //第一个定时器
4     UIPageControl * pageCon;  //页面控制器
5     NSTimer * timer2; //第二个定时器
6 }

因为项目中用到屏幕的宽的地方比较多,所以我们进行宏定义

SCREENWIDTH

1 #define SCREENWIDTH self.view.frame.size.width

三,在viewDidLoad里面创建

 1 - (void)viewDidLoad {
 2     [super viewDidLoad];
 3     
 4     scrView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 20, SCREENWIDTH, 150)];
 5     scrView.delegate = self;  //设置scrollerView的代理
 6     scrView.contentSize = CGSizeMake(SCREENWIDTH * 7, 150); //因项目中是用的5张图片进行循环轮播,所以我们要在首尾各添加一张图片,在第一张图片之前添加第五张图片,在第五章图片之后添加第一张图片  image0和image5是一张图片  image6和image1是一张图片
 7     [self.view addSubview:scrView];
 8     scrView.pagingEnabled = YES; //设置分页
 9     
10 //在scrollerView内部循环创建7张图片
11     for (int i = 0 ; i <7; i ++) {
12         UIImageView * imgView = [[UIImageView alloc]initWithFrame:CGRectMake(i * SCREENWIDTH, 0, SCREENWIDTH, 150)];
13         imgView.image = [UIImage imageNamed:[NSString stringWithFormat:@"image%d",i]];
14         [scrView addSubview:imgView];
15     }
16     
17     [scrView setContentOffset:CGPointMake(SCREENWIDTH, 0)];//设置第二张图片在屏幕中显示,这个就是我们要的第一章图片
18     timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(runLoop) userInfo:nil repeats:YES];//添加定时器
19     
20     
21     pageCon = [[UIPageControl alloc]initWithFrame:CGRectMake(SCREENWIDTH - 200, 130, 200, 40)]; //创建页面控制器
22     pageCon.numberOfPages = 5;
23     pageCon.currentPageIndicatorTintColor = [UIColor redColor]; 
24     pageCon.pageIndicatorTintColor = [UIColor blueColor];
25     pageCon.currentPage = 0;
26     [pageCon addTarget:self action:@selector(pageClick) forControlEvents:UIControlEventValueChanged];
27     [self.view addSubview:pageCon];
28 }

四,首先实现UIScrollerView的代理协议

 1 @interface ViewController ()<UIScrollViewDelegate>
 2 #pragma mark - UIScrollerViewDelegate协议方法
 3 - (void)scrollViewDidScroll:(UIScrollView *)scrollView{
 4     //scrollView滚动的时候
 5     if (scrView.contentOffset.x == 6 * SCREENWIDTH) {
 6         [scrView setContentOffset:CGPointMake(SCREENWIDTH, 0)animated:NO];
 7     } //如果当scrollerview的偏移到第五张图片的时候 ,设置scrollerView偏移到第一张图片,记得动画效果一定要设置为NO ,不然不会实现循环播放效果
 8     pageCon.currentPage = (scrView.contentOffset.x - SCREENWIDTH)/SCREENWIDTH;  //设置页数控制器的指示页数跟着,图片的循环而变化
 9 }
10 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
11     //开始拖拽
12     [timer invalidate]; //开始拖拽的时候使定时器作废
13 }
14 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
15     //结束拖拽
16 }
17 - (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView{
18     //开始减速的时候
19     [timer invalidate]; //开始减速的时候也要设置定时器作废 ,不然的话如果图片在轮播的时候你直接点击不进行拖拽,会出现 bug
20 } 
21 
22 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
23     //结束减速
24     timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(runLoop) userInfo:nil repeats:YES]; //当图片结束动作的时候添加定时器
25 }

五,首先实现页数控制器的点击方法

1 -(void)pageClick{
2     [timer invalidate];  //当点击分页控制器的时候,使timer定时器失效
3     [scrView setContentOffset:CGPointMake((pageCon.currentPage +1) * SCREENWIDTH, 0)]; //设置scrollerView的偏移量根据页数控制器的变化而变化
4     timer2 = [NSTimer scheduledTimerWithTimeInterval:0 target:self selector:@selector(looploop) userInfo:nil repeats:NO]; //创建另外一个定时器 ,
5 }

六,实现定时器timer2的方法效果

1 -(void)looploop{

2 timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(runLoop) userInfo:nil repeats:YES];

3 }

七,实现定时器timer的方法

1 -(void)runLoop{
2     [timer2 invalidate];
3     [scrView setContentOffset:CGPointMake(scrView.contentOffset.x + SCREENWIDTH, 0) animated:YES];
4     
5 }

在这里要说明一下为什么要创建2个定时器,如果不创建第二个定时器,我们点击pageControl的时候timer也就是第一个定时器他还是在工作的,这样当我们点击的时候出现的效果不是很好,我们创建2个定时器的话就可以避免这种情况,记得要在第一个定时器里面设置第二个定时器作废!!!!!

之后我们的效果就实现了

看一下静态效果(只能看静态效果了,视屏不会传)

祝大家早日成大牛...