（一）CALayer（简介）
2016-09-22 本文已影响12人
DecadentOrMagic
笔者在学习CALayer的时候，从 文顶顶 、TerryLMay、GitBook等地方学到了很多东西，在此将要分享的内容基本上是对我所学内容的总结。感谢前人的分享，也希望各位看官不吝赐教。如果有侵犯到原作者的权益，请及时告知。
CALayer的简单介绍
- 在iOS中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView。
- 其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层，在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个层：
@property(nonatomic,readonly,retain) CALayer *layer;
- 当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是就完成了UIView的显示。
- 换句话说，UIView本身不具备显示的功能，拥有显示功能的是它内部的图层。
- UIView之所以能够显示，完全是因为内部的CALayer对象。因此，通过操作这个CALayer对象，可以很方便地调整UIView的一些界面属性，比如：阴影、圆角大小、边框宽度和颜色等。
- 注意：layer中不能直接接受UI框架中的东西
内容
- 通过 layer 设置边框的宽度和颜色
- 通过 layer 设置边框为圆角
- 在 layer 上添加一张图片
- 设置超出子图层的部分裁减掉
- 设置阴影
- 只要继承自 UIView 的都有 layer 属性
- 通过属性设置图片形变
- 通过KVC来设置形变
- 设置旋转
准备工作
本次讲解的所有代码都是写在控制器里面的，我们需要在storyBoard里面先拖两个控件：
@property (weak, nonatomic) IBOutlet UIView *customView;
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
然后，我们开始讲解代码。
1.通过 layer 设置边框的宽度和颜色
设置边框的宽度和颜色的效果图.png
实现代码：
- (void)setWidthAndColor
{
// 设置边框的宽度为20
self.customView.layer.borderWidth = 5;
// 设置边框的颜色
self.customView.layer.borderColor = [UIColor blackColor].CGColor;
}
在viewDidLoad方法里进行调用就可以实现。
2.通过 layer 设置边框为圆角
设置边框为圆角.png
实现代码：
- (void)setCornerRadius
{
self.customView.layer.borderWidth = 5;
self.customView.layer.borderColor = [UIColor blackColor].CGColor;
// 设置layer的圆角
self.customView.layer.cornerRadius = 20;
}
在viewDidLoad方法里进行调用就可以实现。
3.在 layer 上添加一张图片
在layer上添加一张图片.png
实现代码：
- (void)addImage
{
self.customView.layer.borderWidth = 5;
self.customView.layer.borderColor = [UIColor blackColor].CGColor;
self.customView.layer.cornerRadius = 20;
// 在view的图层上添加一个image，contents表示接受内容
// contents是id类型，可以接受内容，下面的实例让layer显示一张图片
self.customView.layer.contents = (id)[UIImage imageNamed:@"AI_200*200"].CGImage;
}
在viewDidLoad方法里进行调用就可以实现。
但是观察可发现四个圆角部分露了一个角出来，产生原因说明：
1.png
customview上的根layer.png
UIimage的图层.png
添加后.png
那是因为设置的image不是展示在主图层上的，而是显示在子图层上的。可以通过设置一个范围，设置超出主图层的部分把它给剪切掉。
4.设置超出子图层的部分裁减掉
设置超出子图层的部分裁减掉.png
实现代码：
- (void)setCut
{
self.customView.layer.borderWidth = 5;
self.customView.layer.borderColor = [UIColor blackColor].CGColor;
self.customView.layer.cornerRadius = 20;
// 设置超出子视图的部分裁减掉
// UI框架中使用的方法
// self.customView.clipsToBounds = YES;
self.customView.layer.masksToBounds = YES;//建议使用这一种
self.customView.layer.contents = (id)[UIImage imageNamed:@"AI_200*200"].CGImage;
}
在viewDidLoad方法里进行调用就可以实现。
5.设置阴影
设置阴影.png
实现代码：
- (void)setShadow
{
/**
* 设置阴影，不光需要设置阴影颜色，还应该设置阴影的偏移位和透明度。
* 因为如果不设置偏移位的话，那么阴影和layer完全重叠，且默认透明度为0（即完全透明）。
*/
// 注意：如果设置了超过主图层的部分减掉，则设置阴影不会有显示效果。
// 设置阴影颜色
self.customView.layer.shadowColor = [UIColor blackColor].CGColor;
// 设置阴影的偏移量，如果为正数，则代表为往右下偏移
self.customView.layer.shadowOffset = CGSizeMake(15, 5);
// 设置阴影的透明度(0~1之间，0表示完全透明)
self.customView.layer.shadowOpacity = 0.6;
}
在viewDidLoad方法里进行调用就可以实现。
6.只要继承自 UIView 的都有 layer 属性
只要是继承自 UIView 的都有layer属性.png
实现代码：
- (void)configImageView
{
self.iconView.layer.borderColor = [UIColor brownColor].CGColor;
self.iconView.layer.borderWidth = 5;
self.iconView.layer.cornerRadius = 20;
self.iconView.layer.masksToBounds = YES;
}
在viewDidLoad方法里进行调用就可以实现。
7.通过属性设置图片形变
通过属性设置图片形变.gif
在viewDidLoad调用 -configImageView 方法。
实现代码：
- (void)setTransform
{
// 通过UIView来设置（2D效果）
// self.iconView.transform = CGAffineTransformMakeTranslation(0, -100);
// 通过layer来设置(3D效果，x，y，z三个方向)
self.iconView.layer.transform = CATransform3DMakeTranslation(100, 20, 0);
}
在touchesBegan:withEvent:方法里面调用就可以实现。
8.通过KVC来设置形变
通过属性设置图片形变.gif
在viewDidLoad调用 -configImageView 方法。
实现代码：
- (void)setTransformByKVC
{
// 通过KVC来设置
NSValue *v = [NSValue valueWithCATransform3D:CATransform3DMakeTranslation(100, 20, 0)];
[self.iconView.layer setValue:v forKey:@"transform"];
// 如果只需要设置在某一个方向上的移动，可以参考下面代码
// 在x方向上向左移动100
// [self.iconView.layer setValue:@(-100) forKey:@"transform.translation.x"];
}
在touchesBegan:withEvent:方法里面调用就可以实现。
9.设置旋转
设置旋转.gif
在viewDidLoad调用 -configImageView 方法。
实现代码：
- (void)setRotation
{
// 旋转
self.iconView.layer.transform = CATransform3DMakeRotation(M_PI_4, 1, 1, 0.5);
}
在touchesBegan:withEvent:方法里面调用就可以实现。
