UIScrollView 滚动视图 （实例） - Just Code - ITeye技术网站
博客分类：
UIScrollView 类负责所有基于 UIKit 的滚动操作。
CGRect bounds = [ [ UIScreen mainScreen ] applicationFrame ] ;
UIScrollView* scrollView = [ [UIScrollView alloc ] initWithFrame:bounds ];
UIScrollView *scrollView
=[[UIScrollView alloc] initWithFrame:CGRectMake(0.0, 0.0,self.view.frame.size.width, 400)];
当你创建完滚动视图后，你可以将另一个视图的内容粘合到滚动视图的空白页上。这回创建一个滚动的内容窗口：
[ scrollView addSubview:myView];
你必须给出内容的实际大小，这样滚动视图才知道滚动的范围：
scrollView.contentSize = myView.frame.
要开启缩放功能需要调整视图的两个属性，分别是maxinumZoomScale 和 mininumZoomScale 。这样就可以允许用户使用捏合手势调整内容大小：
scrollView.maxinumZoomScale = 2.0;//允许放大2倍
scrollView.mininumZoomScale = 0.5;//允许放大到0.5倍
要打开缩放功能，你还需要增加一个UIScrollViewDelegate 代理，通过一个名为viewForZoomingScrollView 的方法做出响应。这个方法会返回进行缩放时所使用的 UIView 对象：
scrollView.delegate =
- (UIView*)viewForZoomingInScrollView:(UIScrollView*)scrollView{
retutn myV
Tips:对于大规模数据，你可能会在最初使用一个低于实际大小(1.0)的缩放比例，让用户可以平滑地进行放大。
scrollView.pagingEnabled = YES;
scrollView.backgroundColor = [UIColor blueColor];
scrollView.showsVerticalScrollIndicator = NO;
scrollView。showsHorizontalScrollIndicator = NO;
scrollView.delegate =
CGSize newSize = CGSizeMake(self.view.frame.size.width * 2, self.view.frame.size.height);
[scrollView setContentSize:newSize];
[self.view addSubview: scrollView];
除了上面用到的缩放属性外，滚动视图还有会让你多其他属性，可以对现实内容的行为进行微调。你可以对 UIScrollView 类进行多方位定制。下面这些属性是最常用的。
1.indicatorStyle
指定你希望使用的滚动条指示器的类型。默认行为是在白边界上绘制黑色的滚动条，这在大多数背景下都适用。可用风格如下：
UIScrollViewIndicatorStyleDefault
UIScrollViewIndicatorStyleBlack
UIScrollViewIndicatorStyleWhite
2.contentOffset
一个CGPoint结构，其中包含有要显示内容相对于窗口左上角的偏移量。默认是从0×0开始的，但是你也可以将显示内容放在其他位置。
3.directionalLockEnabled
默认行为是允许用户同时进行横向和纵向的滚动。将这个属性设置为YES会导致将用户的滚动行为锁定成只允许横向或纵向进行，具体方向由初始姿态决定。
当用户抵达滚动区域边缘时，这个功能允许用户稍微拖动到边界外一点。当用户松开手指后，这个区域会像个橡皮筋一样，弹回到原位，给用户一个可见的提示，表示他已经到达了文档开始或结束位置。如果不想让用户的滚动范围能够超出可见内容，可以将这个属性设置为NO。
5.bouncesZoom
类似于bounces 选项，这个方法可以令用户的缩放操作超出最大或最小缩放级别，然后弹回到范围以内。如果你不想让用户能够超出你指定的范围进行缩放，将这个属性设置为NO。
6.pagingEnabled （参考：）
当开启了分页功能时，滚动视图被分割成多个独立区段，二用户的滚动体验则变成了页面翻转，你可以用这个属性来进行页面翻转。
UIPageControl有一个userInteractionEnabled你可以设置它为NO。就是点击的时候它不调用任何方法。然后设置它的currentPage 为0，并把它加到view上去。
接下来在UIScrollView的delegate方法：
- (void)scrollViewDidScroll:(UIScrollView *)scrollV
在这里你可以写上关于UIPageControl的页面设置的算法。如下
int index = fabs(scrollView.contentOffset.x) /scrollView.frame.size.
pageControl.currentPage =
三、委托方法
可以赋予滚动视图一个委托，下列委托方法会在特定时刻收到通知。
-(void)scrollViewDidScroll:(UIScrollView*)scrollV//会在视图滚动时收到通知。包括一个指向被滚动视图的指针，从中可以读取contentOffset属性以确定其滚动到的位置。
-(void)scrollViewWillBeginDragging:(UISCrollView*)scrollV//当用户首次在某个方向上进行拖动时得到通知。这个方法会得到被作为参数传递的滚动视图指针，也同样可以从中读取 contentOffset 属性。
-(void)scrollViewDidEndDragging:(UIScrollView*)scrollView willDecelerate:(BOOL)
//当用户抬起拖动到手指时得到通知。还会得到一个布尔值，知名报告滚动视图最后位置之前，是否需要减速。
-(void)scrollViewWillBeginDecelerate:(UIScrollView*)scrollV//当用户抬起手指而视图需要继续移动时，会收到通知。这个方法可以用来读取 contentOffset属性，从而判断出当用户抬起手指钱最后一次滚动到的位置，虽然这个位置并不会使滚动条的最终停止位置。
-(void)scrollViewDidEndDecelerating:(UIScrollView*)scrollV//当上面提到的减速完毕、滚动视图停止时得到通知。收到这个通知的时刻，滚动视图的contentOffset属性会反映出滚动条最终停止的位置。
-(void)scrollViewDidEndZooming:(UIScrollview*)scrollView withView:(UIView*)view atScale:(float)//当用户对内容进行缩放时，会收到通知。缩放比例表示为一个浮点值，会作为参数传递进来。
-(BOOL)scrollViewShouldScrollToTop:(UIScrollView*)scrollV
-(void)scrollViewDidScrollToTop:(UIScrollView*)scrollV
//当用户点出iPhone状态条时，滚动视图委托可以决定视图是否滚动回到开头。
OK，都总结完了，后面会写一个页面翻转的例子敬请关注。
viewcontroller.h
#import &UIKit/UIKit.h&
@interface ViewController : UIViewController
__weak IBOutlet UIScrollView *
viewcontroller.m
- (void)viewDidLoad
[scroller setScrollEnabled:YES];
[scroller setContentSize:CGSizeMake(320, 1600)];
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
- (void)viewDidUnload
scroller =
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet =
拖拽scrollview视图到Fist Responder.
1. XIB文件的理解
通过IB设计的CnView和EnView分别对应一个XIB文件，在CnView的XIB文件中，主要采用XML格式描述了Button和Label控件的属性（这里不考虑View本身的背景等属性），有个Button和Label，以及Button和Label的位置、大小等。EnView的XIB文件类似。
2. ViewController
每个View对应有个视图控制器（多个View可以采用同一个视图控制器，后边再说），可以看做MVC中的C（尽管严格意义上不是），比如：CnView界面点击按钮之后的响应动作是由ViewController来实现的。
3. XIB和ViewController之间的关系
XIB是表现，ViewController一方面响应XIB上的操作（比如点击、滑动等），同时也控制XIB的显示。
4. File's Owner
重点就是这里了，View和ViewController之间的对应关系，需要一个桥梁来进行连接的（即，对于一个视图，他如何知道自己的界面的操作应该由谁来响应），这个桥梁就是File's Owner。
选中某个XIB的File's Owner，在Inspector中可以看到属性：File Name和Custom Class，该File's Owner就是用来绑定File Name中的xib文件和Custom Class中的ViewController的，在做了这个绑定之后，按住control键，拖动File's Owner到xib中的某个控件的时候，就是Custom Class中定义的IBOutlet元素与xib中元素进行连接的过程，同样，拖动"xib中的控件的动作"到File's Owner的时候，就是将xib中该动作的响应与Custom Class中某个IBAction进行连接的过程。
因此，在存在多个xib文件的情况下，即：有多个View，那么每个View可以采用不同的ViewController，也可以全部采用相同的一个ViewController，通过File's Owner进行关联即可。
其实，File's Owner就是Custom Class类型的对象，而xib中的其他元素都是该对象的成员变量，但是需要手动来关联Custom Class中的成员变量与xib中对象之间的关系。
5. First Responder
View中每次只会有一个对象与用户进行交互，那么当前交互的对象即为First Responder。比如点击文本框，那么此时文本框就是First Responder
6. IB中的File's Owner是一个对象，拥有界面元素的拷贝
一个是IBOutlet ：指界面元素在代码中的’代号‘
一个是IBAction：指界面元素产生事件在代码中的触发函数
浏览 20020
浏览: 4632202 次
来自: 洛杉矶
echo 中文时在 cmd 下乱码，求解。
zjggle 写道图片还加密 ，你还是中国人么，连个马赛克都不 ...
nicai11w 写道如果轮询时间是27s，那一扫瞄就立即登录 ...
如果轮询时间是27s，那一扫瞄就立即登录了，是怎么做到的？2834人阅读
这是实现图片缩放和居中显示的Demo:
程序参考自：.cn/s/blog_9c3c519b0100za22.html
要实现图片的缩放和居中，我们需要用到UIScrollView来控制图片的缩放和居中显示(通过设置maximumZoomScale和minimumZoomScale两个属性来规定图片的最大最小比例，接着在scrollViewDidZoom函数中设置图片的居中显示)。
以下是一些重要的做法：
1、新建一个Empty Application工程testMoveScaleImage，记得打上Use Automatic Reference Counting 这个钩。
2、新建一个UIViewController，命名为MoveScaleImage。
在MoveScaleImage.h文件中，加入以下代码
@interface MoveScaleImage : UIViewController&UIScrollViewDelegate&
& & UIScrollView *myScrollV
& & UIImageView* myImageV
@property(retain,nonatomic)UIScrollView* myScrollV
@property(retain,nonatomic)UIImageView* myImageV
在MoveScaleImage.h中，在开头部分加入
@synthesize myScrollV
@synthesize myImageV
接着在loadView函数中，我们要手动编程加入一个按钮，点击这个按钮将会触发按钮事件，该事件将会初始化在.h文件中定义的UIScrollView实例，并将其加入到self.view的子view中，该事件还会将ImageView加入到UIScrollView实例中，以此来响应图片的缩放和居中显示。具体如下：
loadView函数：
-(void)loadView{
& & [super loadView];
& & self.view.backgroundColor = [UIColor lightGrayColor];
& & // & &UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
& & UIButton *btn = [[UIButton alloc]initWithFrame:CGRectMake(110, 200, 100, 50)];
& & // & &[btn setFrame:CGRectMake(110, 200, 100, 40)];
& & [btn setBackgroundColor:[UIColor whiteColor]];
& & [btn setTitle:@&点击查看图片& forState:UIControlStateNormal];
& & [btn.titleLabel setFont:[UIFont systemFontOfSize:13]];
& & [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
& & [btn addTarget:self action:@selector(clickEvent:) forControlEvents:UIControlEventTouchUpInside];
& & [self.view addSubview:btn];
触发的按钮事件：
-(void)clickEvent:(id)sender{
& & NSLog(@&***********clickeventad&);
& & myScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
& & if(self.myScrollView==nil)
& & & & UIScrollView *scrollView=[[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
& & & & self.myScrollView=scrollV
& & self.myScrollView.backgroundColor=[UIColor blueColor];
& & self.myScrollView.delegate=
& & self.myScrollView.multipleTouchEnabled=YES; //是否支持多点触控
& & self.myScrollView.minimumZoomScale=1.0; &//表示与原图片最小的比例
& & self.myScrollView.maximumZoomScale=10.0; //表示与原图片最大的比例
& & [self.view addSubview:self.myScrollView];
& & UIImage *_image = [UIImage imageNamed:@&QQ.png&];
& & CGFloat imageView_X = (_image.size.width & self.view.frame.size.width) ? self.view.frame.size.width : _image.size.
& & CGFloat imageView_Y=(_image.size.height & self.view.frame.size.height) ? self.view.frame.size.height : _image.size.
& & //保持图片的比例
& & if(_image.size.width & self.view.frame.size.width){
& & & & origin = self.view.frame.size.width/_image.size.
& & & & imageView_Y = _image.size.height*
& & myImageView = [[UIImageView alloc]initWithFrame:CGRectMake((self.view.frame.size.width-imageView_X)/2, (self.view.frame.size.height-imageView_Y)/2, imageView_X, imageView_Y)];
& & if(self.myImageView==nil)
& & & & UIImageView *imageView=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
& & & & self.myImageView=imageV
& & UIImage *originImage=[[UIImage alloc]initWithCGImage:_image.CGImage];
& & [myImageView setImage:originImage];
& & // & &[myImageView setFrame:CGRectMake(0, 0, _image.size.width, _image.size.height)];
& & [self.myScrollView addSubview:self.myImageView];
& & //返回按钮
& & UIButton *closeBtn = [[UIButton alloc]initWithFrame:CGRectMake(10, 10, 50, 50)];
& & [closeBtn setBackgroundColor:[UIColor redColor]];
& & [closeBtn setTitle:@&返回& forState:UIControlStateNormal];
& & [closeBtn setAlpha:0.5];
& & [closeBtn addTarget:self action:@selector(closeEvent:) forControlEvents:UIControlEventTouchUpInside];
& & [self.view addSubview:closeBtn];
//按下该按钮将隐藏myImageView和myScrollView
-(void)closeEvent:(id)sender{
& & [self.myImageView setHidden:YES];
& & [self.myScrollView setHidden:YES];
接下来是实现居中的函数：
//实现图片在缩放过程中居中
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
& & CGFloat offsetX = (scrollView.bounds.size.width & scrollView.contentSize.width)?(scrollView.bounds.size.width - scrollView.contentSize.width)/2 : 0.0;
& & CGFloat offsetY = (scrollView.bounds.size.height & scrollView.contentSize.height)?(scrollView.bounds.size.height - scrollView.contentSize.height)/2 : 0.0;
& & self.myImageView.center = CGPointMake(scrollView.contentSize.width/2 + offsetX,scrollView.contentSize.height/2 + offsetY);
//返回缩放的是哪个ImageView
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
& & NSLog(@&**************viewForZoomingInScrollView&);
& & return self.myImageV
以上就是MoveScaleImage的实现部分。
最后记得在AppDelegate.m头部加入:
#import &MoveScaleImage.h&
然后将didFinishLaunchingWithOptions的代码替换为:
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
& & // Override point for customization after application launch.
& & MoveScaleImage* moveScaleImage=[[MoveScaleImage alloc] init];
& & self.window.rootViewController=moveScaleI //记得加这行代码，否则会出错
& & [self.window addSubview:moveScaleImage.view];
& & self.window.backgroundColor = [UIColor whiteColor];
& & [self.window makeKeyAndVisible];
& & return YES;
版权声明：本文为博主原创文章，未经博主允许不得转载。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：44417次
排名：千里之外
原创：30篇
评论：15条
(1)(4)(1)(3)(1)(11)(12)(1)3491人阅读
// 触摸屏幕来滚动画面还是其他的方法使得画面滚动，皆触发该函数
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
&& &NSLog(@&Scrolling...&);
// 触摸屏幕并拖拽画面，再松开，最后停止时，触发该函数
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
&& &NSLog(@&scrollViewDidEndDragging& -& End of Scrolling.&);
// 滚动停止时，触发该函数
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
&& &NSLog(@&scrollViewDidEndDecelerating& -&& End of Scrolling.&);
// 调用以下函数，来自动滚动到想要的位置，此过程中设置有动画效果，停止时，触发该函数
//&UIScrollView的setContentOffset:animated:&
//&UIScrollView的scrollRectToVisible:animated:
// UITableView的scrollToRowAtIndexPath:atScrollPosition:animated:
// UITableView的selectRowAtIndexPath:animated:scrollPosition:
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView {
&& &NSLog(@&scrollViewDidEndScrollingAnimation& -&& End of Scrolling.&);
首先实现UIScrollViewDelegate：
实现协议的下列方法:
对myscrollview进行初始化：
属性总结：
&& && && && && && && && &&作用
contentOffSet&&监控目前滚动的位置
contentSize& && &滚动范围的大小
UIEdgeInsets
contentInset&&视图在scrollView中的位置
id&UIScrollerViewDelegate&
delegate&&设置协议
directionalLockEnabled 指定是否只能在一个方向上滚动
bounces& && && && && && && & 控制控件遇到边框是否反弹
alwaysBounceVertical& &控制垂直方向遇到边框是否反弹
alwaysBounceHorizontal 控制水平方向遇到边框是否反弹
pagingEnabled& && && && & 控制控件是否整页翻动
scrollEnabled& && && && && &控制控件是否能滚动
showsHorizontalScrollIndicator 控制是否显示水平方向的滚动条
showsVerticalScrollIndicator 控制是否显示垂直方向的滚动条
UIEdgeInsets
scrollIndicatorInsets 指定滚动条在scrollerView中的位置
UIScrollViewIndicatorStyleindicatorStyle
设定滚动条的样式
decelerationRate& && && && && && &改变scrollerView的减速点位置
tracking& && && && && && && && && & 监控当前目标是否正在被跟踪
dragging& && && && && && && && && &监控当前目标是否正在被拖拽
decelerating& && && && && && && &&&监控当前目标是否正在减速
delaysContentTouches& && && &控制视图是否延时调用开始滚动的方法
canCancelContentTouches& & 控制控件是否接触取消touch的事件
minimumZoomScale& && && && & 缩小的最小比例
maximumZoomScale& && && && &放大的最大比例
zoomScale& && && && && && && && && &设置变化比例
bouncesZoom& && && && && && && &控制缩放的时候是否会反弹
zooming& && && && && && && && && &&&判断控件的大小是否正在改变
zoomBouncing& && && && && && && &判断是否正在进行缩放反弹
scrollsToTop& && && && && && && && &控制控件滚动到顶部
1、使scrollview不要上下滑动，可以设置
scrollview.contentSize
=&&CGSizeMake(你要的长度, 0);
协议方法解释：
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：275386次
积分：3351
积分：3351
排名：第4986名
原创：35篇
转载：239篇
评论：18条
(1)(9)(1)(8)(21)(15)(6)(3)(2)(10)(5)(6)(6)(3)(3)(6)(3)(6)(16)(7)(12)(5)(1)(1)(3)(3)(6)(5)(1)(1)(11)(4)(5)(2)(5)(3)(11)(10)(4)(1)(10)(19)(6)(1)(2)(1)(2)(1)UIScrollView 实践经验
招聘信息：
UIScrollView（包括它的子类 UITableView 和 UICollectionView）是 iOS 开发中最常用也是最有意思的 UI 组件，大部分 App 的核心界面都是基于三者之一或三者的组合实现。UIScrollView 是 UIKit 中为数不多能响应滑动手势的 view，相比自己用 UIPanGestureRecognizer 实现一些基于滑动手势的效果，用 UIScrollView 的优势在于 bounce 和 decelerate 等特性可以让 App 的用户体验与 iOS 系统的用户体验保持一致。本文通过一些实例讲解 UIScrollView 的特性和实际使用中的经验。UIScrollView 和 Auto LayoutiPhone 5 刚出来的时候，大部分不支持横屏的 App 都不需要做太多的适配工作，因为屏幕宽度没有变，table view 多个 cell 也不需要加 code。但是在 iPhone 6 和 iPhone 6 Plus 发布以后，多分辨率适配终于不再是 Android 开发的专利了。于是，从 iOS 6 起就存在的 Auto Layout 终于有了用武之地。关于 Auto Layout 的基本用法不再赘述，可以参考 （）。但 UIScrollView 在 Auto Layout 是一个很特殊的 view，对于 UIScrollView 的 subview 来说，它的 leading/trailing/top/bottom space 是相对于 UIScrollView 的 contentSize 而不是 bounds 来确定的，所以当你尝试用 UIScrollView 和它 subview 的 leading/trailing/top/bottom 来互相决定大小的时候，就会出现「Has ambiguous scrollable content width/height」的 warning。正确的姿势是用 UIScrollView 外部的 view 或 UIScrollView 本身的 width/height 确定 subview 的尺寸，进而确定 contentSize。因为 UIScrollView 本身的 leading/trailing/top/bottom 变得不好用，所以我习惯的做法是在 UIScrollView 和它原来的 subviews 之间增加一个 content view，这样做的好处有：不会在 storyboard 里留下 error/warning为 subview 提供 leading/trailing/top/bottom，方便 subview 的布局通过调整 content view 的 size（可以是 constraint 的 IBOutlet）来调整 contentSize不需要 hard code 与屏幕尺寸相关的代码更好地支持 rotationSample 中的
演示了 UIScrollView + Auto Layout 的例子。UIScrollViewDelegateUIScrollViewDelegate 是 UIScrollView 的 delegate protocol，UIScrollView 有意思的功能都是通过它的 delegate 方法实现的。了解这些方法被触发的条件及调用的顺序对于使用 UIScrollView 是很有必要的，本文主要讲拖动相关的效果，所以 zoom 相关的方法跳过不提，拖动相关的 delegate 方法按调用顺序分别是：-&(void)scrollViewDidScroll:(UIScrollView&*)scrollView这个方法在任何方式触发 contentOffset 变化的时候都会被调用（包括用户拖动，减速过程，直接通过代码设置等），可以用于监控 contentOffset 的变化，并根据当前的 contentOffset 对其他 view 做出随动调整。-&(void)scrollViewWillBeginDragging:(UIScrollView&*)scrollView用户开始拖动 scroll view 的时候被调用。-&(void)scrollViewWillEndDragging:(UIScrollView&*)scrollView&withVelocity:(CGPoint)velocity&targetContentOffset:(inout&CGPoint&*)targetContentOffset该方法从 iOS 5 引入，在 didEndDragging 前被调用，当 willEndDragging 方法中 velocity 为 CGPointZero（结束拖动时两个方向都没有速度）时，didEndDragging 中的 decelerate 为 NO，即没有减速过程，willBeginDecelerating 和 didEndDecelerating 也就不会被调用。反之，当 velocity 不为 CGPointZero 时，scroll view 会以 velocity 为初速度，减速直到 targetContentOffset。值得注意的是，这里的 targetContentOffset 是个指针，没错，你可以改变减速运动的目的地，这在一些效果的实现时十分有用，实例章节中会具体提到它的用法，并和其他实现方式作比较。-&(void)scrollViewDidEndDragging:(UIScrollView&*)scrollView&willDecelerate:(BOOL)decelerate在用户结束拖动后被调用，decelerate 为 YES 时，结束拖动后会有减速过程。注，在 didEndDragging 之后，如果有减速过程，scroll view 的 dragging 并不会立即置为 NO，而是要等到减速结束之后，所以这个 dragging 属性的实际语义更接近 scrolling。-&(void)scrollViewWillBeginDecelerating:(UIScrollView&*)scrollView减速动画开始前被调用。-&(void)scrollViewDidEndDecelerating:(UIScrollView&*)scrollView减速动画结束时被调用，这里有一种特殊情况：当一次减速动画尚未结束的时候再次 drag scroll view，didEndDecelerating 不会被调用，并且这时 scroll view 的 dragging 和 decelerating 属性都是 YES。新的 dragging 如果有加速度，那么 willBeginDecelerating 会再一次被调用，然后才是 didEndDecelerating；如果没有加速度，虽然 willBeginDecelerating 不会被调用，但前一次留下的 didEndDecelerating 会被调用，所以连续快速滚动一个 scroll view 时，delegate 方法被调用的顺序（不含 didScroll）可能是这样的：scrollViewWillBeginDragging:&&
scrollViewWillEndDragging:&withVelocity:&targetContentOffset:&&
scrollViewDidEndDragging:&willDecelerate:&&
scrollViewWillBeginDecelerating:&&
scrollViewWillBeginDragging:&&
scrollViewWillEndDragging:&withVelocity:&targetContentOffset:&&
scrollViewDidEndDragging:&willDecelerate:&&
scrollViewWillBeginDecelerating:&&
scrollViewWillBeginDragging:&&
scrollViewWillEndDragging:&withVelocity:&targetContentOffset:&&
scrollViewDidEndDragging:&willDecelerate:&&
scrollViewWillBeginDecelerating:&&
scrollViewDidEndDecelerating:虽然很少有因为这个导致的 bug，但是你需要知道这种很常见的用户操作会导致的中间状态。例如你尝试在 UITableViewDataSource 的 tableView:cellForRowAtIndexPath: 方法中基于 tableView 的 dragging 和 decelerating 属性判断是在用户拖拽还是减速过程中的话可能会误判（见例 1）。Sample 中的
简单输出了一些 Log，你可以快速了解这些方法的调用顺序。实例下面通过一些实例，更详细地演示和描述以上各 delegate 方法的用途。1. Table View 中图片加载逻辑的优化虽然这种优化方式在现在的机能和网络环境下可能看似不那么必要，但在我最初看到这个方法是的 09 年（印象中是 Tweetie 作者在 08 年写的 Blog，可能有误），遥想 iPhone 3G/3GS 的机能，这个方法为多图的 table view 的性能带来很大的提升，也成了我的秘密武器。而现在，在移动网络环境下，你依然值得这么做来为用户节省流量。先说一下原文的思路：当用户手动 drag table view 的时候，会加载 cell 中的图片；在用户快速滑动的减速过程中，不加载过程中 cell 中的图片（但文字信息还是会被加载，只是减少减速过程中的网络开销和图片加载的开销）；在减速结束后，加载所有可见 cell 的图片（如果需要的话）；问题 1：前面提到，刚开始拖动的时候，dragging 为 YES，decelerating 为 NO；decelerate 过程中，dragging 和 decelerating 都为 YES；decelerate 未结束时开始下一次拖动，dragging 和 decelerating 依然都为 YES。所以无法简单通过 table view 的 dragging 和 decelerating 判断是在用户拖动还是减速过程。解决这个问题很简单，添加一个变量如 userDragging，在 willBeginDragging 中设为 YES，didEndDragging 中设为 NO。那么 tableView: cellForRowAtIndexPath: 方法中，是否 load 图片的逻辑就是：if&(!self.userDragging&&&&tableView.decelerating)&{&&
&&&&cell.imageView.image&=&
&&&&//&code&for&loading&image&from&network&or&disk
}问题 2：这么做的话，decelerate 结束后，屏幕上的 cell 都是不带图片的，解决这个问题也不难，你需要一个形如 loadImageForVisibleCells 的方法，加载可见 cell 的图片：-&(void)loadImageForVisibleCells
&&&&NSArray&*cells&=&[self.tableView&visibleCells];
&&&&for&(GLImageCell&*cell&in&cells)&{
&&&&&&&&NSIndexPath&*indexPath&=&[self.tableView&indexPathForCell:cell];
&&&&&&&&[self&setupCell:cell&withIndexPath:indexPath];
}问题 3：这个问题可能不容易被发现，在减速过程中如果用户开始新的拖动，当前屏幕的 cell 并不会被加载（前文提到的调用顺序问题导致），而且问题 1 的方案并不能解决问题 3，因为这些 cell 已经在屏上，不会再次经过 cellForRowAtIndexPath 方法。虽然不容易发现，但解决很简单，只需要在 scrollViewWillBeginDragging: 方法里也调用一次 loadImageForVisibleCells 即可。再优化上述方法在那个年代的确提升了 table view 的 performance，但是你会发现在减速过程最后最慢的那零点几秒时间，其实还是会让人等得有些心急，尤其如果你的 App 只有图片没有文字。在 iOS 5 引入了 scrollViewWillEndDragging: withVelocity: targetContentOffset: 方法后，配合 SDWebImage，我尝试再优化了一下这个方法以提升用户体验：如果内存中有图片的缓存，减速过程中也会加载该图片如果图片属于 targetContentOffset 能看到的 cell，正常加载，这样一来，快速滚动的最后一屏出来的的过程中，用户就能看到目标区域的图片逐渐加载你可以尝试用类似 fade in 或者 flip 的效果缓解生硬的突然出现（尤其是像本例这样只有图片的 App）核心代码：-&(void)scrollViewWillBeginDragging:(UIScrollView&*)scrollView
&&&&self.targetRect&=&
&&&&[self&loadImageForVisibleCells];
-&(void)scrollViewWillEndDragging:(UIScrollView&*)scrollView&withVelocity:(CGPoint)velocity&targetContentOffset:(inout&CGPoint&*)targetContentOffset
&&&&CGRect&targetRect&=&CGRectMake(targetContentOffset->x,&targetContentOffset->y,&scrollView.frame.size.width,&scrollView.frame.size.height);
&&&&self.targetRect&=&[NSValue&valueWithCGRect:targetRect];
-&(void)scrollViewDidEndDecelerating:(UIScrollView&*)scrollView
&&&&self.targetRect&=&
&&&&[self&loadImageForVisibleCells];
}是否需要加载图片的逻辑：BOOL&shouldLoadImage&=&YES;&&
if&(self.targetRect&&&&!CGRectIntersectsRect([self.targetRect&CGRectValue],&cellFrame))&{&&
&&&&SDImageCache&*cache&=&[manager&imageCache];
&&&&NSString&*key&=&[manager&cacheKeyForURL:targetURL];
&&&&if&(![cache&imageFromMemoryCacheForKey:key])&{
&&&&&&&&shouldLoadImage&=&NO;
if&(shouldLoadImage)&{&&
&&&&//&load&image
}更值得高兴的是，通过判断是否 nil，targetRect 同时起到了原来 userDragging 的作用。本例完整的代码见 Sample 中的 LazyLoad2. 分页的几种实现方式利用 UIScrollView 有多种方法实现分页，但是各自的效果和用途不尽相同，其中方法 2 和方法 3 的区别也正是一些同类 App 在模仿 Glow 的首页 Bubble 翻转效果时跟 Glow 体验上的的差距所在（但愿他们不会看到本文并且调整他们的实现方式）。本例通过三种方法实现相似的一个场景，你可以通过安装到手机上来感受三种实现方式的不同用户体验。为了区分每个例子的重点，本例没有重用机制，重用相关内容见例 3。2.1 pagingEnabled这是系统提供的分页方式，最简单，但是有一些局限性：只能以 frame size 为单位翻页，减速动画阻尼大，减速过程不超过一页需要一些 hacking 实现 bleeding 和 padding（即页与页之间有 padding，在当前页可以看到前后页的部分内容）Sample 中
有简单实现 bleeding 和 padding 效果的代码，主要的思路是：让 scroll view 的宽度为 page 宽度 + padding，并且设置 clipsToBounds 为 NO这样虽然能看到前后页的内容，但是无法响应 touch，所以需要另一个覆盖期望的可触摸区域的 view 来实现类似 touch bridging 的功能适用场景：上述局限性同时也是这种实现方式的优点，比如一般 App 的引导页（教程），Calendar 里的月视图，都可以用这种方法实现。2.2 Snap这种方法就是在 didEndDragging 且无减速动画，或在减速动画完成时，snap 到一个整数页。核心算法是通过当前 contentOffset 计算最近的整数页及其对应的 contentOffset，通过动画 snap 到该页。这个方法实现的效果都有个通病，就是最后的 snap 会在 decelerate 结束以后才发生，总感觉很突兀。2.3 修改 targetContentOffset通过修改 scrollViewWillEndDragging: withVelocity: targetContentOffset: 方法中的 targetContentOffset 直接修改目标 offset 为整数页位置。其中核心代码：-&(CGPoint)nearestTargetOffsetForOffset:(CGPoint)offset
&&&&CGFloat&pageSize&=&BUBBLE_DIAMETER&+&BUBBLE_PADDING;
&&&&NSInteger&page&=&roundf(offset.x&/&pageSize);
&&&&CGFloat&targetX&=&pageSize&*&
&&&&return&CGPointMake(targetX,&offset.y);
-&(void)scrollViewWillEndDragging:(UIScrollView&*)scrollView&withVelocity:(CGPoint)velocity&targetContentOffset:(inout&CGPoint&*)targetContentOffset
&&&&CGPoint&targetOffset&=&[self&nearestTargetOffsetForOffset:*targetContentOffset];
&&&&targetContentOffset->x&=&targetOffset.x;
&&&&targetContentOffset->y&=&targetOffset.y;
}适用场景：方法 2 和 方法 3 的原理近似，效果也相近，适用场景也基本相同，但方法 3 的体验会好很多，snap 到整数页的过程很自然，或者说用户完全感知不到 snap 过程的存在。这两种方法的减速过程流畅，适用于一屏有多页，但需要按整数页滑动的场景；也适用于如图表中自动 snap 到整数天的场景；还适用于每页大小不同的情况下 snap 到整数页的场景（不做举例，自行发挥，其实只需要修改计算目标 offset 的方法）。完整代码参见 3. 重用大部分的 iOS 开发应该都清楚 UITableView 的 cell 重用机制，这种重用机制减少了内存开销也提高了 performance，UIScrollView 作为 UITableView 的父类，在很多场景中也很适合应用重用机制（其实不只是 UIScrollView，任何场景中会反复出现的元素都应该适当地引入重用机制）。你可以参照 UITableView 的 cell 重用机制，总结重用机制如下：维护一个重用队列当元素离开可见范围时，removeFromSuperview 并加入重用队列（enqueue）当需要加入新的元素时，先尝试从重用队列获取可重用元素（dequeue）并且从重用队列移除如果队列为空，新建元素这些一般都在 scrollViewDidScroll: 方法中完成实际使用中，需要注意的点是：当重用对象为 view controller 时，记得 addChildeViewController当 view 或 view controller 被重用但其对应 model 发生变化的时候，需要及时清理重用前留下的内容数据可以适当做缓存，在重用的时候尝试从缓存中读取数据甚至之前的状态（如 table view 的 contentOffset），以得到更好的用户体验当 on screen 的元素数量可确定的时候，有时候可以提前 init 这些元素，不会在 scroll 过程中遇到因为 init 开销带来的卡顿（尤其是以 view controller 为重用对象的时候）例 2 中的场景很适合以 view 为重用单位，本例新增一个以 view controller 为重用对象的例子，该例子同时演示了联动效果，具体见下个例子。完整代码参见 4. 联动/视差滚动上一个例子里 main scroll view 和 title view 里的 scroll view 就是一个联动的例子，所谓联动，就是当 A 滚动的时候，在 scrollViewDidScroll: 里根据 A 的 contentOffset 动态计算 B 的 contentOffset 并设给 B。同样对于非 scroll view 的 C，也可以动态计算 C 的 frame 或是 transform（Glow 的气泡为例）实现视差滚动或者其他高级动画，这在现在许多应用的引导页面里会被用到。联动/视差滚动部分原理上其实比较简单，不再赘述，写了个简单的例子 。写在最后不知不觉就写了很多关于 UIScrollView 的内容，其实还有很多可写，由于时间关系只好停笔。在我看来，UIScrollView 就好像提供了一个跳脱二维空间束缚的途径，如果你有足够的想象力，它能帮你实现更丰富的跳出平面束缚的用户体验。本来还准备写一个综合性的例子，但是由于时间关系还没完成，后面有时间会继续更新。此外，例子中可能会有错误或可以改进的地方，欢迎在
直接提 Issue 或 PR。
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
点击量9276点击量8032点击量7203点击量7091点击量7038点击量6922点击量6480点击量5903点击量5877
关注微信 每日推荐
扫一扫 浏览移动版
&2015 Chukong Technologies,Inc.
京公网安备89