基于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个定时器的话就可以避免这种情况,记得要在第一个定时器里面设置第二个定时器作废!!!!!
之后我们的效果就实现了
看一下静态效果(只能看静态效果了,视屏不会传)
祝大家早日成大牛...
