iOS开发 - CALayer

CALayer的基本使用

首先在界面上放一个UIView以及UIImageView，对应属性分别为yellowView和iconView，显示效果如下：（由于代码过于简单，这里不再给出）

- 给yellowView添加边框

self.yellowView.layer.borderWidth = 10;

- 设置边框颜色，这里需要注意使用CGColor

self.yellowView.layer.borderColor = [[UIColor redColor] CGColor];

- 设置阴影

//阴影的颜色
self.yellowView.layer.shadowColor = [[UIColor blackColor] CGColor];
//阴影的偏差
self.yellowView.layer.shadowOffset = CGSizeMake(10, 10);
//阴影的不透明度
self.yellowView.layer.shadowOpacity = 1.0;

经过上面一些属性的设置，运行显示如下：

接下来对iconView做一些设置，设置边框的操作同上

- 设置圆角以及阴影

//设置圆角
self.iconView.layer.cornerRadius = 10;
//超出主层范围的内容都剪掉
self.iconView.layer.masksToBounds = YES;
//设置阴影
self.iconView.layer.shadowColor = [[UIColor blackColor] CGColor];
self.iconView.layer.shadowOffset = CGSizeMake(10, 10);
self.iconView.layer.shadowOpacity = 1.0;

我们来看一下设置之后的运行效果：

发现没有显示阴影，原因是masksToBounds属性，该属性值设为YES表示超出主层边界的地方裁剪掉，所以导致阴影显示不出来，但是如果我们把它设置为NO，就会发现虽然阴影出来了但是圆角效果无效，所以，要想达到既有阴影又有圆角效果只能另寻它法了，这边不做讨论。

图像的3D效果

- 旋转

//旋转效果，第一个参数为旋转地角度，后面三个参数为空间坐标系的x,y,z,表示以该值向量所在轴为旋转轴进行旋转
self.iconView.layer.transform = CATransform3DMakeRotation(M_PI_4, 1,1, 0);

- 缩放

//缩放效果，宽度不变，高端变为原来的2倍
self.iconView.layer.transform = CATransform3DMakeScale(1, 2, 0);

- 移动

//移动效果，向右移动100个像素
self.iconView.layer.transform =CATransform3DMakeTranslation(100, 0, 0);

利用KVC的方式设置图像的3D属性

//将CATransform3D包装成NSValue类型
NSValue *transValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4, 1,1, 0)];
//利用KVC的方式给self.iconView.layer的transform赋值
[self.iconView.layer setValue:transValue forKey:@"transform"];

KVC的方式此处给出上面的一个例子，其余的可以使用该方法的属性可以参考官方文档，下面给出官方文档对应的截图：

创建一个新的图层：

//使用动态方法新建图层
//    CALayer *calayer = [[CALayer alloc] init];
//使用静态方法创建图层
CALayer *calayer = [CALayer layer];
//图层的背景色，注意使用CGColor
calayer.backgroundColor = [[UIColor redColor] CGColor];
//设置图层的尺寸
calayer.bounds = CGRectMake(0, 0, 100, 100);
//设置图层的位置，默认以图层的中心点为锚点
calayer.position = CGPointMake(100, 100);
//设置图层圆角
calayer.cornerRadius = 10;
//给图层添加一张图片
calayer.contents = (id)[UIImage imageNamed:@"karate-highkick-icon"].CGImage;
//超出图层部分裁剪掉
calayer.masksToBounds = YES;
//添加图层到父图层上
[self.view.layer addSublayer:calayer];

设置完成之后的显示效果为：

图层与UIView的区别为，图层只可以用来显示图像，UIView即可以显示图像，又可以响应事件，所以图层更加轻量级，具体如何选择，看具体情况而定。

以上为本人学习整理，如有错误请联系，感谢支持！