A.基本知识
1.需要掌握的
- CALayer的基本属性
- CALayer和UIView的关系
- position和anchorPoint的作用
2.概念
在iOS中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView
其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层
在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个层
@property(nonatomic,readonly,retain) CALayer *layer;
当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是就完成了UIView的显示
换句话说，UIView本身不具备显示的功能，是它内部的层才有显示功能
3.基本使用
通过操作CALayer对象，可以很方便地调整UIView的一些外观属性，比如：
阴影
圆角大小
边框宽度和颜色
… …
阴影
圆角大小
边框宽度和颜色
… …
还可以给图层添加动画，来实现一些比较炫酷的效果
4.属性
（1）基本属性
边框颜色(CGColorRef类型)
@property CGColorRef borderColor;
边框宽度
@property CGFloat borderWidth;
圆角半径
@property CGColorRef borderColor;
内容(比如设置为图片CGImageRef)
@property(retain) id contents;
（2）transform3d key paths
//
// ViewController.m
// CALayerTest
//
// Created by hellovoidworld on 15/1/14.
// Copyright (c) 2015年 hellovoidworld. All rights reserved.
// #import "ViewController.h" @interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *orangeView; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib. // [self testBasicLayer]; // [self testOrangeView]; // [self testImageView]; [self testTransform];
} /** 基本属性 */
- (void) testBasicLayer {
// 创建一个图层
CALayer *layer = [[CALayer alloc] init];
// 设置图层边框颜色
layer.borderColor = [UIColor blueColor].CGColor;
// 设置图层边框粗细，边框是占据view内的尺寸的
layer.borderWidth = ;
//
layer.frame = CGRectMake(, , , );
layer.backgroundColor = [UIColor redColor].CGColor;
layer.cornerRadius = ;
// layer.masksToBounds = YES; // UIImage *image = [UIImage imageNamed:@"M3Mini"];
// layer.contents = (id)image.CGImage; layer.shadowColor = [UIColor blackColor].CGColor;
layer.shadowOffset = CGSizeMake(, );
layer.shadowOpacity = 0.5; [self.view.layer addSublayer:layer];
} /** UIView的圆角+阴影 */
- (void) testOrangeView {
self.orangeView.layer.shadowColor = [UIColor blackColor].CGColor;
self.orangeView.layer.shadowOffset = CGSizeMake(, );
self.orangeView.layer.shadowOpacity = 0.5;
self.orangeView.layer.cornerRadius = ; self.orangeView.layer.borderWidth = ;
} /** ImageView的圆角+阴影效果 */
- (void) testImageView {
// 用于产生阴影的辅助view，作为父view，显示在底层
UIView *shadowView = [[UIView alloc] init];
shadowView.frame = CGRectMake(, , , );
shadowView.layer.cornerRadius = ;
shadowView.backgroundColor = [UIColor redColor]; // 产生阴影
shadowView.layer.shadowColor = [UIColor blueColor].CGColor;
shadowView.layer.shadowOffset = CGSizeMake(, );
shadowView.layer.shadowOpacity = 0.7; // 用于显示圆角内容的imageView，作为子view，显示在表层
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"M3Mini"]];
imageView.frame = shadowView.bounds;
imageView.layer.cornerRadius = shadowView.layer.cornerRadius ; // 圆角裁剪
imageView.layer.masksToBounds = YES; // “合成”两个view
[shadowView addSubview:imageView]; // 添加到屏幕
[self.view addSubview:shadowView];
} /** 3D transform */
- (void) testTransform {
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"M3Mini"]];
imageView.frame = CGRectMake(, , , ); // 1.从3D的x、y、z轴三个向量的缩放
// imageView.layer.transform = CATransform3DMakeScale(2, 2, 0); // 2.沿着x=1,y=1,z=0的向量为轴旋转
// imageView.layer.transform = CATransform3DMakeRotation(M_PI_4, 1, 1, 0); // 3.使用key paths设置
// 3.1使用整个transform对象来设置，3D向量旋转
// NSValue *value = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4, 1, 1, 0)];
// [imageView.layer setValue:value forKeyPath:@"transform"]; // 3.2直接利用rotation来设置，2D旋转（跟view的transform旋转一样）
[imageView.layer setValue:@(M_PI_4) forKeyPath:@"transform.rotation"]; [self.view addSubview:imageView];
} - (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
} @end
#mark:
1.在同一个View上，使用了layer.masksToBounds=YES;的时候会屏蔽掉阴影效果；如果要同时使用。（注意，同时使用圆角和阴影是允许的）
例如: 要同时实现一个UIImageView的圆角和阴影效果，由于图片所在图层不是UIImageView的主layer，设置的圆角并不能影响到图片（同时阴影也是没有圆角的），所以必须要使用masksToBounds才能实现圆角。
单纯同时使用圆角剪裁和阴影：
- (void) testImageView {
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"M3Mini"]];
imageView.frame = CGRectMake(, , , );
imageView.layer.cornerRadius = ;
imageView.layer.masksToBounds = YES;
imageView.layer.shadowColor = [UIColor blueColor].CGColor;
imageView.layer.shadowOffset = CGSizeMake(, );
imageView.layer.shadowOpacity = 0.7;
[self.view addSubview:imageView];
}
没有阴影，因为被masksToBounds剪掉了：
解决：建议使用两个view，用带阴影的view（辅助view）和使用masksToBounds的view(需要显示内容的view）作为父子控件。
- (void) testImageView {
// 用于产生阴影的辅助view，作为父view，显示在底层
UIView *shadowView = [[UIView alloc] init];
shadowView.frame = CGRectMake(, , , );
shadowView.layer.cornerRadius = ;
shadowView.backgroundColor = [UIColor redColor];
// 产生阴影
shadowView.layer.shadowColor = [UIColor blueColor].CGColor;
shadowView.layer.shadowOffset = CGSizeMake(, );
shadowView.layer.shadowOpacity = 0.7;
// 用于显示圆角内容的imageView，作为子view，显示在表层
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"M3Mini"]];
imageView.frame = shadowView.bounds;
imageView.layer.cornerRadius = shadowView.layer.cornerRadius ;
// 圆角裁剪
imageView.layer.masksToBounds = YES;
// “合成”两个view
[shadowView addSubview:imageView];
// 添加到屏幕
[self.view addSubview:shadowView];
}
5.关于CALayer的疑问
首先
CALayer是定义在QuartzCore框架中的
CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的
UIColor、UIImage是定义在UIKit框架中的
CALayer是定义在QuartzCore框架中的
CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的
UIColor、UIImage是定义在UIKit框架中的
其次
QuartzCore框架和CoreGraphics框架是可以跨平台使用的，在iOS和Mac OS X上都能使用
但是UIKit只能在iOS中使用
为了保证可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef
6.如何选择UIView和CALayer
通过CALayer，就能做出跟UIImageView一样的界面效果
既然CALayer和UIView都能实现相同的显示效果，那究竟该选择谁好呢？
其实，对比CALayer，UIView多了一个事件处理的功能。也就是说，CALayer不能处理用户的触摸事件，而UIView可以
所以，如果显示出来的东西需要跟用户进行交互的话，用UIView；如果不需要跟用户进行交互，用UIView或者CALayer都可以
当然，CALayer的性能会高一些，因为它少了事件处理的功能，更加轻量级
7. position & anchorPoint
CALayer有2个非常重要的属性：position和anchorPoint
@property CGPoint position;
用来设置CALayer在父层中的位置
以父层的左上角为原点(0, 0)
@property CGPoint anchorPoint;
称为“定位点”、“锚点”
决定着CALayer身上的哪个点会在position属性所指的位置
以自己的左上角为原点(0, 0)
它的x、y取值范围都是0~1，默认值为（0.5, 0.5）
CALayer *layer = [[CALayer alloc] init];
layer.backgroundColor = [UIColor redColor].CGColor;
layer.frame = CGRectMake(, , , );
layer.position = CGPointMake(, );
// anchorPoint默认是(0.5,0.5)，即中心点
layer.anchorPoint = CGPointMake(,); [self.view.layer addSublayer:layer];
8.隐式动画
每一个UIView内部都默认关联着一个CALayer，我们可用称这个Layer为Root Layer（根层）
所有的非Root Layer，也就是手动创建的CALayer对象，都存在着隐式动画
什么是隐式动画？
当对非Root Layer的部分属性进行修改时，默认会自动产生一些动画效果
而这些属性称为Animatable Properties(可动画属性)
列举几个常见的Animatable Properties：
bounds：用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画
backgroundColor：用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画
position：用于设置CALayer的位置。修改这个属性会产生平移动画
可以通过动画事务(CATransaction)关闭默认的隐式动画效果
[CATransaction begin];
[CATransaction setDisableActions:YES];
self.myview.layer.position = CGPointMake(, );
[CATransaction commit];
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
// 缩放
self.layer.frame = CGRectMake(self.layer.position.x, self.layer.position.y, , );
// 位移
self.layer.position = CGPointMake(, );
// 背景色
self.layer.backgroundColor = [UIColor blueColor].CGColor;
}
10.自定义图层
有两种方法：自己创建layer类和使用代理
（1）创建继承CALayer的类，并实现drawInContent:方法来绘画
//
// HVWLayer.m
// CALayerTest
//
// Created by hellovoidworld on 15/1/14.
// Copyright (c) 2015年 hellovoidworld. All rights reserved.
// #import "HVWLayer.h" @implementation HVWLayer /**
* 必须调用一次layer的setNeedDisplay方法，才能触发此方法
*/
- (void)drawInContext:(CGContextRef)ctx {
NSLog(@"%@ - drawInContext", [self class]); // 绿色
CGContextSetRGBFillColor(ctx, , , , );
// 矩形
CGContextFillRect(ctx, CGRectMake(, , , ));
CGContextFillPath(ctx);
} @end
viewController:
- (void) diyLayer1 {
HVWLayer *layer = [[HVWLayer alloc] init];
layer.frame = CGRectMake(, , , );
layer.backgroundColor = [UIColor grayColor].CGColor;
// 必须调用重绘，才能触发layer的drawInContent:方法
[layer setNeedsDisplay];
[self.view.layer addSublayer:layer];
}
（2）使用layer的delegate
viewController:
- (void) diyLayer2 {
CALayer *layer = [[CALayer alloc] init];
layer.bounds = CGRectMake(, , , );
layer.anchorPoint = CGPointZero;
layer.backgroundColor = [UIColor grayColor].CGColor;
layer.delegate = self;
// 必须要进行重绘
[layer setNeedsDisplay];
[self.view.layer addSublayer:layer];
}
#pragma mark - layer代理方法
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
// 绿色
CGContextSetRGBFillColor(ctx, , , , );
// 矩形
CGContextFillRect(ctx, CGRectMake(, , , ));
CGContextFillPath(ctx);
}
11.View和layer的调用关系
（1）view的layer加载顺序
- view准备一个图层上下文Layer Context Ref
- 调用[view.layer.delegate drawLayer:inContext:]，传入上下文
- 在drawLayer:inContext:内会调用view的drawRect:方法
- 所以drawRect:内实现的绘图方法，会画到layer上
- 系统把layer上的内容描绘到屏幕，完成view的显示
view: （创建了一个红圆）
//
// HVWView.m
// CALayerTest
//
// Created by hellovoidworld on 15/1/14.
// Copyright (c) 2015年 hellovoidworld. All rights reserved.
// #import "HVWView.h" @implementation HVWView - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
NSLog(@"%@ - drawLayer", [self class]);
[super drawLayer:layer inContext:ctx];
} - (void)drawRect:(CGRect)rect {
NSLog(@"%@ - drawRect", [self class]);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSetRGBFillColor(ctx, , , , );
CGContextFillEllipseInRect(ctx, CGRectMake(, , , ));
CGContextFillPath(ctx);
} @end
layer：（创建一个绿矩形）
//
// HVWLayer.m
// CALayerTest
//
// Created by hellovoidworld on 15/1/14.
// Copyright (c) 2015年 hellovoidworld. All rights reserved.
// #import "HVWLayer.h" @implementation HVWLayer - (void)drawInContext:(CGContextRef)ctx {
NSLog(@"%@ - drawInContext", [self class]); // 绿色
CGContextSetRGBFillColor(ctx, , , , );
// 矩形
CGContextFillRect(ctx, CGRectMake(, , , ));
CGContextFillPath(ctx);
} @end
ViewController:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// 创建view
HVWView *hvwView = [[HVWView alloc] init];
hvwView.backgroundColor = [UIColor grayColor];
hvwView.frame = CGRectMake(, , , );
// 创建layer
HVWLayer *layer = [[HVWLayer alloc] init];
layer.frame = CGRectMake(, , , );
layer.backgroundColor = [UIColor blueColor].CGColor;
// 必须要重绘才能调用layer的drawInContext
[layer setNeedsDisplay];
// 配置layer到view，会设置layer的delegate就是那个view
[hvwView.layer addSublayer:layer];
[self.view addSubview:hvwView];
// [self.view.layer addSublayer:layer];
}
consol:
2015-01-14 21:59:45.558 CALayerTest3[3246:115305] HVWView - drawLayer
2015-01-14 21:59:45.560 CALayerTest3[3246:115305] HVWView - drawRect
2015-01-14 21:59:45.560 CALayerTest3[3246:115305] HVWView - drawRect
2015-01-14 21:59:45.561 CALayerTest3[3246:115305] HVWLayer - drawInContext