《iOS三问》 -- CALayer的专用图层

CALayer知识点脑图

各种CALayer子类可以满足各种界面绘制的场景。这算是CALayer对外提供的工具类了,用它们可以方便地绘制你想要的图形。

绘图时要注意的点:

  1. 一般要设置layer的contentScale = [UIScreen mainScreen].scale;
  2. 使用传用图层可以直接添加,无需手动调用 setNeedDisplay 方法;

1 CATextLayer

Core Animation提供了一个 CALayer 的子类 CATextLayer ,它以图层的形式包含了 UILabel 几乎所有的绘制特性,并且额外提供了一些新的特性。让你可以方便地制作一个包含你想要文本的图层。

1.1 什么要使用 CATextLayer?

CATextLayer相较UILabel要更轻量级、更快些。CATextLayer使用 Core text渲染,速度上更快;

1.2 主要参数

CATextLayer主要参数
1
2
3
4
5
6
7
8
9
10
11
12
· string
要输出的字符串,这个是CATextLayer最主要的属性
· bounds
图层的大小,忘了设这个你的text就无法显示了
·font, fontSize, alignmentMode
字体,字体大小,对齐方式
· foregroundColor
字体的颜色

1.3 示例:

CATextLayer使用示例
1
2
3
4
5
6
7
8
9
10
CATextLayer *tLayer =[CATextLayer layer];
tLayer.contentsScale = [UIScreen mainScreen].scale; // 注意,这个不能忘
tLayer.string = @"CATextLayer 测试一下";
tLayer.bounds = CGRectMake(0, 0, 300, 20);
tLayer.fontSize = 14.f; //字体的大小
tLayer.font = (__bridge CFTypeRef _Nullable)(@"HelveticaNeue-BoldItalic"); //字体的名字 不是 UIFont
tLayer.alignmentMode = kCAAlignmentCenter; //字体的对齐方式
tLayer.position = CGPointMake(150, 0);
tLayer.foregroundColor =[UIColor redColor].CGColor; //字体的颜色

2 CAShapeLayer

CAShapeLayer 可以用来绘制所有能够通过 CGPath 来表示的形状。这个形状不一定要闭合,路径也不一定要不可破。

因此,CAShapeLayer经常与UIBezierPath一起使用。UIBezierPath类允许你在自定义的 View 中绘制和渲染由直线和曲线组成的路径。你可以在初始化的时候直接为你的UIBezierPath指定一个几何图形。
通俗点就是UIBezierPath用来指定绘制图形路径,而CAShapeLayer就是根据路径来绘图的。

使用CAShpageLayer同样有许多优点:

  1. 渲染快速。 CAShapeLayer 使用了硬件加速,绘制同一图形会比用Core Graphics很多。
  2. 高效使用内存。一个 CAShapeLayer 不需要像普通 CALayer 一样创建一个寄宿图形,所以无论有多大,都不会占用太多的内存。
  3. 不会出现像素化。当你给 CAShapeLayer 做3D变换时,它不像一个有寄宿图的普通图层一样变得像素化。

2.1 主要参数

CAShapeLayer主要参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- path
图层要绘制的路径,这个可以说是最主要的属性了。
- fillColor , strokeColor
描边色与都填充色。
- fillRule
填充规则,'non-zero' or 'even-odd'。
- stokeStart , strokeEnd
绘制描边时的区域,取值为比例位置(like anchorPoint, 0~1,0是开始位置,1为结束位置)
- lineWidth , miterLimit, lineCap , lineJoin, lineDashPhase, lineDashPattern
lineWidth: 线宽
miterLimit: 最大斜接长度(与动画相关)。
lineCap: 线段头样式(kCALineCapButt, kCALineCapRound ,kCALineCapSquare)。
lineJoin: 连接点样式(kCALineJoinMiter、kCALineJoinRound、kCALineJoinBevel),
lineDashPhase: 虚线起始位置。
lineDashPattern:虚线样式模板(数组)。

2.2 示例

使用CAShapeLayer在黄色区域中画一个矩形
1
2
3
4
5
6
7
8
9
10
11
12
13
14
CAShapeLayer *sLayer = [CAShapeLayer layer];
sLayer.contentsScale = [UIScreen mainScreen].scale;
sLayer.frame = CGRectMake(0, 0, 150, 150);
sLayer.backgroundColor = [UIColor yellowColor].CGColor; // 设置 layer背景色
sLayer.strokeColor = [UIColor blueColor].CGColor; // 设置描边色
sLayer.fillColor = [UIColor redColor].CGColor; //设置填充色
sLayer.lineJoin = kCALineJoinRound;
sLayer.lineCap = kCALineCapRound;
sLayer.lineWidth = 4;
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 100, 100)
byRoundingCorners:(UIRectCornerBottomLeft | UIRectCornerBottomRight)
cornerRadii:CGSizeMake(10, 10)];
sLayer.path = path.CGPath;

3 CATransformLayer

如果我们想像 Transform那章一样画了多个立方形,怎么去旋转他们呢?

在那一章中,我们是通过转动父layer的sublayerTransform属性来实现的,但是如果是多个立方形,就不能这样的,不然多个立方形会跟着一起转动。

那我们怎么做呢?我们可以创建一个 CATransformLayer,然后把每个立方形放到独立的 CATransformLayer上,当要转动时,直接转动CATransformLayer就行了,他会对其中的子layer一起转动(只需要赋值给其 transform属性),相当于 sublayerTransform.

1
2
3
4
5
6
CATransformLayer *cube = [CATransformLayer layer];
[cube addSublayer:face1]; ...
...
cube.transform = transform;

4 CAGradientLayer

渐变色图层控件,可以很方便地画出渐变色控件。

4.1 主要参数

1
2
3
4
5
6
7
8
9
10
11
12
- colors : array<id CGColor>
传入一个数组,规定所有的渐变色。
- locations : array<NSNumber>
渐变颜色的区间分布(就是colos中每个渐变颜色的起点和最后颜色的终点位置,这里用的是比例位置,参考anchorPoint),locations的数组长度和colors一致。这个属性可不设,默认是nil,系统会平均分布颜色如果有特定需要可设置,数组设置为0 ~ 1之间单调递增。
- startPoint , endPoint
使用与anchorPoint一样的比例坐标,startPoint默认(0.5, 0), endPoint默认(0.5,1),也就是从顶边的中点,到底边的中点,从上到下渐变。
- type
绘制类型,默认 kCAGradientLayerAxial(表示按像素均匀变化)。

4.2 示例

画一个渐变的矩形
1
2
3
4
5
6
7
8
9
CAGradientLayer *gLayer = [CAGradientLayer new];
gLayer.contentsScale = [UIScreen mainScreen].scale;
gLayer.frame = CGRectMake(0, 0, 100, 100);
gLayer.colors = @[(id)[UIColor blueColor].CGColor, (id)[UIColor redColor].CGColor];
gLayer.type = kCAGradientLayerAxial;
gLayer.locations = @[@0.0f, @1.0f];
layerFrame = [UIView new];
[layerFrame.layer addSublayer:gLayer];
layerFrame.flexSize = CGSizeMake(100, 100);

5 CAReplicatorLayer

CAReplicatorLayer 的功能是用于高效地生成许多相似的图层。

5.1 主要属性

CAReplicatorLayer主要属性
1
2
3
4
5
6
· instanceCount
指定图层要重复的次数
· instanceTransform
指定一个 CATransform3D变换,变换是逐步增加的,每个实例都是相对于前一个实现的变换!(这就是为什么最终复制体会出现在不同位置的原因)

5.2 示例 - 由重复小方块组成的圆圈

示例效果可以在我的iOSOneDemo中查看。

由重复小方块组成的圆圈
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
- (void)addReplicatorLayerOfView:(UIView *)view
{
CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
replicatorLayer.frame = CGRectMake(0, 0, 300, 300);
[view.layer addSublayer:replicatorLayer];
replicatorLayer.instanceCount = 10;
// instanceTransform
CATransform3D transform = CATransform3DIdentity;
transform = CATransform3DRotate(transform, M_PI / 5.0, 0, 0, 1);
replicatorLayer.instanceTransform = transform;
// color shift
replicatorLayer.instanceBlueOffset = -0.1;
replicatorLayer.instanceGreenOffset = -0.1;
//创建小方块,replicatorLayer将复制这个小方块
CALayer *cube = [CALayer layer];
cube.bounds = CGRectMake(0, 0, 20, 20);
cube.position = CGPointMake(150, 20);
cube.backgroundColor = [UIColor whiteColor].CGColor;
[replicatorLayer addSublayer:cube];
}

5.3 示例2 - 一个水纹动画

下面这个示例可能需要一些动画的基础,可以参考相关iOS动画的章节。

一个水纹动画
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
- (void)addWaveAnimationInView:(UIView *)view
{
// 一个圆形从小到大,透明度从1到0的动画
CAShapeLayer *animLayer = [CAShapeLayer layer];
animLayer.contentsScale = [UIScreen mainScreen].scale;
animLayer.position = CGPointMake(150, 150);
animLayer.bounds = CGRectMake(0, 0, 100, 100);
animLayer.backgroundColor = [UIColor clearColor].CGColor; // 设置 layer背景色
animLayer.fillColor = [UIColor greenColor].CGColor; //设置填充色
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:animLayer.bounds];
animLayer.path = path.CGPath;
// 动画
animLayer.transform = CATransform3DMakeScale(0, 0, 1);
CABasicAnimation *sizeAnim = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
sizeAnim.fromValue = @0;
sizeAnim.toValue = @1;
[animLayer addAnimation:sizeAnim forKey:nil];
CABasicAnimation *alphaAnim = [CABasicAnimation animationWithKeyPath:@"opacity"];
alphaAnim.fromValue = @1;
alphaAnim.toValue = @0;
CAAnimationGroup *animGroup = [CAAnimationGroup animation];
animGroup.animations = @[sizeAnim, alphaAnim];
animGroup.duration = 2;
animGroup.repeatCount = HUGE;
[animLayer addAnimation:animGroup forKey:nil];
// CAReplicatorLayer
CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
replicatorLayer.frame = CGRectMake(0, 0, 300, 300);
[view.layer addSublayer:replicatorLayer];
replicatorLayer.instanceCount = 5;
replicatorLayer.instanceDelay = 0.4;
[replicatorLayer addSublayer:animLayer];
}

6 引用

【1】[Matt Neuburg - 《Programming iOS deep into views,view controllers and frameworks》]
【2】[Nick LockWood - 《iOS Core Animation: Advanced Techniques》]

坚持原创技术分享,您的支持将鼓励我继续创作!