UIScrollView 技巧（2）
Zooming 缩放
为了实现一个scrollview可以缩放其内容，你可以设置scroll view的minimumZoomScale 和 maximumZoomScale属性让至少一个不为1（默认就是1）。你还需要在scroll view的委托中实现 viewForZoomingInScrollView: 方法来指定哪个是可缩放的scrollview 子视图。这个scrollview然后就会对它的子视图应用一个缩放转换。至于缩放多少是由scrollview的 zoomScale决定的。通常情况下我们需要scrollview的所有子视图都可以缩放，所以我们一般把所有的子视图放在一个content view中，再把这个content view添加到scrollview上。
v.tag = 999;
sv.minimumZoomScale = 1.0;
sv.maximumZoomScale = 2.0;
sv.delegate = self;
v是sv（scrollview）的一个子视图，这个子视图就是将要可以缩放的视图
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return [scrollView viewWithTag:999];
}
这样，用户就可以通过手势缩放scrollview的内容了。为了让用户缩放到临界值时不能再缩放了（默认是可以缩放超过临界值一点，当用户松开手时，scrollview会弹回临界值），我们可以设置bouncesZoom为NO。
为了让用户缩放scrollview内容时仍然可以使用scrollRectToVisible:animated:方法来滚动到指定的区域，scrollview默认会根据当前的zoomScale属性来设置它的contentSize属性。
当minimumZoomScale小于1，如果scrollview的内容缩放得比scrollview还小，那么这个缩放的视图会固定在scrollview的左上角。如果你不喜欢这样，可以通过子类化UIScrollView，重写它的layoutSubviews方法，或者通过scrollview的委托实现 scrollViewDidZoom:方法。下面是WWDC 2010视频上的一段代码演示，让缩放视图比scrollview小时，固定在scrollview的中间：
- (void)layoutSubviews {
[super layoutSubviews];
UIView* v = [self.delegate viewForZoomingInScrollView:self];
CGFloat svw = self.bounds.size.width;
CGFloat svh = self.bounds.size.height;
CGFloat vw = v.frame.size.width;
CGFloat vh = v.frame.size.height;
CGRect f = v.frame;
if (vw < svw)
f.origin.x = (svw - vw) / 2.0;
else
f.origin.x = 0;
if (vh < svh)
f.origin.y = (svh - vh) / 2.0;
else
f.origin.y = 0;
v.frame = f;
}
用代码进行缩放
-
setZoomScale:animated:
contentOffset属性会自动适应，让当前的缩放内容始终在scrollview的中心，同时让内容全屏显示在scrollview上。
-
zoomToRect:animated:
同上。
下面我们通过一个双击（UITapGestureRecognizer），让scrollview缩放到最大值，原始值，最小值：
- (void) tapped: (UIGestureRecognizer*) tap {
UIView* v = tap.view;
UIScrollView* sv = (UIScrollView*)v.superview;
if (sv.zoomScale < 1) {
[sv setZoomScale:1 animated:YES];
CGPoint pt =
CGPointMake((v.bounds.size.width - sv.bounds.size.width)/2.0,0);
[sv setContentOffset:pt animated:NO];
}
else if (sv.zoomScale < sv.maximumZoomScale)
[sv setZoomScale:sv.maximumZoomScale animated:YES];
else
[sv setZoomScale:sv.minimumZoomScale animated:YES];
}
缩放时，让内容更清晰
默认情况下，当一个scrollview缩放时，它仅仅是对这个缩放视图提供一个缩放转换。这个缩放视图的绘制内容是之前它的图层缓存的内容，所以当我们缩放这个视图时，原来像素的图片相当于绘制得更大，意味着内容会不清晰。
一个解决方法是使用CATiledLayer提供的功能，CATiledLayer不仅仅提供滚动，还提供缩放。我们需要用到它的另外两个属性：
-
levelsOfDetail
假如这个数值是2，意味着我们又两种显示级别，可以是2x或者1x大小
-
levelsOfDetailBias
有多少个显示级别是大于1x的。例如，levelsOfDetail为2，如果我们希望当放大时，大小为2x，缩小时，大小为1x，那么这个值就是1。默认是0，就是说大小从 0.5x 到 1x变化。
下面是一个小例子，scrollview 的contentview绘制了30个字：
- (void)loadView {
UIScrollView* sv = [[UIScrollView alloc] initWithFrame:
[[UIScreen mainScreen] applicationFrame]];
self.view = sv;
CGRect f = CGRectMake(0, 0, self.view.bounds.size.width,
self.view.bounds.size.height * 2);
TiledView* content = [[TiledView alloc] initWithFrame:f];
content.tag = 999;
CATiledLayer* lay = (CATiledLayer*)content.layer;
lay.tileSize = f.size;
lay.levelsOfDetail = 2;
lay.levelsOfDetailBias = 1;
[self.view addSubview:content];
[sv setContentSize: f.size];
sv.minimumZoomScale = 1.0;
sv.maximumZoomScale = 2.0;
sv.delegate = self;
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return [scrollView viewWithTag:999];
}
下面是TiledView的代码：
+ (Class) layerClass {
return [CATiledLayer class];
}
-(void)drawRect:(CGRect)r {
[[UIColor whiteColor] set];
UIRectFill(self.bounds);
[[UIColor blackColor] set];
UIFont* f = [UIFont fontWithName:@"Helvetica" size:18];
// height consists of 31 spacers with 30 texts between them
CGFloat viewh = self.bounds.size.height;
CGFloat spacerh = 10;
CGFloat texth = (viewh - (31*spacerh))/30.0;
CGFloat y = spacerh;
for (int i = 0; i < 30; i++) {
NSString* s = [NSString stringWithFormat:@"This is label %d", i];
[s drawAtPoint:CGPointMake(10,y) withFont:f];
y += texth + spacerh;
}
// uncomment the following to see the tiling
/*
UIBezierPath* bp = [UIBezierPath bezierPathWithRect:r];
[[UIColor redColor] setStroke];
[bp stroke];
*/
}
如果不使用CATiledLayer，我们可以使用另一种方法，但是这个方法不能乱用，过度用。就是在scrollview 的委托中实现下面的方法：
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView
withView:(UIView *)view
atScale:(float)scale {
view.contentScaleFactor = scale * [UIScreen mainScreen].scale;
}
如果这个zoomScale，屏幕分辨率，还有这个缩放视图的大小很大，你将需要一个非常大的图形上下文在内存中，可能会导致你的app内存用完。
UIScrollView 的触摸
假如我们有一个很大的地图图片，比屏幕大，我们希望用户滚动这个地图来查看，同时还可以拖动一个标记到一个新的位置，下面是一个小例子：
UIScrollView* sv = [UIScrollView new];
self.sv = sv;
[self.view addSubview:sv];
sv.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[sv]|"
options:0 metrics:nil views:@{@"sv":sv}]];
[self.view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[sv]|"
options:0 metrics:nil views:@{@"sv":sv}]];
UIImageView* imv = [[UIImageView alloc] initWithImage: [UIImage imageNamed:@"map.jpg"]];
[sv addSubview:imv];
imv.translatesAutoresizingMaskIntoConstraints = NO;
// constraints here mean "content view is the size of the map image view"
[self.view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[imv]|"
options:0 metrics:nil views:@{@"imv":imv}]];
[self.view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[imv]|"
options:0 metrics:nil views:@{@"imv":imv}]];
UIImageView* flag = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"redflag.png"]];
[sv addSubview: flag];
UIPanGestureRecognizer* pan = [[UIPanGestureRecognizer alloc] initWithTarget:self
action:@selector(dragging:)];
[flag addGestureRecognizer:pan];
flag.userInteractionEnabled = YES;
下面的拖动手势识别，当拖动到边缘的时候，scrollview还可以自动移动来适应新的位置，也就是用户可以在整副图片上拖动标记：
- (void) dragging: (UIPanGestureRecognizer*) p {
UIView* v = p.view;
if (p.state == UIGestureRecognizerStateBegan ||
p.state == UIGestureRecognizerStateChanged) {
CGPoint delta = [p translationInView: v.superview];
CGPoint c = v.center;
c.x += delta.x; c.y += delta.y;
v.center = c;
[p setTranslation: CGPointZero inView: v.superview];
}
// autoscroll
if (p.state == UIGestureRecognizerStateChanged) {
CGPoint loc = [p locationInView:self.view.superview];
CGRect f = self.view.frame;
UIScrollView* sv = self.sv;
CGPoint off = sv.contentOffset;
CGSize sz = sv.contentSize;
CGPoint c = v.center;
// to the right
if (loc.x > CGRectGetMaxX(f) - 30) {
CGFloat margin = sz.width - CGRectGetMaxX(sv.bounds);
if (margin > 6) {
off.x += 5;
sv.contentOffset = off;
c.x += 5;
v.center = c;
[self keepDragging:p];
}
}
// to the left
if (loc.x < f.origin.x + 30) {
CGFloat margin = off.x;
if (margin > 6) {
// ... omitted ...
}
}
// to the bottom
if (loc.y > CGRectGetMaxY(f) - 30) {
CGFloat margin = sz.height - CGRectGetMaxY(sv.bounds);
if (margin > 6) {
// ... omitted ...
}
}
// to the top
if (loc.y < f.origin.y + 30) {
CGFloat margin = off.y;
if (margin > 6) {
// ... omitted ...
}
}
}
}
- (void) keepDragging: (UIPanGestureRecognizer*) p {
float delay = 0.1;
dispatch_time_t popTime =
dispatch_time(DISPATCH_TIME_NOW, delay * NSEC_PER_SEC);
dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
[self dragging: p];
});
}
下面的例子是，我想在初始化的时候，标记是在屏幕外面的，当用户向右轻扫时才让这个标记从屏幕外以动画形式移动回界面里，但是这个向右滑动的手势会被scrollview内置的手势识别，我们自定义的手势无法识别，怎么办？没关系，我们添加一个手势识别检测依赖：
UISwipeGestureRecognizer* swipe =
[[UISwipeGestureRecognizer alloc]
initWithTarget:self action:@selector(swiped:)];
[sv addGestureRecognizer:swipe];
[sv.panGestureRecognizer requireGestureRecognizerToFail:swipe];
只有在我们自定义的手势识别结束后才开始识别内部的手势：
- (void) swiped: (UISwipeGestureRecognizer*) g {
if (g.state == UIGestureRecognizerStateEnded ||
g.state == UIGestureRecognizerStateCancelled) {
UIImageView* flag =
[[UIImageView alloc] initWithImage:
[UIImage imageNamed:@"redflag.png"]];
UIPanGestureRecognizer* pan = [[UIPanGestureRecognizer alloc]
initWithTarget:self
action:@selector(dragging:)];
[flag addGestureRecognizer:pan];
flag.userInteractionEnabled = YES;
UIScrollView* sv = self.sv;
CGPoint p = sv.contentOffset;
CGRect f = flag.frame;
f.origin = p;
f.origin.x -= flag.bounds.size.width;
flag.frame = f;
[sv addSubview: flag];
// thanks for the flag, now stop operating altogether
g.enabled = NO;
[UIView animateWithDuration:0.25 animations:^{
CGRect f = flag.frame;
f.origin.x = p.x;
flag.frame = f;
}];
}
}
UIScrollView 性能优化
-
能不透明的内容，尽量不透明。
-
如果你需要绘制一个阴影，不要让系统为这个图层计算阴影的路径现状，你可以设置shadowPath，或者使用Core Graphics 来创建一个阴影来绘制。同样的，避免让视图图层的阴影与其它图层的透明度叠加在一起；例如，如果图层背景是白色的，不透明地绘制时本身会就在这个白色背景上绘制了阴影。
-
不要让绘制系统为你拉伸你的图片，你应该为当前的屏幕分辨率提供合适大小的图片。
-
在紧要关头，你可以设置图层的shouldRasterize属性为YES，来消除渲染操作的海量样本。你可以在滚动时设置这个shouldRasterize属性为YES，当滚动结束时又恢复成NO。
苹果官方也说，可以设置一个视图的clearsContextBeforeDrawing属性为NO，这样可能造成一点不同，但是具体没有验证会有什么不同或者是优化。
