滚动视图与代理机制详解
本文深入探讨了iOS开发中UIScrollView的使用方法、代理机制、常见属性与代理方法，以及如何实现缩放功能和与UIPageControl的分页效果。通过实例代码，详细解析了如何设置ScrollView内容尺寸、滚动范围、最小最大缩放比例及代理回调方法。
UIScrollView
移动设备的屏幕大小是极其有限的，因此直接展示在用户眼前的内容也相当有限
当展示的内容较多，超出一个屏幕时，用户可通过滚动手势来查看屏幕以外的内容
普通的UIView不具备滚动功能，不能显示过多的内容
UIScrollView是一个能够滚动的视图控件，可以用来展示大量的内容，并且可以通过滚动查看所有的内容
举例：手机上的“设置”、其他示例程序
UIScrollView的用法
将需要展示的内容添加到UIScrollView中
设置UIScrollView的contentSize属性，告诉UIScrollView所有内容的尺寸，也就是告诉它滚动的范围（能滚多远，滚到哪里是尽头）
UIScrollView无法滚动的解决办法
<code class="hljs objectivec has-numbering">如果<span class="hljs-built_in">UIScrollView</span>无法滚动，可能是以下原因： <span class="hljs-number">1.</span>没有设置contentSize <span class="hljs-number">2.</span>scrollEnabled = <span class="hljs-literal">NO</span> <span class="hljs-number">3.</span>没有接收到触摸事件:userInteractionEnabled = <span class="hljs-literal">NO</span> <span class="hljs-number">4.</span>没有取消autolayout功能（要想scrollView滚动，必须取消autolayout） </code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
UIScrollView的代理（delegate）
<code class="hljs objectivec has-numbering">很多时候，我们想在<span class="hljs-built_in">UIScrollView</span>正在滚动 或 滚动到某个位置 或者 停止滚动 时做一些特定的操作 要想完成上述功能，前提条件就是能够监听到<span class="hljs-built_in">UIScrollView</span>的整个滚动过程 当<span class="hljs-built_in">UIScrollView</span>发生一系列的滚动操作时， 会自动通知它的代理（delegate）对象，给它的代理发送相应的消息，让代理得知它的滚动情况 也就是说，要想监听<span class="hljs-built_in">UIScrollView</span>的滚动过程，就必须先给 <span class="hljs-built_in">UIScrollView</span>将delegate需要实现的方法都定义在了<span class="hljs-built_in">UIScrollViewDelegate</span>协议中，因此要想成为<span class="hljs-built_in">UIScrollView</span>的delegate，必须遵守<span class="hljs-built_in">UIScrollViewDelegate</span>协议，然后实现协议中相应的方法，就可以监听<span class="hljs-built_in">UIScrollView</span>的滚动过程了 </code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>
UIScrollView和控制器
<code class="hljs objectivec has-numbering">一般情况下，就设置<span class="hljs-built_in">UIScrollView</span>所在的控制器 为 <span class="hljs-built_in">UIScrollView</span>的delegate 设置控制器为<span class="hljs-built_in">UIScrollView</span>的delegate有<span class="hljs-number">2</span>种方法： 通过代码（<span class="hljs-keyword">self</span>就是控制器） <span class="hljs-keyword">self</span><span class="hljs-variable">.scrollView</span><span class="hljs-variable">.delegate</span> = <span class="hljs-keyword">self</span>; </code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
通过storyboard拖线（右击UIScrollView）
UIScrollView的常见属性
<code class="hljs objectivec has-numbering"><span class="hljs-keyword">@property</span>(<span class="hljs-keyword">nonatomic</span>) <span class="hljs-built_in">CGPoint</span> contentOffset; <span class="hljs-comment">//这个属性用来表示UIScrollView滚动的位置</span> <span class="hljs-keyword">@property</span>(<span class="hljs-keyword">nonatomic</span>) <span class="hljs-built_in">CGSize</span> contentSize; <span class="hljs-comment">//这个属性用来表示UIScrollView内容的尺寸，滚动范围（能滚多远）</span> <span class="hljs-keyword">@property</span>(<span class="hljs-keyword">nonatomic</span>) <span class="hljs-built_in">UIEdgeInsets</span> contentInset; <span class="hljs-comment">//这个属性能够在UIScrollView的4周增加额外的滚动区域</span> <span class="hljs-keyword">@property</span>(<span class="hljs-keyword">nonatomic</span>) <span class="hljs-built_in">BOOL</span> bounces; <span class="hljs-comment">//设置UIScrollView是否需要弹簧效果</span> <span class="hljs-keyword">@property</span>(<span class="hljs-keyword">nonatomic</span>,getter=isScrollEnabled) <span class="hljs-built_in">BOOL</span> scrollEnabled; <span class="hljs-comment">//设置UIScrollView是否能滚动</span> <span class="hljs-keyword">@property</span>(<span class="hljs-keyword">nonatomic</span>) <span class="hljs-built_in">BOOL</span> showsHorizontalScrollIndicator; <span class="hljs-comment">//是否显示水平滚动条</span> <span class="hljs-keyword">@property</span>(<span class="hljs-keyword">nonatomic</span>) <span class="hljs-built_in">BOOL</span> showsVerticalScrollIndicator; <span class="hljs-comment">//是否显示垂直滚动条</span> </code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li></ul>
UIScrollView的常用代理方法
<code class="hljs objectivec has-numbering"> <span class="hljs-comment">// 用户开始拖拽时调用</span> - (<span class="hljs-keyword">void</span>)scrollViewWillBeginDragging:(<span class="hljs-built_in">UIScrollView</span> *)scrollView; <span class="hljs-comment">// 滚动到某个位置时调用</span> - (<span class="hljs-keyword">void</span>)scrollViewDidScroll:(<span class="hljs-built_in">UIScrollView</span> *)scrollView; <span class="hljs-comment">// 用户结束拖拽时调用</span> - (<span class="hljs-keyword">void</span>)scrollViewDidEndDragging:(<span class="hljs-built_in">UIScrollView</span> *)scrollView willDecelerate:(<span class="hljs-built_in">BOOL</span>)decelerate; </code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>
UIScrollView的缩放
当用户在UIScrollView身上使用捏合手势时，UIScrollView会给代理发送一条消息，询问代理究竟要缩放自己内部的哪一个子控件（哪一块内容）
1.实现UIScrollViewDelegate协议
<code class="hljs objectivec has-numbering"><span class="hljs-comment">// 用户使用捏合手势时调用</span> - (<span class="hljs-built_in">UIView</span> *)viewForZoomingInScrollView:(<span class="hljs-built_in">UIScrollView</span> *)scrollView; </code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
遵守协议，实现相应的方法
<code class="hljs objectivec has-numbering"><span class="hljs-keyword">id</span><<span class="hljs-built_in">UIScrollViewDelegate</span>> delegate </code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li></ul>
当用户在UIScrollView身上使用捏合手势时，UIScrollView会调用代理的viewForZoomingInScrollView:方法，这个方法返回的控件就是需要进行缩放的控件
缩放实现步骤
<code class="hljs objectivec has-numbering">设置<span class="hljs-built_in">UIScrollView</span>的<span class="hljs-keyword">id</span><UISCrollViewDelegate> delegate代理对象 设置minimumZoomScale ：缩小的最小比例 设置maximumZoomScale ：放大的最大比例 让代理对象实现下面的方法，返回需要缩放的视图控件 - (<span class="hljs-built_in">UIView</span> *)viewForZoomingInScrollView:(<span class="hljs-built_in">UIScrollView</span> *)scrollView; 跟缩放相关的其他代理方法 缩放完毕的时候调用 - (<span class="hljs-keyword">void</span>)scrollViewWillBeginZooming:(<span class="hljs-built_in">UIScrollView</span> *)scrollView withView:(<span class="hljs-built_in">UIView</span> *)view 正在缩放的时候调用 - (<span class="hljs-keyword">void</span>)scrollViewDidZoom:(<span class="hljs-built_in">UIScrollView</span> *)scrollView </code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li></ul>
UIScrollView和UIPageControl的分页
<code class="hljs objectivec has-numbering">只要将<span class="hljs-built_in">UIScrollView</span>的pageEnabled属性设置为<span class="hljs-literal">YES</span>，<span class="hljs-built_in">UIScrollView</span>会被分割成多个独立页面，里面的内容就能进行分页展示 一般会配合UIPageControl增强分页效果，UIPageControl常用属性如下 <span class="hljs-comment">//一共有多少页</span> <span class="hljs-keyword">@property</span>(<span class="hljs-keyword">nonatomic</span>) <span class="hljs-built_in">NSInteger</span> numberOfPages; <span class="hljs-comment">//当前显示的页码</span> <span class="hljs-keyword">@property</span>(<span class="hljs-keyword">nonatomic</span>) <span class="hljs-built_in">NSInteger</span> currentPage; <span class="hljs-comment">//只有一页时，是否需要隐藏页码指示器</span> <span class="hljs-keyword">@property</span>(<span class="hljs-keyword">nonatomic</span>) <span class="hljs-built_in">BOOL</span> hidesForSinglePage; <span class="hljs-comment">//其他页码指示器的颜色</span> <span class="hljs-keyword">@property</span>(<span class="hljs-keyword">nonatomic</span>,retain) <span class="hljs-built_in">UIColor</span> *pageIndicatorTintColor; <span class="hljs-comment">//当前页码指示器的颜色</span> <span class="hljs-keyword">@property</span>(<span class="hljs-keyword">nonatomic</span>,retain) <span class="hljs-built_in">UIColor</span> *currentPageIndicatorTintColor; </code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li></ul>
NSTimer的使用
NSTimer叫做“定时器”，它的作用如下
在指定的时间执行指定的任务
每隔一段时间执行指定的任务
<code class="hljs css has-numbering">调用下面的方法就会开启一个定时任务
+ (<span class="hljs-tag">NSTimer</span> *)<span class="hljs-tag">scheduledTimerWithTimeInterval</span><span class="hljs-pseudo">:(NSTimeInterval)ti</span> <span class="hljs-tag">target</span><span class="hljs-pseudo">:(id)aTarget</span>
<span class="hljs-tag">selector</span><span class="hljs-pseudo">:(SEL)aSelector</span>
<span class="hljs-tag">userInfo</span><span class="hljs-pseudo">:(id)userInfo</span>
<span class="hljs-tag">repeats</span><span class="hljs-pseudo">:(BOOL)yesOrNo</span>;</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
每隔ti秒，调用一次aTarget的aSelector方法，yesOrNo决定了是否重复执行这个任务
通过invalidate方法可以停止定时器的工作，一旦定时器被停止了，就不能再次执行任务。只能再创建一个新的定时器才能执行新的任务
<code class="hljs erlang has-numbering"><span class="hljs-pp">- <span class="hljs-params">(void)</span>invalidate;</span></code><ul style="display: block;" class="pre-numbering"><li>1</li></ul>
UIScrollView实例
<code class="hljs java has-numbering"><span class="hljs-javadoc">/**
*
1.成为代理的条件：
UIScrollView将delegate需要实现的方法都定义在了UIScrollViewDelegate协议中，
因此要想成为UIScrollView的delegate，必须遵守UIScrollViewDelegate协议，
然后实现协议中相应的方法，就可以监听UIScrollView的滚动过程了
2.设置UIScrollView的id<UISCrollViewDelegate> delegate代理对象
设置minimumZoomScale ：缩小的最小比例
设置maximumZoomScale ：放大的最大比例
让代理对象实现下面的方法，返回需要缩放的视图控件
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;
*/</span>
#<span class="hljs-keyword">import</span> <span class="hljs-string">"ViewController.h"</span>
<span class="hljs-annotation">@interface</span> ViewController () <UIScrollViewDelegate>
<span class="hljs-annotation">@property</span> (weak, nonatomic) IBOutlet UIScrollView *scrollView;
<span class="hljs-annotation">@property</span> (weak, nonatomic) IBOutlet UIImageView *minionView;
<span class="hljs-annotation">@end</span>
<span class="hljs-comment">//委托 代理模式</span>
<span class="hljs-annotation">@implementation</span> ViewController
- (<span class="hljs-keyword">void</span>)viewDidLoad {
[<span class="hljs-keyword">super</span> viewDidLoad];
<span class="hljs-comment">//设置内容尺寸</span>
self.scrollView.contentSize=self.minionView.frame.size;
<span class="hljs-comment">//设置</span>
self.scrollView.delegate=self;
<span class="hljs-comment">//设置最大和最小的缩放比例</span>
self.scrollView.maximumZoomScale=<span class="hljs-number">2.0</span>;
self.scrollView.minimumZoomScale=<span class="hljs-number">0.2</span>;
}
<span class="hljs-javadoc">/**
* 当用户开始拖拽scrollView时就会调用
*/</span>
- (<span class="hljs-keyword">void</span>)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
NSLog(@<span class="hljs-string">"开始拖拽...."</span>);
}
<span class="hljs-javadoc">/**
* 只要scrollView正在滚动,就会调用
*/</span>
- (<span class="hljs-keyword">void</span>)scrollViewDidScroll:(UIScrollView *)scrollView
{
NSLog(@<span class="hljs-string">"正在滚动------%@"</span>,NSStringFromCGPoint(scrollView.contentOffset));
}
<span class="hljs-javadoc">/**
* 当用户使用捏合手势时就会调用
* <span class="hljs-javadoctag"> @return</span> 返回的控件就是需要进行缩放的控件
*/</span>
- (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
NSLog(@<span class="hljs-string">"开始缩放-----"</span>);
<span class="hljs-keyword">return</span> self.minionView;
}
- (<span class="hljs-keyword">void</span>) scrollViewDidZoom:(UIScrollView *)scrollView
{
NSLog(@<span class="hljs-string">"正在缩放----"</span>);
}
</code>
扫一扫
16万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
