这里做的是一个有两秒轮询滚动的scrollView,就是每隔两秒,scrollView上面的图片就会换一次,下面是代码讲解。
1、首先创建一个scrollView和准备5张本地照片,也可以是网络照片数据,存放到array中,因为要让他滚动,所以你当前显示第一张图片的时候,往左滑要显示最后一张图片,所以需要分别再头部插入最后一张图片数据,和在尾部插入第一张图片数据
<p class="p1"><span class="s1">//</span><span class="s2">创建一个</span><span class="s1">scrollview</span></p><p class="p2"><span class="s3"> </span><span class="s4">self</span><span class="s3">.</span><span class="s1">myScrollview</span><span class="s3"> = [[</span><span class="s5">UIScrollView</span><span class="s3"> </span><span class="s1">alloc</span><span class="s3">]</span><span class="s1">init</span><span class="s3">];</span></p><p class="p3"><span class="s1"> </span></p><p class="p2"><span class="s3"> </span><span class="s4">self</span><span class="s3">.</span><span class="s1">myScrollview</span><span class="s3">.</span><span class="s1">frame</span><span class="s3"> = </span><span class="s1">CGRectMake</span><span class="s3">(</span><span class="s4">0</span><span class="s3">, </span><span class="s4">0</span><span class="s3">, </span><span class="s4">self</span><span class="s3">.</span><span class="s1">view</span><span class="s3">.</span><span class="s1">frame</span><span class="s3">.</span><span class="s1">size</span><span class="s3">.</span><span class="s1">width</span><span class="s3">, </span><span class="s4">self</span><span class="s3">.</span><span class="s1">view</span><span class="s3">.</span><span class="s1">frame</span><span class="s3">.</span><span class="s1">size</span><span class="s3">.</span><span class="s1">height</span><span class="s3">);</span></p><p class="p3"><span class="s1"> </span></p><p class="p2"><span class="s3"> </span><span class="s4">self</span><span class="s3">.</span><span class="s1">myScrollview</span><span class="s3">.</span><span class="s1">delegate</span><span class="s3"> = </span><span class="s4">self</span><span class="s3">;</span></p><p class="p3"><span class="s1"> </span></p><p class="p2"><span class="s3"> </span><span class="s4">self</span><span class="s3">.</span><span class="s1">myScrollview</span><span class="s3">.</span><span class="s1">backgroundColor</span><span class="s3"> = [</span><span class="s5">UIColor</span><span class="s3"> </span><span class="s1">greenColor</span><span class="s3">];</span></p><p class="p3"><span class="s1"> </span></p><p class="p2"><span class="s3"> [</span><span class="s4">self</span><span class="s3">.</span><span class="s1">view</span><span class="s3"> </span><span class="s1">addSubview</span><span class="s3">:</span><span class="s4">self</span><span class="s3">.</span><span class="s1">myScrollview</span><span class="s3">];</span></p><p class="p3"><span class="s1"> </span></p><p class="p4"><span class="s6"> </span><span class="s7">//</span><span class="s1">准备图片素材(共</span><span class="s7">5</span><span class="s1">张)</span></p><p class="p5"><span class="s3"> </span><span class="s5">NSArray</span><span class="s3"> *array = </span><span class="s4">@[</span><span class="s1">@"apic16466.jpg"</span><span class="s3">,</span><span class="s1">@"apic16892.jpg"</span><span class="s3">,</span><span class="s1">@"144833361155.jpg"</span><span class="s3">,</span><span class="s1">@"1448333704435.jpg"</span><span class="s3">,</span><span class="s1">@"1448589211477.jpg"</span><span class="s4">]</span><span class="s3">;</span></p><p class="p2"><span class="s3"> </span><span class="s4">self</span><span class="s3">.</span><span class="s1">photoArray</span><span class="s3"> = [[</span><span class="s5">NSMutableArray</span><span class="s3"> </span><span class="s1">alloc</span><span class="s3">]</span><span class="s1">initWithArray</span><span class="s3">:array];</span></p><p class="p2"><span class="s3"> </span><span class="s4">if</span><span class="s3"> (</span><span class="s4">self</span><span class="s3">.</span><span class="s1">photoArray</span><span class="s3">.</span><span class="s1">count</span><span class="s3"> > </span><span class="s4">0</span><span class="s3">) {</span></p><p class="p4"><span class="s6"> </span><span class="s7">//</span><span class="s1">在头部插入最后一张图片</span></p><p class="p2"><span class="s3"> [</span><span class="s4">self</span><span class="s3">.</span><span class="s1">photoArray</span><span class="s3"> </span><span class="s1">insertObject</span><span class="s3">:</span><span class="s4">self</span><span class="s3">.</span><span class="s1">photoArray</span><span class="s3">.</span><span class="s1">lastObject</span><span class="s3"> </span><span class="s1">atIndex</span><span class="s3">:</span><span class="s4">0</span><span class="s3">];</span></p><p class="p1"><span class="s3"> </span><span class="s1">//</span><span class="s2">在尾部插入第一张图片</span></p><p class="p2"><span class="s3"> [</span><span class="s4">self</span><span class="s3">.</span><span class="s1">photoArray</span><span class="s3"> </span><span class="s1">addObject</span><span class="s3">:</span><span class="s4">self</span><span class="s3">.</span><span class="s1">photoArray</span><span class="s3">[</span><span class="s4">1</span><span class="s3">]];</span></p><p class="p6"><span class="s1"> }</span></p>
2、把图片加载到scrollView上,并设置scrollView的效果,还记得要实现setContentSize和setContentOffset这两个方法,分别设置scrollView的实际内容大小和显示初始位置
//设置内容图片
for (int i = 0; i < _photoArray.count; i ++) {
UIImageView *imageView = [[UIImageView alloc]init];
imageView.frame = CGRectMake(i * self.view.frame.size.width, 0, self.view.frame.size.width, self.view.frame.size.height);
imageView.image = [UIImage imageNamed:_photoArray[i]];
[self.myScrollview addSubview:imageView];
}
//设置scrollview的实际内容大小
[self.myScrollview setContentSize:CGSizeMake(self.view.frame.size.width * _photoArray.count, self.view.frame.size.height)];
//设置分页
self.myScrollview.pagingEnabled = YES;
//去除滚动条效果
self.myScrollview.showsHorizontalScrollIndicator = NO;
//是否反弹
self.myScrollview.bounces = YES;
//设置初始显示位置,很重要
[self.myScrollview setContentOffset:CGPointMake(self.view.frame.size.width, 0)];
3、给scrollView加一个滚动计时器
-(void)setScrolTimer{
//每隔两秒滚动ScrollView
self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(scrolMainScrollView) userInfo:nil repeats:YES];
}
<p class="p1"><span class="s1">-(</span><span class="s2">void</span><span class="s1">)scrolMainScrollView{</span></p><p class="p2"><span class="s3"> </span><span class="s2">float</span><span class="s3"> currentX = </span><span class="s2">self</span><span class="s3">.</span><span class="s1">myScrollview</span><span class="s3">.</span><span class="s1">contentOffset</span><span class="s3">.</span><span class="s1">x</span><span class="s3"> + </span><span class="s2">self</span><span class="s3">.</span><span class="s1">view</span><span class="s3">.</span><span class="s1">frame</span><span class="s3">.</span><span class="s1">size</span><span class="s3">.</span><span class="s1">width</span><span class="s3">;</span></p><p class="p3"><span class="s4"> </span><span class="s5">//</span><span class="s1">滚动到某个位置</span></p><p class="p4"><span class="s3"> </span><span class="s1">//CGRect</span><span class="s6">设置将要滚动到得地方</span></p><p class="p4"><span class="s3"> </span><span class="s1">//animated</span><span class="s6">设置是否需要滚动动画</span></p><p class="p2"><span class="s3"> [</span><span class="s2">self</span><span class="s3">.</span><span class="s1">myScrollview</span><span class="s3"> </span><span class="s1">scrollRectToVisible</span><span class="s3">:</span><span class="s1">CGRectMake</span><span class="s3">(currentX, </span><span class="s2">0</span><span class="s3">, </span><span class="s2">self</span><span class="s3">.</span><span class="s1">view</span><span class="s3">.</span><span class="s1">frame</span><span class="s3">.</span><span class="s1">size</span><span class="s3">.</span><span class="s1">width</span><span class="s3">, </span><span class="s2">self</span><span class="s3">.</span><span class="s1">view</span><span class="s3">.</span><span class="s1">frame</span><span class="s3">.</span><span class="s1">size</span><span class="s3">.</span><span class="s1">height</span><span class="s3">) </span><span class="s1">animated</span><span class="s3">:</span><span class="s2">YES</span><span class="s3">];</span></p><p class="p5"><span class="s1"> </span></p><p class="p4"><span class="s3"> </span><span class="s1">//</span><span class="s6">制作一个延时改变</span><span class="s1">timer</span></p><p class="p5"><span class="s1"> </span></p><p class="p4"><span class="s3"> </span><span class="s1">//</span><span class="s6">在重新生成</span><span class="s1">timer</span><span class="s6">前,把之前使用的</span><span class="s1">timer</span><span class="s6">销毁</span></p><p class="p1"><span class="s1"> </span><span class="s2">if</span><span class="s1"> (</span><span class="s2">self</span><span class="s1">.</span><span class="s7">delaytimer</span><span class="s1">) {</span></p><p class="p2"><span class="s3"> [</span><span class="s2">self</span><span class="s3">.</span><span class="s1">delaytimer</span><span class="s3"> </span><span class="s1">invalidate</span><span class="s3">];</span></p><p class="p1"><span class="s1"> </span><span class="s2">self</span><span class="s1">.</span><span class="s7">delaytimer</span><span class="s1"> = </span><span class="s2">nil</span><span class="s1">;</span></p><p class="p1"><span class="s1"> }</span></p><p class="p5"><span class="s1"> </span></p><p class="p2"><span class="s3"> </span><span class="s2">self</span><span class="s3">.</span><span class="s1">delaytimer</span><span class="s3"> = [</span><span class="s8">NSTimer</span><span class="s3"> </span><span class="s1">scheduledTimerWithTimeInterval</span><span class="s3">:</span><span class="s2">0.7</span><span class="s3"> </span><span class="s1">target</span><span class="s3">:</span><span class="s2">self</span><span class="s3"> </span><span class="s1">selector</span><span class="s3">:</span><span class="s2">@selector</span><span class="s3">(delayTimerValueChange) </span><span class="s1">userInfo</span><span class="s3">:</span><span class="s2">nil</span><span class="s3"> </span><span class="s1">repeats</span><span class="s3">:</span><span class="s2">NO</span><span class="s3">];</span></p><p class="p5"><span class="s1"> </span></p><p class="p3"><span class="s4"> </span><span class="s5">//</span><span class="s1">当跑到第</span><span class="s5">2</span><span class="s1">张图片时,在动画开始前,直接把</span><span class="s5">scrollView</span><span class="s1">的位置返回到第一张图片中</span></p><p class="p1"><span class="s1"> </span><span class="s2">if</span><span class="s1"> (currentX >= (</span><span class="s2">self</span><span class="s1">.</span><span class="s7">photoArray</span><span class="s1">.</span><span class="s7">count</span><span class="s1"> - </span><span class="s2">1</span><span class="s1">) * </span><span class="s2">self</span><span class="s1">.</span><span class="s7">view</span><span class="s1">.</span><span class="s7">frame</span><span class="s1">.</span><span class="s7">size</span><span class="s1">.</span><span class="s7">width</span><span class="s1">) {</span></p><p class="p2"><span class="s3"> [</span><span class="s2">self</span><span class="s3">.</span><span class="s1">myScrollview</span><span class="s3"> </span><span class="s1">setContentOffset</span><span class="s3">:</span><span class="s1">CGPointMake</span><span class="s3">(</span><span class="s2">0</span><span class="s3">, </span><span class="s2">0</span><span class="s3">)];</span></p><p class="p1"><span class="s1"> }</span></p><p class="p1"><span class="s1">}</span></p><p class="p1"><span class="s1">-(</span><span class="s2">void</span><span class="s1">)delayTimerValueChange{</span></p><p class="p2"><span class="s3"> [</span><span class="s2">self</span><span class="s3"> </span><span class="s1">changePageValue</span><span class="s3">];</span></p><p class="p1"><span class="s1">}</span></p><p class="p3"><span class="s1"></span>
</p><p class="p1"><span class="s1">-(</span><span class="s2">void</span><span class="s1">)changePageValue{</span></p><p class="p4"><span class="s4"> </span><span class="s5">//</span><span class="s1">计算当前的页码</span></p><p class="p2"><span class="s3"> </span><span class="s2">int</span><span class="s3"> page = </span><span class="s2">self</span><span class="s3">.</span><span class="s1">myScrollview</span><span class="s3">.</span><span class="s1">contentOffset</span><span class="s3">.</span><span class="s1">x</span><span class="s3"> / </span><span class="s2">self</span><span class="s3">.</span><span class="s1">view</span><span class="s3">.</span><span class="s1">frame</span><span class="s3">.</span><span class="s1">size</span><span class="s3">.</span><span class="s1">width</span><span class="s3">;</span></p><p class="p3"><span class="s1"> </span></p><p class="p1"><span class="s1"> </span><span class="s2">if</span><span class="s1"> (page == </span><span class="s2">0</span><span class="s1">) {</span></p><p class="p1"><span class="s1"> page = (</span><span class="s2">int</span><span class="s1">)(</span><span class="s2">self</span><span class="s1">.</span><span class="s6">photoArray</span><span class="s1">.</span><span class="s6">count</span><span class="s1"> - </span><span class="s2">3</span><span class="s1">);</span></p><p class="p1"><span class="s1"> }</span><span class="s2">else</span><span class="s1"> </span><span class="s2">if</span><span class="s1"> (page == (</span><span class="s2">self</span><span class="s1">.</span><span class="s6">photoArray</span><span class="s1">.</span><span class="s6">count</span><span class="s1"> - </span><span class="s2">1</span><span class="s1">)){</span></p><p class="p1"><span class="s1"> page = </span><span class="s2">0</span><span class="s1">;</span></p><p class="p1"><span class="s1"> }</span><span class="s2">else</span><span class="s1">{</span></p><p class="p1"><span class="s1"> page --;</span></p><p class="p1"><span class="s1"> }</span></p><p class="p3"><span class="s1"> </span></p><p class="p5"><span class="s3"> </span><span class="s1">//currentPage</span><span class="s7">取值</span><span class="s1">0~4</span></p><p class="p2"><span class="s3"> </span><span class="s2">self</span><span class="s3">.</span><span class="s1">scrollPageControl</span><span class="s3">.</span><span class="s1">currentPage</span><span class="s3"> = page;</span></p><p class="p1"><span class="s1">}</span></p>
4、实现scrollView的代理方法
#pragma mark - scrollViewDelegate
//scrollview开始拖动
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
//在拖拽时,销毁滚动视图的时间timer
[self.timer invalidate];
}
//scrollview结束拖动
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
//设置到最后一个界面(假1)时返回到第一个界面(真1)
if (scrollView.contentOffset.x >= self.view.frame.size.width * (self.photoArray.count - 1)) {
if (decelerate == NO) {
//回到第一个界面
[scrollView setContentOffset:CGPointMake(self.view.frame.size.width, 0)];
}
}
if (scrollView.contentOffset.x <= 0) {
if (decelerate == NO) {
//回到最后一个界面
[scrollView setContentOffset:CGPointMake(self.view.frame.size.width * (self.photoArray.count - 2), 0)];
}
}
[self changePageValue];
//重新开启时间滚动scrollView
[self setScrolTimer];
}
//scrollview减速停止
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
if (scrollView.contentOffset.x >= self.view.frame.size.width * (self.photoArray.count - 1)) {
//回到第一个界面
[scrollView setContentOffset:CGPointMake(self.view.frame.size.width, 0)];
}
if (scrollView.contentOffset.x <= 0) {
//回到最后一个界面
[scrollView setContentOffset:CGPointMake(self.view.frame.size.width * (self.photoArray.count - 2), 0)];
}
//调用改变页码的方法
[self changePageValue];
}
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
if (scrollView.contentOffset.x >= self.view.frame.size.width * (self.photoArray.count - 1)) {
//回到第一个界面
[scrollView setContentOffset:CGPointMake(self.view.frame.size.width, 0)];
}
if (scrollView.contentOffset.x <= 0) {
//回到最后一个界面
[scrollView setContentOffset:CGPointMake(self.view.frame.size.width * (self.photoArray.count - 2), 0)];
}
//调用改变页码的方法
[self changePageValue];
}
5、给scrollView添加一个UIPageControl
#pragma mark - 创建一个UIPageControl
-(void)setPageControl{
self.scrollPageControl = [[UIPageControl alloc]init];
self.scrollPageControl.frame = CGRectMake(100, self.view.frame.size.height - 70, 120, 50);
//改变UIPageControl颜色
// self.scrollPageControl.currentPageIndicatorTintColor = [UIColor blackColor];
//
// self.scrollPageControl.pageIndicatorTintColor = [UIColor blueColor];
[self.view addSubview:self.scrollPageControl];
//设置pageControl属性
//设置page总页数
self.scrollPageControl.numberOfPages = 5;
//设置当前页数
self.scrollPageControl.currentPage = 0;
//当pageControl的值改变时调用这个方法(用户触发)
[self.scrollPageControl addTarget:self action:@selector(pageControlValueChange) forControlEvents:UIControlEventValueChanged];
}
-(void)pageControlValueChange{
[self.myScrollview scrollRectToVisible:CGRectMake((self.scrollPageControl.currentPage + 1) * self.view.frame.size.width, 0, self.view.frame.size.width, self.view.frame.size.height) animated:YES];
//关掉时间
[self.timer invalidate];
//在重新生成timer前,把之前使用的timer销毁
if (self.delaytimer2) {
[self.delaytimer2 invalidate];
self.delaytimer2 = nil;
}
//相隔0.7秒重新恢复时间滚动scrollView
self.delaytimer2 = [NSTimer scheduledTimerWithTimeInterval:0.7 target:self selector:@selector(setScrolTimer) userInfo:nil repeats:NO];
}
源码地址: https://github.com/mooner2122/scrollview-2seconds-scroll