iOS 专用图层 五

6.6 CAScrollLayer

对于一个未转换的图层，它的bounds和它的frame是一样的，frame属性是由bounds属性自动计算而出的，所以更改任意一个值都会更新其他值。

但是如果你只想显示一个大图层里面的一小部分呢。比如说，你可能有一个很大的图片，你希望用户能够随意滑动，或者是一个数据或文本的长列表。在一个典型的iOS应用中，你可能会用到UITableView或是UIScrollView，但是对于独立的图层来说，什么会等价于刚刚提到的UITableView和UIScrollView呢？

在第二章中，我们探索了图层的contentsRect属性的用法，它的确是能够解决在图层中小地方显示大图片的解决方法。但是如果你的图层包含子图层那它就不是一个非常好的解决方案，因为，这样做的话每次你想『滑动』可视区域的时候，你就需要手工重新计算并更新所有的子图层位置。

这个时候就需要CAScrollLayer了。CAScrollLayer有一个-scrollToPoint:方法，它自动适应bounds的原点以便图层内容出现在滑动的地方。注意，这就是它做的所有事情。前面提到过，Core Animation并不处理用户输入，所以CAScrollLayer并不负责将触摸事件转换为滑动事件，既不渲染滚动条，也不实现任何iOS指定行为例如滑动反弹（当视图滑动超多了它的边界的将会反弹回正确的地方）。

让我们来用CAScrollLayer来常见一个基本的UIScrollView替代品。我们将会用CAScrollLayer作为视图的宿主图层，并创建一个自定义的UIView，然后用UIPanGestureRecognizer实现触摸事件响应。这段代码见清单6.10. 图6.11是运行效果：ScrollView显示了一个大于它的frame的UIImageView。

清单6.10 用CAScrollLayer实现滑动视图

#import "ScrollView.h"

#import  @implementation ScrollView

+ (Class)layerClass

{

    return [CAScrollLayer class];

}


- (void)setUp

{

    //enable clipping

    self.layer.masksToBounds = YES;


    //attach pan gesture recognizer

    UIPanGestureRecognizer *recognizer = nil;

    recognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];

    [self addGestureRecognizer:recognizer];

}


- (id)initWithFrame:(CGRect)frame

{

    //this is called when view is created in code

    if ((self = [super initWithFrame:frame])) {

        [self setUp];

    }

    return self;

}


- (void)awakeFromNib {

    //this is called when view is created from a nib

    [self setUp];

}


- (void)pan:(UIPanGestureRecognizer *)recognizer

{

    //get the offset by subtracting the pan gesture

    //translation from the current bounds origin

    CGPoint offset = self.bounds.origin;

    offset.x -= [recognizer translationInView:self].x;

    offset.y -= [recognizer translationInView:self].y;


    //scroll the layer

    [(CAScrollLayer *)self.layer scrollToPoint:offset];


    //reset the pan gesture translation

    [recognizer setTranslation:CGPointZero inView:self];

}

@end

图6.11 用UIScrollView创建一个凑合的滑动视图

不同于UIScrollView，我们定制的滑动视图类并没有实现任何形式的边界检查（bounds checking）。图层内容极有可能滑出视图的边界并无限滑下去。CAScrollLayer并没有等同于UIScrollView中contentSize的属性，所以当CAScrollLayer滑动的时候完全没有一个全局的可滑动区域的概念，也无法自适应它的边界原点至你指定的值。它之所以不能自适应边界大小是因为它不需要，内容完全可以超过边界。

那你一定会奇怪用CAScrollLayer的意义到底何在，因为你可以简单地用一个普通的CALayer然后手动适应边界原点啊。真相其实并不复杂，UIScrollView并没有用CAScrollLayer，事实上，就是简单的通过直接操作图层边界来实现滑动。

CAScrollLayer有一个潜在的有用特性。如果你查看CAScrollLayer的头文件，你就会注意到有一个扩展分类实现了一些方法和属性：

- (void)scrollPoint:(CGPoint)p;

- (void)scrollRectToVisible:(CGRect)r;

@property(readonly) CGRect visibleRect;

看到这些方法和属性名，你也许会以为这些方法给每个CALayer实例增加了滑动功能。但是事实上他们只是放置在CAScrollLayer中的图层的实用方法。scrollPoint:方法从图层树中查找并找到第一个可用的CAScrollLayer，然后滑动它使得指定点成为可视的。scrollRectToVisible:方法实现了同样的事情只不过是作用在一个矩形上的。visibleRect属性决定图层（如果存在的话）的哪部分是当前的可视区域。如果你自己实现这些方法就会相对容易明白一点，但是CAScrollLayer帮你省了这些麻烦，所以当涉及到实现图层滑动的时候就可以用上了。

6.7 CATiledLayer

有些时候你可能需要绘制一个很大的图片，常见的例子就是一个高像素的照片或者是地球表面的详细地图。iOS应用通畅运行在内存受限的设备上，所以读取整个图片到内存中是不明智的。载入大图可能会相当地慢，那些对你看上去比较方便的做法（在主线程调用UIImage的-imageNamed:方法或者-imageWithContentsOfFile:方法）将会阻塞你的用户界面，至少会引起动画卡顿现象。

能高效绘制在iOS上的图片也有一个大小限制。所有显示在屏幕上的图片最终都会被转化为OpenGL纹理，同时OpenGL有一个最大的纹理尺寸（通常是2048*2048，或4096*4096，这个取决于设备型号）。如果你想在单个纹理中显示一个比这大的图，即便图片已经存在于内存中了，你仍然会遇到很大的性能问题，因为Core Animation强制用CPU处理图片而不是更快的GPU（见第12章『速度的曲调』，和第13章『高效绘图』，它更加详细地解释了软件绘制和硬件绘制）。

CATiledLayer为载入大图造成的性能问题提供了一个解决方案：将大图分解成小片然后将他们单独按需载入。让我们用实验来证明一下。

小片裁剪

这个示例中，我们将会从一个2048*2048分辨率的雪人图片入手。为了能够从CATiledLayer中获益，我们需要把这个图片裁切成许多小一些的图片。你可以通过代码来完成这件事情，但是如果你在运行时读入整个图片并裁切，那CATiledLayer这些所有的性能优点就损失殆尽了。理想情况下来说，最好能够逐个步骤来实现。

清单6.11 演示了一个简单的Mac OS命令行程序，它用CATiledLayer将一个图片裁剪成小图并存储到不同的文件中。

清单6.11 裁剪图片成小图的终端程序

#import 


int main(int argc, const char * argv[])

{

    @autoreleasepool{

        //handle incorrect arguments

        if (argc < 2) {

            NSLog(@"TileCutter arguments: inputfile");

            return 0;

        }


        //input file

        NSString *inputFile = [NSString stringWithCString:argv[1] encoding:NSUTF8StringEncoding];


        //tile size

        CGFloat tileSize = 256; //output path

        NSString *outputPath = [inputFile stringByDeletingPathExtension];


        //load image

        NSImage *image = [[NSImage alloc] initWithContentsOfFile:inputFile];

        NSSize size = [image size];

        NSArray *representations = [image representations];

        if ([representations count]){

            NSBitmapImageRep *representation = representations[0];

            size.width = [representation pixelsWide];

            size.height = [representation pixelsHigh];

        }

        NSRect rect = NSMakeRect(0.0, 0.0, size.width, size.height);

        CGImageRef imageRef = [image CGImageForProposedRect:&rect context:NULL hints:nil];


        //calculate rows and columns

        NSInteger rows = ceil(size.height / tileSize);

        NSInteger cols = ceil(size.width / tileSize);


        //generate tiles

        for (int y = 0; y < rows; ++y) {

            for (int x = 0; x < cols; ++x) {

            //extract tile image

            CGRect tileRect = CGRectMake(x*tileSize, y*tileSize, tileSize, tileSize);

            CGImageRef tileImage = CGImageCreateWithImageInRect(imageRef, tileRect);


            //convert to jpeg data

            NSBitmapImageRep *imageRep = [[NSBitmapImageRep alloc] initWithCGImage:tileImage];

            NSData *data = [imageRep representationUsingType: NSJPEGFileType properties:nil];

            CGImageRelease(tileImage);


            //save file

            NSString *path = [outputPath stringByAppendingFormat: @"_i_i.jpg", x, y];

            [data writeToFile:path atomically:NO];

            }

        }

    }

    return 0;

}

这个程序将2048*2048分辨率的雪人图案裁剪成了64个不同的256*256的小图。（256*256是CATiledLayer的默认小图大小，默认大小可以通过tileSize属性更改）。程序接受一个图片路径作为命令行的第一个参数。我们可以在编译的scheme将路径参数硬编码然后就可以在Xcode中运行了，但是以后作用在另一个图片上就不方便了。所以，我们编译了这个程序并把它保存到敏感的地方，然后从终端调用，如下面所示：

> path/to/TileCutterApp path/to/Snowman.jpg

The app is very basic, but could easily be extended to support additional arguments such as tile size, or to export images in formats other than JPEG. The result of running it is a sequence of 64 new images, named as follows:

这个程序相当基础，但是能够轻易地扩展支持额外的参数比如小图大小，或者导出格式等等。运行结果是64个新图的序列，如下面命名：

Snowman_00_00.jpg

Snowman_00_01.jpg

Snowman_00_02.jpg

...

Snowman_07_07.jpg

既然我们有了裁切后的小图，我们就要让iOS程序用到他们。CATiledLayer很好地和UIScrollView集成在一起。除了设置图层和滑动视图边界以适配整个图片大小，我们真正要做的就是实现-drawLayer:inContext:方法，当需要载入新的小图时，CATiledLayer就会调用到这个方法。

清单6.12演示了代码。图6.12是代码运行结果。

清单6.12 一个简单的滚动CATiledLayer实现

#import "ViewController.h"

#import 


@interface ViewController ()


@property (nonatomic, weak) IBOutlet UIScrollView *scrollView;


@end


@implementation ViewController


- (void)viewDidLoad

{

    [super viewDidLoad];

    //add the tiled layer

    CATiledLayer *tileLayer = [CATiledLayer layer];

    tileLayer.frame = CGRectMake(0, 0, 2048, 2048);

    tileLayer.delegate = self; [self.scrollView.layer addSublayer:tileLayer];


    //configure the scroll view

    self.scrollView.contentSize = tileLayer.frame.size;


    //draw layer

    [tileLayer setNeedsDisplay];

}


- (void)drawLayer:(CATiledLayer *)layer inContext:(CGContextRef)ctx

{

    //determine tile coordinate

    CGRect bounds = CGContextGetClipBoundingBox(ctx);

    NSInteger x = floor(bounds.origin.x / layer.tileSize.width);

    NSInteger y = floor(bounds.origin.y / layer.tileSize.height);


    //load tile image

    NSString *imageName = [NSString stringWithFormat: @"Snowman_i_i", x, y];

    NSString *imagePath = [[NSBundle mainBundle] pathForResource:imageName ofType:@"jpg"];

    UIImage *tileImage = [UIImage imageWithContentsOfFile:imagePath];


    //draw tile

    UIGraphicsPushContext(ctx);

    [tileImage drawInRect:bounds];

    UIGraphicsPopContext();

}

@end

图6.12 用UIScrollView滚动CATiledLayer

当你滑动这个图片，你会发现当CATiledLayer载入小图的时候，他们会淡入到界面中。这是CATiledLayer的默认行为。（你可能已经在iOS 6之前的苹果地图程序中见过这个效果）你可以用fadeDuration属性改变淡入时长或直接禁用掉。CATiledLayer（不同于大部分的UIKit和Core Animation方法）支持多线程绘制，-drawLayer:inContext:方法可以在多个线程中同时地并发调用，所以请小心谨慎地确保你在这个方法中实现的绘制代码是线程安全的。

Retina小图

你也许已经注意到了这些小图并不是以Retina的分辨率显示的。为了以屏幕的原生分辨率来渲染CATiledLayer，我们需要设置图层的contentsScale来匹配UIScreen的scale属性：

tileLayer.contentsScale = [UIScreen mainScreen].scale;

有趣的是，tileSize是以像素为单位，而不是点，所以增大了contentsScale就自动有了默认的小图尺寸（现在它是128*128的点而不是256*256）.所以，我们不需要手工更新小图的尺寸或是在Retina分辨率下指定一个不同的小图。我们需要做的是适应小图渲染代码以对应安排scale的变化，然而：

//determine tile coordinate

CGRect bounds = CGContextGetClipBoundingBox(ctx);

CGFloat scale = [UIScreen mainScreen].scale;

NSInteger x = floor(bounds.origin.x / layer.tileSize.width * scale);

NSInteger y = floor(bounds.origin.y / layer.tileSize.height * scale);

通过这个方法纠正scale也意味着我们的雪人图将以一半的大小渲染在Retina设备上（总尺寸是1024*1024，而不是2048*2048）。这个通常都不会影响到用CATiledLayer正常显示的图片类型（比如照片和地图，他们在设计上就是要支持放大缩小，能够在不同的缩放条件下显示），但是也需要在心里明白。