IOS开发UI基础之UIScrollView
什么是UIScrollView
● 移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限
● 当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容
● 普通的UIView不具备滚动功能,不适合显⽰示过多的内容
● UIScrollView是⼀一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚 动查看所有的内容
UIScrollView的基本使⽤
● UIScrollView的⽤用法很简单
➢ 将需要展⽰示的内容添加到UIScrollView中
➢ 设置UIScrollView的contentSize属性,告诉UIScrollView所有内容的尺⼨寸,也就是告诉它 滚动的范围(能滚多远,滚到哪⾥里是尽头)
● UIScrollView显⽰示内容的⼩小细节
● 超出UIScrollView边框的内容会被⾃自动隐藏
● ⽤用户可以⽤用过⼿手势拖动来查看超出边框并被隐藏的内容
UIScrollView⽆无法滚动的解决办法
● 如果UIScrollView⽆无法滚动,可能是以下原因: ➢ 没有设置contentSize
-
➢ scrollEnabled = NO
-
➢ 没有接收到触摸事件:userInteractionEnabled = NO
UIScrollView的常见属性
@property(nonatomic)CGPointcontentOffset; ➢ 这个属性⽤用来表⽰示UIScrollView滚动的位置 (其实就是内容左上⾓角与scrollView左上⾓角的间距值)
● @property(nonatomic)CGSizecontentSize;
➢ 这个属性⽤用来表⽰示UIScrollView内容的尺⼨寸,滚动范围(能滚多远)
● @property(nonatomic)UIEdgeInsetscontentInset;
➢ 这个属性能够在UIScrollView的4周增加额外的滚动区域,⼀一般⽤用来避免scrollView的内容被 其他控件挡住
@property(nonatomic)CGPointcontentOffset; ➢ 这个属性⽤用来表⽰示UIScrollView滚动的位置 (其实就是内容左上⾓角与scrollView左上⾓角的间距值)
● @property(nonatomic)CGSizecontentSize;
➢ 这个属性⽤用来表⽰示UIScrollView内容的尺⼨寸,滚动范围(能滚多远)
● @property(nonatomic)UIEdgeInsetscontentInset;
➢ 这个属性能够在UIScrollView的4周增加额外的滚动区域,⼀一般⽤用来避免scrollView的内容被 其他控件挡住
UIScrollView的代理(delegate)
● 要想完成上述功能,前提条件就是能够监听到UIScrollView的整个滚动过程
● 当UIScrollView发⽣生⼀一系列的滚动操作时, 会⾃自动通知它的代理(delegate)对象,给它的代理发送相应的消息,让代理得知它的滚动情况
● 也就是说,要想监听UIScrollView的滚动过程,就必须先给UIScrollView设置⼀一个代理对象,然后通过代 理得知UIScrollView的滚动过程
UIScrollView和delegate的通信
在OC中 发送消息的意思就是调用方法 因此UISCrollView和 delegate的通信可以理解为下图所示:
再精确一点的讲 你可以按下图的方式理解
通过上图可以看出 要想成为UIScrollView的代理(delegate) 是有条件的 那就是必须实现对应的方法 才能够监听UIScrollView的滚动
成为UIScrollView的条件
UIScrollView将delegate需要实现的⽅方法都定义在了UIScrollViewDelegate协议中, 因此要想成为UIScrollView的delegate,必须遵守UIScrollViewDelegate协议,然后 实现协议中相应的⽅方法,就可以监听UIScrollView的滚动过程了
UIScrollView和控制器
● ⼀一般情况下,就设置UIScrollView所在的控制器 为 UIScrollView的delegate● 设置控制器为UIScrollView的delegate有2种⽅方法: ➢ 通过代码(self就是控制器) self.scrollView.delegate = self;
➢ 通过storyboard拖线(右击UIScrollView)
- 然后控制器应该遵守UIScrollViewDelegate 协议
- 最后实现协议中的方法即可
UIScrollView的缩放原理
● 当⽤用户在UIScrollView⾝身上使⽤用捏合⼿手势时,UIScrollView会给代理发送⼀一条消息,询问代理究竟要缩放⾃自⼰己内部的哪⼀一个⼦子控件(哪⼀一块内容)
缩放实现步骤
-
设置UIScrollView的id<UISCrollViewDelegate> delegate代理对象
-
设置minimumZoomScale :缩⼩小的最⼩小⽐比例
-
设置maximumZoomScale :放⼤大的最⼤大⽐比例
-
让代理对象实现下⾯面的⽅方法,返回需要缩放的视图控件
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;
跟缩放相关的其他代理⽅方法 缩放完毕的时候调⽤用
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view
正在缩放的时候调⽤用
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
分页
-
● 只要将UIScrollView的pageEnabled属性设置为YES,UIScrollView会被分割成多个独⽴立页⾯面,⾥里⾯面的内容就能进⾏行分页展⽰示
-
● ⼀一般会配合UIPageControl增强分页效果,UIPageControl常⽤用属性如下
➢ ⼀一共有多少页
@property(nonatomic) NSInteger numberOfPages;
➢ 当前显⽰示的页码
@property(nonatomic) NSInteger currentPage;
➢ 只有⼀一页时,是否需要隐藏页码指⽰示器
@property(nonatomic) BOOL hidesForSinglePage;
➢ 其他页码指⽰示器的颜⾊色
@property(nonatomic,retain) UIColor *pageIndicatorTintColor;
➢ 当前页码指⽰示器的颜⾊色
@property(nonatomic,retain) UIColor *currentPageIndicatorTintColor;
常见的分页:
NSTimer
● NSTimer叫做“定时器”,它的作⽤用如下 ➢ 在指定的时间执⾏行指定的任务
➢ 每隔⼀一段时间执⾏行指定的任务
● 调⽤用下⾯面的⽅方法就会开启⼀一个定时任务
+ (NSTimer *)scheduledTimerWithTimeInterval:(NSTimeInterval)ti
target:(id)aTarget selector:(SEL)aSelector userInfo:(id)userInfo repeats:(BOOL)yesOrNo;
每隔ti秒,调⽤用⼀一次aTarget的aSelector⽅方法,yesOrNo决定了是否重复执⾏行这个任 务
NSTimer *timer = [NSTimer timerWithTimeInterval:2 target:self selector:@selector(next) userInfo:nil repeats:YES];
UIScrollView补充属性 • contentOffset 默认CGPointZero,用来设置scrollView的滚动偏移量。 // 设置scrollView的滚动偏移量 scrollView.contentOffset = CGPointMake(0, 200); • contentSize 默认CGSizeZero,用来设置scrollView的滚动范围。 // 设置scrollView的滚动范围 scrollView.contentSize = CGSizeMake( self.view.bounds.size.width, self.view.bounds.size.height * 2); • contentInset 默认 UIEdgeInsetsZero,用来设置scrollView的额外滚动区域。 // 设置scrollView的额外顶部滚动区域:(UIEdgeInsetsMake是逆时针设置,上左下右) scrollView.contentInset = UIEdgeInsetsMake(100, 0, 0, 0); • bounces 默认为YES,用来设置scrollView的弹簧效果 // 取消scrollView的弹簧效果 scrollView.bounces = NO; 5.pagingEnabled 默认为NO,用来设置scrollView是否开启分页. // 开启分页 scrollView.pagingEnabled = YES; 6.scrollEnabled 默认为YES,用来设置scrollView是否允许滚动. // scrollView禁止滚动 scrollView.scrollEnabled = NO; 7.showsHorizontalScrollIndicator 默认为YES,用来设置scrollView是否显示水平滚动条. // 隐藏水平滚动条 scrollView.showsHorizontalScrollIndicator = NO; 8.showsVerticalScrollIndicator 默认为YES,用来设置scrollView是否显示垂直滚动条. // 隐藏垂直滚动条 scrollView.showsVerticalScrollIndicator = NO; 9.minimumZoomScale 默认1.0,用来设置scrollView最少缩小比例. // 设置scrollView允许子视图的最大放大比例 scrollView.maximumZoomScale = 2; 10.maximumZoomScale 默认1.0,用来设置scrollView最大放大比例. // 设置scrollView允许子视图的最小缩放比例 scrollView.minimumZoomScale = 0.8; 11. delegate 类要遵守UIScrollViewDelegate协议 scrollView.delegate = self; 声明scrollView的代理是我, 这个方法在UIScrollViewDelegate里所以我们要遵守UIScrollViewDelegate这个协议 11.1当scrollView的偏移量一改变就会调用这个方法,即滚动scrollView就会调用。 - (void)scrollViewDidScroll:(UIScrollView *)scrollView; 11.2 当scrollView缩放时,就会调用这个方法 - (void)scrollViewDidZoom:(UIScrollView *)scrollView NS_AVAILABLE_IOS(3_2); 11.3 即将拖拽的时候调用. - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView; 11.4 即将停止拖拽的时候调用 - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset NS_AVAILABLE_IOS(5_0); 11.5 停止拖拽的时候调用。 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate; 11.6 即将减速完成的时候调用。 - (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView; 11.7 减速完成的时候调用 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView; 11.8 返回需要缩放哪个视图,这个视图必须是scrollView里的子视图。 - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView; // 列如: - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView { return scrollView.subviews[0]; } 11.9 scrollView即将开始缩放 - (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view NS_AVAILABLE_IOS(3_2); 11.10 scrollView完成缩放 - (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale; 11.11没有开启分页的时候,代理方法调用顺序: scrollViewWillBeginDragging –> scrollViewDidScroll -> scrollViewWillEndDragging -> scrollViewDidEndDragging 11.12 开启分页的时候,代理方法调用顺序 scrollViewWillBeginDragging -> scrollViewDidScroll -> scrollViewDidEndDragging ->scrollViewWillBeginDecelerating ->scrollViewDidScroll -> scrollViewDidEndDecelerating 12. directionalLockEnabled 指定控件是否只能在一个方向上滚动 13. decelerationRate 改变scrollerView的减速点位置 14. tracking 监控当前目标是否正在被跟踪 15. dragging 改变scrollerView的减速点位置 16. delaysContentTouches 控制视图是否延时调用开始滚动的方法 17. canCancelContentTouches 控制控件是否接触取消touch的事件 18. indicatorStyle 设定滚动条的样式 19. decelerating 监控当前目标是否正在减速