[转]IOS 学习笔记(8) 滚动视图(UIScrollView)的使用方法

下面介绍pageControl结合ScrollView实现连续滑动翻页的效果，ScrollView我们在应用开发中经常用到，以g这种翻页效果还是很好看的，如下图所示：



通过这个例子，我们重点学习UIScrollView。UIScrollView滚动的效果主要的原理是修改他的坐标，准确的讲是修改原点坐标，这一点我们在下面代码中自行体会。在动手创建工程之前，先了解以下几点：

UIScrollView学习要点

1. 注意只有UIScrollView，没有UIScrollViewController。

UiScrollView同许多控件一样有自己的delegate，但它不像UIView或TabelViewController有自带的ViewController。

一般实现方式是把包含scrollView的UIView对应的UIViewController实现UIScrollViewDelegate。如下图所示。

UIScrollViewDelegate包含了UIScrollView的生命周期方法，如 scrollViewDidScroll（滑动后），scrollViewWillBeginDragging（滑动开始），scrollViewDidEndDecelerating（滑动结束）等方法，用于监听页面拖拽。



2. 一次滑动，scrollView的scrollViewDidScroll会执行多次。

因此一般需要一个标识符来判断是否要执行scrollViewDidScroll中的自定义代码。

3. UIScrollView属性：参考/article/6129769.html

创建工程

1.同上一个例子中布局storyBoard，不同的是，使用UIScrollView而不是UIView。



2.设置TestViewController.h

如下图所示：

在接口声明中，参考UIScrollView学习要点1，继承UIScrollViewDelegate，后面在TestViewController.m中实现scrollViewDidScroll等方法。

参考要点2，声明私有属性：pageControlUsed标识符。

关联stroyboard中ScrollView和PageControl至代码中，如图所示。pageControl还要关联Action

声明一个Array的viewControllers属性，做为要显示的多个页面的载体。



3.实现要显示的页面

下面实现所显示的彩色页面。每次翻页时，会提前加载下一个页面，颜色和中间的label内容与page数相关，这是调用自定义的initWithPageNumber方法生成。

这个不是理解重点。不做解说。

3.1创建一个file继承自UIViewController，同时勾选伴随生成xib选项。



3.2将这个xib按下以设置，size:Freeform(这样才可以改变大小)，status Bar：none(隐藏状态条)，设置尺寸width:320,height:400.



3.3设置MyPageViewController.h

添加私有属性pageNumber,关联PageLabel,声明initWithPageNumber方法。



3.4MyPageViewController.m文件内容如下：

4.翻页实现

4.1设置一个静态变量KNumberOfPages，这是总页数引入MyPageViewController.h声明@synthesize



4.2在TestViewController.m的viewDidLoad方法做UIScrollView和PageControl的初始化。
scrollView的初始化中，scrollView.contentSize是它的拖动范围。因为要翻7页，所以最后UIScrollView的宽度将变为7个屏幕宽。另外高度与要显示的页面一样高(MyPageViewController.xib的高度设置为400)，如果scrollView的高度>400，最后出来的效果是上下可以拖动。

pageControl的初始化中， pageControl.numberOfPages=KNumberOfPages//出现7个点pageControl.currentPage=0;//默认高亮在第0个点



loadScrollViewWithPage方法实现如下，如果页面已经被加载过，不会重复生成。



4.3UIScrollViewDelegate的生命周期及scrollViewDidScroll的多次加载

在ScrollView的初始化中，设置了scrollView.delegate=self。且TestViewController.h中继承了UIScrollerViewDelegate。在TestViewController.m实现了scrollViewDidScroll（滑动后），scrollViewWillBeginDragging（滑动开始），scrollViewDidEndDecelerating（滑动结束）方法，用于监听页面拖拽。

scrollViewDidScroll在两种动作下会被触发，点击pageControl的点、或左右滑动scrollView区域。

1.左右滑动scrollView区域：只触发scrollViewDidScroll方法

2.点击pageControl的点：触发changePage方法，同时触发scrollViewDidScroll方法。changePage和scrollViewDidScroll中完成的是同样的事情。区别是scrollViewDidScroll中的page需要通过计算得出。

因此在changePage中会把pageControlUsed=YES，这样在scrollViewDidScroll中就会直接返回。而在滑动开始和结束时将pageControlUsed重置为NO.

另外scrollViewDidScroll会执行多次（可能是滑动操作是持续的，这个过程中一直触发scroll方法）。是在这个过程中完成第二个page的加载的，我们通过计算通过pageControl.currentPage是否等于计算出的page，来确定pageControlUsed=YES的时间点。





首先引用别人分析一篇不错的文章，同时也感谢这位朋友的分享：http://www.cocoachina.com/iphonedev/sdk/2010/1224/2503.html

在滚动过程当中，其实是在修改原点坐标。当手指触摸后, scroll view会暂时拦截触摸事件,使用一个计时器。假如在计时器到点后没有发生手指移动事件，那么 scroll view 发送 tracking events 到被点击的 subview。假如在计时器到点前发生了移动事件，那么 scroll view 取消 tracking 自己发生滚动。

子类可以重载

touchesShouldBegin:withEvent:inContentView: 决定自己是否接收 touch 事件
pagingEnabled：当值是 YES 会自动滚动到 subview 的边界，默认是NO
touchesShouldCancelInContentView: 开始发送 tracking messages 消息给 subview 的时候调用这个方法，决定是否发送 tracking messages 消息到subview。假如返回 NO，发送。YES 则不发送。
假如 canCancelContentTouches属性是NO，则不调用这个方法来影响如何处理滚动手势。

scroll view 还处理缩放和平移手势，要实现缩放和平移，必须实现委托 viewForZoomingInScrollView:、scrollViewDidEndZooming:withView:atScale:
两个方法。另外 maximumZoomScale和minimumZoomScale 两个属性要不一样。

几个属性介绍

tracking
当 touch 后还没有拖动的时候值是YES，否则NO

zoomBouncing
当内容放大到最大或者最小的时候值是 YES，否则 NO

zooming
当正在缩放的时候值是 YES，否则 NO

decelerating
当滚动后，手指放开但是还在继续滚动中。这个时候是 YES，其它时候是 NO

decelerationRate
设置手指放开后的减速率

maximumZoomScale
一个浮点数，表示能放最大的倍数

minimumZoomScale
一个浮点数，表示能缩最小的倍数

pagingEnabled
当值是 YES 会自动滚动到 subview 的边界。默认是NO

scrollEnabled
决定是否可以滚动

delaysContentTouches
是个布尔值，当值是 YES 的时候，用户触碰开始，scroll view要延迟一会，看看是否用户有意图滚动。假如滚动了，那么捕捉 touch-down 事件，否则就不捕捉。假如值是NO，当用户触碰， scroll view 会立即触发 touchesShouldBegin:withEvent:inContentView:，默认是 YES

canCancelContentTouches
当值是 YES 的时候，用户触碰后，然后在一定时间内没有移动，scrollView 发送 tracking events，然后用户移动手指足够长度触发滚动事件，这个时候，scrollView 发送了 touchesCancelled:withEvent: 到 subview，然后 scroView 开始滚动。假如值是 NO，scrollView 发送 tracking events 后，就算用户移动手指，scrollView 也不会滚动。

contentSize
里面内容的大小，也就是可以滚动的大小，默认是0，没有滚动效果。

showsHorizontalScrollIndicator
滚动时是否显示水平滚动条

showsVerticalScrollIndicator
滚动时是否显示垂直滚动条

bounces
默认是 yes，就是滚动超过边界会反弹有反弹回来的效果。假如是 NO，那么滚动到达边界会立刻停止。

bouncesZoom
和 bounces 类似,区别在于：这个效果反映在缩放上面，假如缩放超过最大缩放，那么会反弹效果；假如是 NO，则到达最大或者最小的时候立即停止。

directionalLockEnabled
默认是 NO，可以在垂直和水平方向同时运动。当值是 YES 时，假如一开始是垂直或者是水平运动，那么接下来会锁定另外一个方向的滚动。 假如一开始是对角方向滚动，则不会禁止某个方向

indicatorStyle
滚动条的样式，基本只是设置颜色。总共3个颜色：默认、黑、白

scrollIndicatorInsets
设置滚动条的位置

最后加上，我刚定的一个例子，可以缩放，及对使用的代理方法加了注释

// ScrollViewViewController.m

// ScrollView

//

// Created by ch_soft on 11-11-8.

// Copyright 2011年 __MyCompanyName__. All rights reserved.

//

#import"ScrollViewViewController.h"

#import"CustomA.h"

#import"CustomB.h"

@implementation ScrollViewViewController

- (void)didReceiveMemoryWarning

{

// Releases the view if it doesn't have a superview.

[superdidReceiveMemoryWarning];

// Release any cached data, images, etc that aren't in use.

}

#pragma mark - View lifecycle

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.

- (void)viewDidLoad

{

scrollview =[[UIScrollViewalloc]initWithFrame:CGRectMake(50,0,200,400)];

scrollview.contentSize=CGSizeMake(400,400);

scrollview.backgroundColor=[UIColororangeColor];

scrollview.pagingEnabled=YES;//是否自己动适应

viewA=[[CustomAalloc]initWithFrame:CGRectMake(50,0,100,400)];

viewA.backgroundColor=[UIColorblueColor];

[scrollviewaddSubview:viewA];

[viewArelease];

CustomB * viewB=[[CustomB alloc] initWithFrame:CGRectMake(250,0,100,400)];

viewB.backgroundColor=[UIColoryellowColor];

[scrollviewaddSubview:viewB];

[viewB release];

[self.viewaddSubview:scrollview];

scrollview.maximumZoomScale=2.0;

scrollview.minimumZoomScale=0.5;

// scrollview.decelerationRate=1;

scrollview.delegate=self;

//canCancelContentTouches:YES-移动手指足够长度触发滚动事件,NO-scrollView发送 tracking events 后，就算用户移动手指，scrollView也不会滚动。

scrollview.canCancelContentTouches=NO;

//当值是 YES的时候，用户触碰开始.要延迟一会，看看是否用户有意图滚动。假如滚动了，那么捕捉 touch-down事件，否则就不捕捉。假如值是NO，当用户触碰， scroll view会立即触发

scrollview.delaysContentTouches=YES;

[scrollviewrelease];

[superviewDidLoad];

}

#pragma mark UIScrollViewDelegate

//只要滚动了就会触发

- (void)scrollViewDidScroll:(UIScrollView *)scrollView;

{

// NSLog(@" scrollViewDidScroll");

NSLog(@"ContentOffset x is %f,yis %f",scrollView.contentOffset.x,scrollView.contentOffset.y);

}

//开始拖拽视图

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;

{

NSLog(@"scrollViewWillBeginDragging");

}

//完成拖拽

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;

{

NSLog(@"scrollViewDidEndDragging");

}

//将开始降速时

- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView;

{

NSLog(@"scrollViewWillBeginDecelerating");

}

//减速停止了时执行，手触摸时执行执行

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;

{

NSLog(@"scrollViewDidEndDecelerating");

}

//滚动动画停止时执行,代码改变时出发,也就是setContentOffset改变时

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView;

{

NSLog(@"scrollViewDidEndScrollingAnimation");

}

//设置放大缩小的视图，要是uiscrollview的subview

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;

{

NSLog(@"viewForZoomingInScrollView");

return viewA;

}

//完成放大缩小时调用

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale;

{

viewA.frame=CGRectMake(50,0,100,400);

NSLog(@"scale between minimum and maximum. called after any 'bounce' animations");

}// scale between minimum and maximum. called after any 'bounce' animations

//如果你不是完全滚动到滚轴视图的顶部，你可以轻点状态栏，那个可视的滚轴视图会一直滚动到顶部，那是默认行为，你可以通过该方法返回NO来关闭它

- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView;

{

NSLog(@"scrollViewShouldScrollToTop");

returnYES;

}

- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView;

{

NSLog(@"scrollViewDidScrollToTop");

}

- (void)viewDidUnload

{

[super viewDidUnload];

// Release any retained subviews of the main view.

// e.g. self.myOutlet = nil;

}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation

{

// Return YES for supported orientations

return (interfaceOrientation == UIInterfaceOrientationPortrait);

}

@end