【iOS开发-55】图片轮播案例:scrollView的分页、滚动栏、利用代理控制定时器和Page Control以及多线程问题
案例:

(1)用storyboard布局,这里用了三样东西。
——UIScrollView就是我们准备存放滚动图片的容器。
——Page Control就是控制页数的那几个小点点。能够设置有多少个点。当前点和其它点的颜色等。注意它和UIScrollView是平级的,不是它的子视图。
——另一个textView是带有滚动的,用来測试多线程的。
暂且任意拖放在页面中就可以。
(2)在ViewController.m中
——借助之前的scrollView属性,设置滚动范围
——借助新学习的scrollView的属性pagingEnabled直接设置scrollView是否分页。这里面须要注意的是,假设要借助这样的方式实现分页,那么最好让scrollView的宽度正好等于里面每张图片的宽度。否则分页会出现截断。
由于分页是依照scrollView的宽度给整个滚动区域做分割的。
——借助showsHorizontalScrollIndicator属性去除水平滚动栏,垂直滚动栏的属性。输入showsVe....查看。这里略去。
——借助定时器,实现每隔1秒钟播放下一张图片的效果。
——这里相同用到代理:
由于我们须要监听scrollView滚动到哪里:以设置响应的Page Control的当前点点。
由于我们须要监听scrollView是否被拖拽。假设被拖拽。那么就停止那个定时器。
由于我们须要监听scrollView是否停止被拖拽,假设不被拖拽,那么要又一次加入一个定时器。
——当然,这里面定时器每隔1秒播放下一张图片,事实上是定时器每隔1秒运行一次imagePlay方法,这个imagePlay方法主要通过改变scrollView的contentOffset值来实现scrollView的滚动。
#import "ViewController.h" @interface ViewController ()<UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
@property (strong,nonatomic) NSTimer *timer; @end @implementation ViewController
//总共图片数量
#define kIMGCOUNT 5 - (void)viewDidLoad {
CGFloat imageY=0;
CGFloat imageW=self.scrollView.frame.size.width;
CGFloat imageH=self.scrollView.frame.size.height;
//用for循环往ScrollView中加入图片,这里面计算每张图片的x值是重点
for (int i=0; i<kIMGCOUNT; i++) {
UIImageView *imageView=[[UIImageView alloc]init];
CGFloat imageX=i*imageW;
imageView.frame=CGRectMake(imageX, imageY, imageW, imageH);
imageView.image=[UIImage imageNamed:[NSString stringWithFormat:@"img_%02d",i+1]];
[self.scrollView addSubview:imageView];
}
//然后设置scrollView的contentSize,这样才干滚动起来,这里滚动仅仅有横向滚动,所以竖向的为0
self.scrollView.contentSize=CGSizeMake(kIMGCOUNT*imageW, 0);
//分页,pagingEnabled是scrollView的一个属性
self.scrollView.pagingEnabled=YES;
//去除水平滚动栏
self.scrollView.showsHorizontalScrollIndicator=NO;
//设置页数控制器总页数,即button数
self.pageControl.numberOfPages=kIMGCOUNT; //设置代理
self.scrollView.delegate=self; //设置自己主动播放。定时器。每隔1秒钟播放下一张图片
[self timerOn]; [super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
//比方下一张图片,事实上就是拖动scrollView。也就是改变scrollView的contentOffset属性
//当然。这里要推断一下,假设播放最后一张了,那么下一张就是第一张
-(void)imgPlay{
int i=self.pageControl.currentPage;
if (i==kIMGCOUNT-1) {
i=-1;
}
i++;
[self.scrollView setContentOffset:CGPointMake(i*self.scrollView.frame.size.width, 0) animated:YES];
}
//当用户准备拖拽的时候。关闭定时器
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
[self timerOff];
}
//当用户停止拖拽的时候,加入一个定时器
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
[self timerOn];
}
//每隔1秒播放图片,事实上是每隔1秒调用imgPlay方法
-(void)timerOn{
self.timer=[NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(imgPlay) userInfo:nil repeats:YES];
//为了防止单线程的弊端,能够保证用户在使用其它控件的时候系统照样能够让定时器运转
[[NSRunLoop currentRunLoop]addTimer:self.timer forMode:NSRunLoopCommonModes];
}
//关闭定时器,而且把定时器设置为nil,这是习惯
-(void)timerOff{
[self.timer invalidate];
self.timer=nil;
}
//这个事推断定时器滚动的时候,实时推断滚动位置。以让Page Controll显示当前的点是哪一个点
//这个须要在总宽度上加上半个scrollView的宽度,是为了保证拖拽到一半时候左右的效果
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
self.pageControl.currentPage=(self.scrollView.frame.size.width*0.5+self.scrollView.contentOffset.x)/self.scrollView.frame.size.width;
} @end
当然,这里面的代码是经过一些封装的。
比方,我们把开关定时器封装成两个方法。这样哪里用到仅仅须要调用下面就可以。
(3)Page Control。事实上就是一些小点点,你能够设置当前处于第几个点。一共同拥有几个点,当前点得颜色,其它点得颜色等等。
(4)这里面涉及到了一个多线程的知识。
一般我们值面向单线程,即系统每次仅仅能处理一个事件,比方我们这里的图片轮播,假设用户在页面上拖拽其它东西,比方我们这里的textView。那么系统就会集中处理这个事件。无暇顾及我们的图片轮播。所以这个时候图片轮播就不动了。
我们要介绍的时NSRunLoop这个类。它是什么呢?事实上看了非常多他人的笔记,大家仅仅说了它的作用功能,可是连最主要的翻译都没有,翻看官方文档,我们能够把它理解成是一个专门用来接受用户一些输入操作的台子。一般而言,单线程的话。这个台子仅仅能接受一个操作。所以才会出现我们上面的情况。
要解决问题的思路就在于:我们先拿到当前的台子 >>> 然后把我们的定时器死乞白赖地加入到这个台子里 >>> 相当于我们这个定时器也时时刻刻被系统处理着,不会由于其它事件而忽略定时器。
[[NSRunLoop currentRunLoop]addTimer:self.timer forMode:NSRunLoopCommonModes];
【iOS开发-55】图片轮播案例:scrollView的分页、滚动栏、利用代理控制定时器和Page Control以及多线程问题的更多相关文章
- Jsoup开发网站客户端第二篇,图片轮播,ScrollView兼容ListView
		
最近一段日子忙的焦头烂额,代码重构,新项目编码,导致jsoup开发网站客户端也没时间继续下去,只能利用晚上时间去研究了.今天实现美食网首页图片轮播效果,网站效果图跟Android客户端实现如图: 从浏 ...
 - ios 学习 广告图片轮播器
		
// // ViewController.m // 图片轮播器 // // Created by zjj on 15/5/23. // Copyright (c) 2015年 zjj. All rig ...
 - ios之无限图片轮播器的实现
		
首先实现思路:整个collectionView中只有2个cell.中间始终显示第二个cell. 滚动:向前滚动当前cell的脚标为0,向后滚动当前的cell脚标为2.利用当前cell的脚标减去1,得到 ...
 - EUI   Scroller实现自定义图片轮播    组件ScrollView
		
一 自定义组件如下 /** * 文 件 ScrollView.ts * 功 能: 滚动组件 * 内 容: 自定义组件,支持多张图片水平(垂直)切换滚动 * * Example: * 1. 从自定义组件 ...
 - VUE开发一个图片轮播的组件
		
完成效果图如下: vue开发的思路主要是数据绑定,代码如下: <template> <div ref="root" style="user-select ...
 - vue实例之组件开发:图片轮播组件
		
一.普通方式: 其中,index是关键. <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
 - UIScrollView实现图片轮播器及其无限循环效果
		
图片轮播器: 一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" ...
 - iOS开发UI篇—UIScrollView控件实现图片轮播
		
iOS开发UI篇—UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: #import "YYV ...
 - 【转】 iOS开发UI篇—UIScrollView控件实现图片轮播
		
原文:http://www.cnblogs.com/wendingding/p/3763527.html iOS开发UI篇—UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播 ...
 
随机推荐
- select函数详解
			
网络编程中一个很重要的函数,没有整理,直接转过来,讲的还是蛮详细的. 转自:http://blog.csdn.net/zhw888888/archive/2009/03/29/4034515.aspx ...
 - 百度之星初赛(A)——T6
			
度度熊的01世界 Problem Description 度度熊是一个喜欢计算机的孩子,在计算机的世界中,所有事物实际上都只由0和1组成. 现在给你一个n*m的图像,你需要分辨他究竟是0,还是1,或者 ...
 - wcf常用的概念
			
常见的服务行为包括实例控制.并发控制.元数据发布等 在WCF中,有三种消息交换模式:数据报模式.请求-响应模式.双工模式. 在WCF中一共包含了4种契约,分别是服务契约.数据契约.错误契约和消息契约. ...
 - 疫情控制(NOIP2012)庆祝2012满贯!٩(๑•◡-๑)۶ⒽⓤⒼ
			
丧病至极的D2T3啊! 好吧~ 先放个传送门~ 原题传送门 好吧,这道题呢.. 根据题意我们可以很明显的看出来 军队往上走的越多(在没到根节点之前),效益一定越大.. 所以可以分情况讨论: 对于无法走 ...
 - 基于Xen实现一种domain0和domainU的应用层数据交互高效机制 - 3
			
继续 上一篇 的研究,结合 xen4.2.3 的代码分析,发现 xen4.2.3 的应用层工具库 tools 包含一个工具叫 libvchan ,其头文件描述如下: * This is a libra ...
 - UVA 11125 Arrange Some Marbles
			
dp[i][j][m][n][s]表示最初选择j个i号颜色大理石.当前选择n个m号颜色大理石.剩余大理石状态(8进制数状压表示)最开始没看出状压..sad #include <map> # ...
 - Python学习杂记_11_函数(二)
			
函数的高级运用这部分知识的核心内容就是你要把“函数即变量”这个概念理解并运用得出神入化... 一.函数的递归调用 所谓递归调用就是函数自己调用自己,在Python中如果不做限制递归调用的死循环最多可循 ...
 - 【linux高级程序设计】(第九章)进程间通信-管道 2
			
文件描述符重定向 cat<test01 :将输入重定向到test01文件 cat>test02<test01 :将标准正确输出重定向到test02文件,输入设备重定向到test0 ...
 - python爬虫beautifulsoup4系列1【转载】
			
本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/beautifulsoup4/ 前言 以博客园为例,爬取我的博客上首页的发布时间.标题. ...
 - 出现函数重载错误call of overloaded ‘printfSth(double)’ is ambiguous
			
class C: { public: void printfSth(int i) { cout<<"C::printfSth(int i):"<<i< ...