首页 > 代码库 > 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-基本使用