CA*Layer（CAShapeLayer－－CATextLayer）

CAShapeLayer

CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。你指定诸如颜色和线宽等属性，用CGPath来定义想要绘制的图 形，最后CAShapeLayer就自动渲染出来了。当然，你也可以用Core Graphics直接向原始的CALyer的内容中绘制一个路径，相比直下，使用CAShapeLayer有以下一些优点：

• 渲染快速。CAShapeLayer使用了硬件加速，绘制同一图形会比用Core Graphics快很多。

• 高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形，所以无论有多大，都不会占用太多的内存。

• 不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉（如我们在第二章所见）。

• 不会出现像素化。当你给CAShapeLayer做3D变换时，它不像一个有寄宿图的普通图层一样变得像素化。

(1).用CAShapeLayer绘制一个火柴人:

#import "DrawingView.h"

#import @interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *containerView;

@end

@implementation ViewController

- (void)viewDidLoad

{

  [super viewDidLoad];

  //create path

  UIBezierPath *path = [[UIBezierPath alloc] init];

  [path moveToPoint:CGPointMake(175, 100)];

  ?

  [path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:2*M_PI clockwise:YES];

  [path moveToPoint:CGPointMake(150, 125)];

  [path addLineToPoint:CGPointMake(150, 175)];

  [path addLineToPoint:CGPointMake(125, 225)];

  [path moveToPoint:CGPointMake(150, 175)];

  [path addLineToPoint:CGPointMake(175, 225)];

  [path moveToPoint:CGPointMake(100, 150)];

  [path addLineToPoint:CGPointMake(200, 150)];

  //create shape layer

  CAShapeLayer *shapeLayer = [CAShapeLayer layer];

  shapeLayer.strokeColor = [UIColor redColor].CGColor;

  shapeLayer.fillColor = [UIColor clearColor].CGColor;

  shapeLayer.lineWidth = 5;

  shapeLayer.lineJoin = kCALineJoinRound;

  shapeLayer.lineCap = kCALineCapRound;

  shapeLayer.path = path.CGPath;

  //add it to our view

  [self.containerView.layer addSublayer:shapeLayer];

}

@end

(2).我们创建圆角举行其实就是人工绘制单独的直线和弧度，但是事实上UIBezierPath有自动绘制圆角矩形的构造方法，下面这段代码绘制了一个有三个圆角一个直角的矩形：

//define path parameters

CGRect rect = CGRectMake(50, 50, 100, 100);

CGSize radii = CGSizeMake(20, 20);

UIRectCorner corners = UIRectCornerTopRight | UIRectCornerBottomRight | UIRectCornerBottomLeft;

//create path

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corners cornerRadii:radii];

CATextLayer

CATextLayer也要比UILabel渲染得快得多。很少有人知道在iOS 6及之前的版本，UILabel其实是通过WebKit来实现绘制的，这样就造成了当有很多文字的时候就会有极大的性能压力。而CATextLayer使 用了Core text，并且渲染得非常快

(1).用CATextLayer来实现一个UILabel

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *labelView;

@end

@implementation ViewController

- (void)viewDidLoad

{

  [super viewDidLoad];

  //create a text layer

  CATextLayer *textLayer = [CATextLayer layer];

  textLayer.frame = self.labelView.bounds;

  [self.labelView.layer addSublayer:textLayer];

  //set text attributes

  textLayer.foregroundColor = [UIColor blackColor].CGColor;

  textLayer.alignmentMode = kCAAlignmentJustified;

  textLayer.wrapped = YES;

  //choose a font

  UIFont *font = [UIFont systemFontOfSize:15];

  //set layer font

  CFStringRef fontName = (__bridge CFStringRef)font.fontName;

  CGFontRef fontRef = CGFontCreateWithFontName(fontName);

  textLayer.font = fontRef;

  textLayer.fontSize = font.pointSize;

  CGFontRelease(fontRef);

  //choose some text

  NSString *text = @"Lorem ipsum dolor sit amet, consectetur adipiscing \ elit. Quisque massa arcu, eleifend vel varius in, facilisis pulvinar \ leo. Nunc quis nunc at mauris pharetra condimentum ut ac neque. Nunc elementum, libero ut porttitor dictum, diam odio congue lacus, vel \ fringilla sapien diam at purus. Etiam suscipit pretium nunc sit amet \ lobortis";

  //set layer text

  textLayer.string = text;

}

@end

如果你自习看这个文本，你会发现一个奇怪的地方：这些文本有一些像素化了。这是因为并没有以Retina的方式渲染，第二章提到了这个 contentScale属性，用来决定图层内容应该以怎样的分辨率来渲染。contentsScale并不关心屏幕的拉伸因素而总是默认为1.0。如果 我们想以Retina的质量来显示文字，我们就得手动地设置CATextLayer的contentsScale属性，如下：

   textLayer.contentsScale = [UIScreen mainScreen].scale;

这样就解决了这个问题（如图6.3）

(2).用NSAttributedString实现一个富文本标签。

@implementation ViewController

- (void)viewDidLoad

{

  [super viewDidLoad];

  //create a text layer

  CATextLayer *textLayer = [CATextLayer layer];

  textLayer.frame = self.labelView.bounds;

  textLayer.contentsScale = [UIScreen mainScreen].scale;

  [self.labelView.layer addSublayer:textLayer];

  //set text attributes

  textLayer.alignmentMode = kCAAlignmentJustified;

  textLayer.wrapped = YES;

  //choose a font

  UIFont *font = [UIFont systemFontOfSize:15];

  //choose some text

  NSString *text = @"Lorem ipsum dolor sit amet, consectetur adipiscing \ elit. Quisque massa arcu, eleifend vel varius in, facilisis pulvinar \ leo. Nunc quis nunc at mauris pharetra condimentum ut ac neque. Nunc \ elementum, libero ut porttitor dictum, diam odio congue lacus, vel \ fringilla sapien diam at purus. Etiam suscipit pretium nunc sit amet \ lobortis";

  ?

  //create attributed string

  NSMutableAttributedString *string = nil;

  string = [[NSMutableAttributedString alloc] initWithString:text];

  //convert UIFont to a CTFont

  CFStringRef fontName = (__bridge CFStringRef)font.fontName;

  CGFloat fontSize = font.pointSize;

  CTFontRef fontRef = CTFontCreateWithName(fontName, fontSize, NULL);

  //set text attributes

  NSDictionary *attribs = @{

    (__bridge id)kCTForegroundColorAttributeName:(__bridge id)[UIColor blackColor].CGColor,

    (__bridge id)kCTFontAttributeName: (__bridge id)fontRef

  };

  [string setAttributes:attribs range:NSMakeRange(0, [text length])];

  attribs = @{

    (__bridge id)kCTForegroundColorAttributeName: (__bridge id)[UIColor redColor].CGColor,

    (__bridge id)kCTUnderlineStyleAttributeName: @(kCTUnderlineStyleSingle),

    (__bridge id)kCTFontAttributeName: (__bridge id)fontRef

  };

  [string setAttributes:attribs range:NSMakeRange(6, 5)];

  //release the CTFont we created earlier

  CFRelease(fontRef);

  //set layer text

  textLayer.string = string;

}

@end

(3).UILabel的替代品

我们已经证实了CATextLayer比UILabel有着更好的性能表现，同时还有额外的布局选项并且在iOS 5上支持富文本。但是与一般的标签比较而言会更加繁琐一些。如果我们真的在需求一个UILabel的可用替代品，最好是能够在Interface Builder上创建我们的标签，而且尽可能地像一般的视图一样正常工作。

我们应该继承UILabel，然后添加一个子图层 CATextLayer并重写显示文本的方法。但是仍然会有由UILabel的-drawRect:方法创建的空寄宿图。而且由于CALayer不支持自 动缩放和自动布局，子视图并不是主动跟踪视图边界的大小，所以每次视图大小被更改，我们不得不手动更新子图层的边界。

我们真正想要的是一个用CATextLayer作为宿主图层的UILabel子类，这样就可以随着视图自动调整大小而且也没有冗余的寄宿图啦。

就 像我们在第一章『图层树』讨论的一样，每一个UIView都是寄宿在一个CALayer的示例上。这个图层是由视图自动创建和管理的，那我们可以用别的图 层类型替代它么？一旦被创建，我们就无法代替这个图层了。但是如果我们继承了UIView，那我们就可以重写+layerClass方法使得在创建的时候 能返回一个不同的图层子类。UIView会在初始化的时候调用+layerClass方法，然后用它的返回类型来创建宿主图层。

清单6.4 演示了一个UILabel子类LayerLabel用CATextLayer绘制它的问题，而不是调用一般的UILabel使用的较慢的 -drawRect：方法。LayerLabel示例既可以用代码实现，也可以在Interface Builder实现，只要把普通的标签拖入视图之中，然后设置它的类是LayerLabel就可以了。

清单6.4 使用CATextLayer的UILabel子类：LayerLabel

#import "LayerLabel.h"

#import @implementation LayerLabel

+ (Class)layerClass

{

  //this makes our label create a CATextLayer //instead of a regular CALayer for its backing layer

  return [CATextLayer class];

}

- (CATextLayer *)textLayer

{

  return (CATextLayer *)self.layer;

}

- (void)setUp

{

  //set defaults from UILabel settings

  self.text = self.text;

  self.textColor = self.textColor;

  self.font = self.font;

  //we should really derive these from the UILabel settings too

  //but that's complicated, so for now we'll just hard-code them

  [self textLayer].alignmentMode = kCAAlignmentJustified;

  ?

  [self textLayer].wrapped = YES;

  [self.layer display];

}

- (id)initWithFrame:(CGRect)frame

{

  //called when creating label programmatically

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

    [self setUp];

  }

  return self;

}

- (void)awakeFromNib

{

  //called when creating label using Interface Builder

  [self setUp];

}

- (void)setText:(NSString *)text

{

  super.text = text;

  //set layer text

  [self textLayer].string = text;

}

- (void)setTextColor:(UIColor *)textColor

{

  super.textColor = textColor;

  //set layer text color

  [self textLayer].foregroundColor = textColor.CGColor;

}

- (void)setFont:(UIFont *)font

{

  super.font = font;

  //set layer font

  CFStringRef fontName = (__bridge CFStringRef)font.fontName;

  CGFontRef fontRef = CGFontCreateWithFontName(fontName);

  [self textLayer].font = fontRef;

  [self textLayer].fontSize = font.pointSize;

  ?

  CGFontRelease(fontRef);

}

@end

如果你运行代码，你会发现文本并没有像素化，而我们也没有设置contentsScale属性。把CATextLayer作为宿主图层的另一好处就是视图自动设置了contentsScale属性。

在这个简单的例子中，我们只是实现了UILabel的一部分风格和布局属性，不过稍微再改进一下我们就可以创建一个支持UILabel所有功能甚至更多功能的LayerLabel类（你可以在一些线上的开源项目中找到）。

如果你打算支持iOS 6及以上，基于CATextLayer的标签可能就有有些局限性。但是总得来说，如果想在app里面充分利用CALayer子类，用+layerClass来创建基于不同图层的视图是一个简单可复用的方法。