iOS-CALayer (一)

2018-05-02 本文已影响89人梦蕊dream

前言：CALayer基础知识。

一、简介

在iOS中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView。其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层。在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个层。
@property(nonatomic,readonly,retain) CALayer *layer;
当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是就完成了UIView的显示。UIView本身不具备显示的功能，是它内部的层才有显示功能。
UIView iOS 系统界面的基础，有core Animation实现，真正绘图由 CALayer 管理。frame和bounds实际访问 CALayer 的属性。

CALayer 一般作为 UIView 容器使用
CALayer 是一个管理着图片载体（image-base content）的层结构。
直接修改单独创建出的 CALayer 属性可触发隐式动画。
UIView 中的 CALayer 动画必须显示触发才能生效。

二、基本属性

2.1基础属性

//宽度和高度
@property CGRect bounds;

//位置(默认指中点，具体由anchorPoint决定)
@property CGPoint position;

//锚点(x,y的范围都是0-1)，决定了position的含义
@property CGPoint anchorPoint;

//背景颜色(CGColorRef类型)
@property CGColorRef backgroundColor;

//形变属性
@property CATransform3D transform;

//边框颜色(CGColorRef类型)
@property CGColorRef borderColor;

//边框宽度
@property CGFloat borderWidth;

//圆角半径
@property CGFloat cornerRadius;

//内容(比如设置为图片CGImageRef)
@property(retain) id contents;

2.2 contents

CALayer 有一个属性叫做contents，这个属性的类型被定义为id，意味着它可以是任何类型的对象。在这种情况下，你可以给contents属性赋任何值，你的app仍然能够编译通过。但是，在实践中，如果你给contents赋的不是CGImage，那么你得到的图层将是空白的。

contents这个奇怪的表现是由Mac OS的历史原因造成的。它之所以被定义为id类型，是因为在Mac OS系统上，这个属性对CGImage和NSImage类型的值都起作用。如果你试图在iOS平台上将UIImage的值赋给它，只能得到一个空白的图层。一些初识Core Animation的iOS开发者可能会对这个感到困惑。
头疼的不仅仅是我们刚才提到的这个问题。事实上，你真正要赋值的类型应该是CGImageRef，它是一个指向CGImage结构的指针。UIImage有一个CGImage属性，它返回一个"CGImageRef",如果你想把这个值直接赋值给CALayer的contents，那你将会得到一个编译错误。因为CGImageRef并不是一个真正的Cocoa对象，而是一个Core Foundation类型。
尽管Core Foundation类型跟Cocoa对象在运行时貌似很像（被称作toll-free bridging），他们并不是类型兼容的，不过你可以通过bridged关键字转换。

layer.contents = (__bridge id)image.CGImage;

2.3 contentGravity

UIView 可以对图片做合适的处理，例如：
view.contentMode = UIViewContentModeScaleAspectFit;
CALayer 与之相对的属性是 contentGravity ，contentGravity目的是为了决定内容在图层的边界中怎么对齐，比如 kCAGravityResizeAspect 效果等同于 UIViewContentModeScaleAspectFit，在图层中等比例拉伸以适应图层边界。
可选常量值

KCAGravityCenter
KCAGravityTop
KCAGravityBottom
KCAGravityLeft
KCAGravityRight
KCAGravityTopLeft
KCAGravityTopRight
KCAGravityBottomLeft
KCAGravityBottomRight
KCAGravityResize
KCAGravityResizeAspect
KCAGravityResizeAspectFit

2.4 contentScale

contentScale 决定图的像素尺寸和视图大小比例，默认是1.0(浮点数)。支持高分辨率(Hi-DPI或Retina)屏幕机制的一部分。判断在绘制图层的时候图创建空间的大小，和需要显示图片的拉伸度。
UIView 有相似属性：contentScaleFactor

2.5 maskToBounds

UIView 有属性 clipsToBounds 属性决定是否显示超出边界的内容。
CALayer 对应属性是 maskToBounds 。

2.6 contentRect

contentRect属性允许在图层边框显示图的子域。涉及到图片的显示和拉伸。与 bounds 和 frame 不同，contentRect不是按点计算，是单位坐标，坐标区间在0-1之间。可以用于图片的拼接。

contentRect自定义

2.7 contentCenter

是 CGRect，定义固定边框和在图层上可拉伸的区域。工作效果和 UIImage的 -resizeableImageWithCaplnsets 方法类似。可以在 XIB 中控制拉伸图片。

contentCenter示例

2.8 Custom Drawing

可以使用 Core Graphics 直接绘制图，通过机场 UIView 实现 drewRect: 方法自定义绘制。

drawRect 方法没有默认实现，UIView 检测到 drawRect 方法被调用，位视图分配一个图层，图层像素尺寸等于视图大小 * contentScale 的值。
如果不需要使用图层就不要创建该方法，会造成 CPU 资源和内存的浪费，苹果建议：如没有自定义绘制的任务就不在在子类写一个空的 drawRect 方法。
当视图在屏幕出现时， drawRect 方法会被自动调用。 drawRect 方法里面的代码利用 core Graphics 绘制图层，内容就会被缓存直到被更改，一些视图会自动绘制。虽然 drawRect 是 UIView 的方法，事实上都是底层 CALayer 安排重回工作和保存相应图片。

CALayer 有 delegate 属性，实现 CALayerDelegate 协议，当CALayer需要内容特定的信息就会从协议中请求。CALayerDelegate 非正式协议，当需要被重绘，调用 -(void)displayLayer:（CALayer *）layer方法实现。如果代理不实现上述方法，CALayer 会尝试调用 -(void)drawLayer:（CLALayer *）layer inContext:（CGContextRef）ctx.

三、有关 CALayer

首先

CALayer是定义在QuartzCore框架中的
CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的
UIColor、UIImage是定义在UIKit框架中的

其次

QuartzCore框架和CoreGraphics框架是可以跨平台使用的，在iOS和Mac OS X上都能使用
但是UIKit只能在iOS中使用
为了保证可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef

四、CALayer与 UIView 的关系与选择

4.1 CALayer与 UIView 的关系

UIView显示在屏幕上归功于CALayer，通过调用drawRect方法来渲染自身的内容，调节CALayer属性可以调整UIView的外观，UIView继承自UIResponder，比起CALayer可以响应用户事件，Xcode6之后可以方便的通过视图调试功能查看图层之间的关系
UIView是iOS系统中界面元素的基础，所有的界面元素都继承自它。它内部是由Core Animation来实现的，它真正的绘图部分，是由一个叫CALayer(Core Animation Layer)的类来管理。UIView本身，更像是一个CALayer的管理器，访问它的跟绘图和坐标有关的属性，如frame，bounds等，实际上内部都是访问它所在CALayer的相关属性
UIView有个layer属性，可以返回它的主CALayer实例，UIView有一个layerClass方法，返回主layer所使用的类，UIView的子类，可以通过重载这个方法，来让UIView使用不同的CALayer来显示，如：

- (class) layerClass {
    // 使某个UIView的子类使用GL来进行绘制
    return ([CAEAGLLayer class]);
}

UIView的CALayer类似UIView的子View树形结构，也可以向它的layer上添加子layer，来完成某些特殊的显示。例如下面的代码会在目标View上敷上一层黑色的透明薄膜。

grayCover = [[CALayer alloc]init];
grayCover.backgroudColor = [[UIColor blackColor]colorWithAlphaComponent:0.2].CGColor;
[self.layer addSubLayer:grayCover];

补充部分，UIView的layer树形在系统内部被系统维护着三份copy
- 逻辑树，就是代码里可以操纵的，例如更改layer的属性等等就在这一份
- 动画树，这是一个中间层，系统正是在这一层上更改属性，进行各种渲染操作
- 显示树，这棵树的内容是当前正被显示在屏幕上的内容
- 这三棵树的逻辑结构都是一样的，区别只有各自的属性

4.2 CALayer与 UIView 的选择

通过CALayer，就能做出跟UIImageView一样的界面效果。UIView对比CALayer，UIView多了一个事件处理的功能。也就是说，CALayer不能处理用户的触摸事件，而UIView可以。
所以，如果显示出来的东西需要跟用户进行交互的话，用UIView；如果不需要跟用户进行交互，用UIView或者CALayer都可以。
CALayer的性能会高一些，因为它少了事件处理的功能，更加轻量级。

UIView 继承 UIResponder 能接受事件响应，主要对内容管理。
CALayer 继承 NSObject 不能接受事件响应，主要对内容绘制。
UIView 不具备显示功能，内部层才具有显示功能。

UIView作为 CALayer 的代理，CALayer通过actionForLayer:xxx forKey向 UIView 请求相应的动画 Action。代理方法内部[UIView (CALayerDelegate) drawlayer:xxx inContext ]调用 UIView 的 DrawRect 方法，从而绘制 UIView 的内容。

4.3 position和anchorPoint

CALayer有2个非常重要的属性：position和anchorPoint
以前修改一个控件的位置都是能过Frame的方式进行修改.现在利用CALayer的position和anchorPoint属性也能够修改控件的位置.这两个属性是配合使用的.

position:它是用来设置当前的layer在父控件当中的位置的.
所以它的坐标原点.以父控件的左上角为(0.0)点.
anchorPoint:它是决点CALayer身上哪一个点会在position属性所指的位置
anchorPoint它是以当前的layer左上角为原点(0.0)
它的取值范围是0~1,它的默认在中间也就是(0.5,0.5)的位置.
anchorPoint又称锚点.就是把锚点定到position所指的位置.
两者结合使用.想要修改某个控件的位置,我们可以设置它的position点.
设置完毕后.layer身上的anchorPoint会自动定到position所在的位置.

@property CGPoint position;
//用来设置CALayer在父层中的位置

@property CGPoint anchorPoint;
//称为“定位点”、“锚点”
//以自己的左上角为原点(0, 0)
//它的x、y取值范围都是0~1，默认值为（0.5, 0.5）

(0.5,0.5)

(1,0.5)

(0,0)

(0.5,0)

(1,0.5)

CALayer的 frame 由anchorPoint、position、bounds、transform 共同决定。
UIView 的 frame 只是简单的返回CALayer的 frame 。

五、隐式动画

每一个UIView内部都默认关联着一个CALayer，我们可用称这个Layer为Root Layer（根层）。所有的非Root Layer，也就是手动创建的CALayer对象，都存在着隐式动画。

根层:UIView内部自动关联着的那个layer我们称它是根层.
非根层:自己手动创建的层,称为非根层.

隐式动画简介
当对非Root Layer的部分属性进行修改时，默认会自动产生一些动画效果。而这些属性称为Animatable Properties(可动画属性)，默认动画缺省值为0.25s。

常见的Animatable Properties：

bounds：用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画
backgroundColor：用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画
position：用于设置CALayer的位置。修改这个属性会产生平移动画

通过动画事务(CATransaction)关闭默认的隐式动画效果
动画的底层是包装成一个事务来进行的。什么是事务?很多操作绑定在一起,当这些操作执行完毕后,才去执行下一个操作。

[CATransaction begin];//事物开始
[CATransaction setDisableActions:YES];//事物隐藏动画
[CATransaction setAnimationDuration:1.0];//动画执行时长
self.myview.layer.position = CGPointMake(10, 10);
[CATransaction commit];//提交事物

六、其他

6.1 裁剪图片

//设置图片的圆角半径
_imageView.layer.cornerRadius = 50;
//裁剪,超出裁剪区域的部分全部裁剪掉
_imageView.layer.masksToBounds = YES;

注意:UIImageView当中Image并不是直接添加在层上面的.这是添加在layer当中的contents里.我们设置层的所有属性它只作用在层上面.对contents里面的东西并不起作用.所以我们看不到图片有圆角的效果.想要让图片有圆角的效果.可以把masksToBounds这个属性设为YES, 当设为YES,把就会把超过根层以外的东西都给裁剪掉.

masksToBounds = NO

masksToBounds = YES

下一篇：高性能的给 UIImageView 加圆角

6.2 layer的 CATransform3D属性

只有旋转的时候才可以看出3D的效果.

      //旋转
      //x,y,z 分别代表x,y,z轴.
      CATransform3DMakeRotation(M_PI, 1, 0, 0);
      //平移
      CATransform3DMakeTranslation(x,y,z)
      //缩放
      CATransform3DMakeScale(x,y,z);

通过KVC的方式进行设置属性.
但是CATransform3DMakeRotation它的值,是一个结构体, 所以要把结构转成对象.

NSValue *value = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1, 0, 0)];
[_imageView.layer setValue:value forKeyPath:@"transform.scale"];

什么时候用KVC?
当需要做一些快速缩放,平移,二维的旋转时用KVC.
比如:[_imageView.layer setValue:@0.5 forKeyPath:@"transform.scale"];
快速的进行缩放, 后面forKeyPath属性值不是乱写的.苹果文档当中给了相关的属性.

6.3 自定义CALayer

🌰：使用 UIView 实现 UIImageView 的效果。

1.如何自定义Layer.自定义CALayer的方式创建UIView的方式非常相似.

     CALayer *layer = [CALayer layer];
     layer.frame = CGRectMake(50, 50, 100, 100);
     layer.backgroundColor = [UIColor redColor].CGColor;
     [self.view.layer addSublayer:layer];

2.给layer设置图片.
layer.contents = (id)[UIImage imageNamed:@"阿狸头像"].CGImage;
3.为什么要使用CGImageRef、CGColorRef?
为了保证可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef.