首页 > 代码库 > iOS核心笔记——CALayer-基本使用

iOS核心笔记——CALayer-基本使用

1、CALayer简单使用:

※了解: 通过操作CALayer对象,可以很方便的调整UIView的一些界面属性,例如:阴影、圆角大小、边框宽度……等;在iOS 7.0以前使用CALayer需要手动导入QuartzCore框架


2、通过CALayer修改UIView的界面属性:

1、在storyboard中拖入UIView,并设置相关属性:

如下图所示技术分享


2、设置阴影:
1.  // 1. 设置阴影颜色
2. self.blueView.layer.shadowColor = [UIColor blackColor].CGColor;
3. // 2. 设置阴影偏移量, width: 向右为正, height: 向下为正.
4. self.blueView.layer.shadowOffset = CGSizeMake(-20, -20);
5. // 3. 设置阴影不透明度, 0: 不显示阴影; 1: 显示阴影. 必须设置该属性才能显示阴影
6. self.blueView.layer.shadowOpacity = 1;

第1行:设置阴影的颜色为黑色,注意,这里使用的是UIColor的CGColor属性,是一种CGColorRef类型的数据;

第2行:设置阴影的偏移大小,可以看出阴影往原图左上角偏移;

第3行:设置阴影不透明度,0:不显示阴影;1:显示阴影; 必须设置该属性才能显示阴影。

※重要:设置阴影时,必须设置view的masksToBounds = NO;否则,无法显示阴影。

效果示例图技术分享


3、设置圆角大小:
1.  // 3. 切圆角, 不需要裁剪也能显示圆角
2. self.blueView.layer.cornerRadius = 10;

第1行:设置圆角的半径为10;

※重要:UIView设置圆角无需设置masksToBounds = YES;因为,UIView内部默认只有一个图层,即:主layer;所以,直接设置主layer圆角半径即可。

效果示例图技术分享


4、设置边框宽度和颜色:
1.  // 1. 设置边框颜色, 单独设置无效; 必须结合边框宽度
2. self.blueView.layer.borderColor = [UIColor redColor].CGColor;
3. // 2. 设置边框宽度
4. self.blueView.layer.borderWidth = 5;

第1行:设置边框颜色为红色(注:CGColor类型);

第2行:设置边框宽度为8;

备注:给UIView设置边框,边框不占据内容区域;边框在UIView内容区域外部。

效果示例图技术分享


3、通过CALayer修改UIImageView的界面属性:

1. 在storyboard中拖入UIImageView,并设置相关属性:

如下图所示技术分享


2、设置阴影:
1.    // 1. 设置阴影
2. self.imageView.layer.shadowColor = [UIColor blackColor].CGColor;
3. // 2. 设置阴影偏移量
4. self.imageView.layer.shadowOffset = CGSizeMake(-20, -20);
5. // 3. 显示阴影
6. self.imageView.layer.shadowOpacity = 1;

第1行:设置阴影的颜色为黑色,注意,这里使用的是UIColor的CGColor属性,是一种CGColorRef类型的数据;

第2行:设置阴影的偏移大小,可以看出阴影往原图左上角偏移;

第3行:设置阴影的不透明度为1,表示完全不透明;如果为0.5,则表示为半透明。

示例效果图技术分享


3、设置圆角大小:
1.    // 1. 设置圆角
2. self.imageView.layer.cornerRadius = 20;
3. // 2. 超出主layer裁剪
4. self.imageView.layer.masksToBounds = YES;

第1行:设置圆角半径为20;

第2行masksToBounds = YES:设置该属性为YES是为了将子layer超出主layer部分进行裁剪,UIImageView是由子layer显示图片;但是,切圆角等所有操作都是在主layer上,所以,即便我们设置了主layer圆角特效,如果没有设置masksToBounds = YES;子layer超出部分没有被裁减,imageView便没有圆角效果;

重要:设置masksToBounds = YES之后,阴影便没有阴影效果了。

效果示例图技术分享


4、设置边框宽度和颜色:
1.    // 1. 设置边框, 默认为黑色, 边框占据imageView的内容部分
2. self.imageView.layer.borderWidth = 8;
3. // 2. 设置边框颜色
4. self.imageView.layer.borderColor = [UIColor redColor].CGColor;

备注: 给UIImageView设置边框,其边框内容是显示在UIImageView里面的内容区域

第1行:设置边框宽度为8;

第2行:设置边框颜色为红色(注:CGColor类型)。

效果示例图技术分享


5、设置形变(CATransform3D):
1.    // 1. 方式一: 使用transform-3D方法
2. self.imageView.layer.transform = CATransform3DMakeRotation(M_PI_4, 0, 0, 1);
3. // 1-1. 对比transform-2D
4. self.imageView.transform = CGAffineTransformMakeScale(0.5, 1);
5.
6. // 2. 方式二: 使用KVC, 在值中指定transform类型
7. NSValue *transform = [NSValue valueWithCATransform3D:CATransform3DMakeScale(2.0, 1.0, 0)];
8. [self.imageView.layer setValue:transform forKeyPath:@"transform"];
9.
10. // 3. 方式三: 使用KVC, 在forKeyPath中指定transform类型
11. [self.imageView.layer setValue:@(0.5) forKeyPath:@"transform.scale.x"];
12. [self.imageView.layer setValue:@(M_PI_4) forKeyPath:@"transform.rotation"];

备注:CATransform3DMakeRotation(M_PI_4, 0, 0, 1)参数

1、利用transform属性可以设置旋转、缩放、平移等效果;

2、M_PI_4:表示四份之π,顺时针旋转45°;

3、后面的(0,0,1)表示旋转参考向量(即:绕Z轴向量旋转),修改参考向量可以做3D旋转效果;

4、函数含义:layer绕着Z轴顺时针旋转45°,也就是在x、y平面进行旋转。

效果示例图技术分享


备注-1: CALayer使用CATransform的坐标系:

技术分享


备注-2: CALayer使用KVC形式修改CATransform的Key:

技术分享

注:在苹果官方文档中搜索“CATransform3D Key Paths”,便能找到如何使用KVC修改layer的transform。


4、CALayer动画:

4-1、暂停动画:

技术分享


4-2、重新开始:

技术分享


iOS核心笔记——CALayer-基本使用