iOS UIView & CALayer
其实UIView 之所以能显示在屏幕上, 完全是因为它内部的一个图层, 在创建UIView对象时, UIView内部会自动创建一个图层(即CALayer对象), 通过UIView的layer属性可以访问到该层. <br />
当UIView需要显示在屏幕上时, 会调用drawRect: 方法进行绘图, 并将所有内容绘制在自己的图层上, 绘图完毕后, 系统会将图层拷贝到屏幕上, 于是UIView完成了显示. <br />
也就是说, UIView本身不具备显示的功能, 拥有显示功能的是它内部图层. <br />
通过操作这个CALayer对象, 可以很方便地调整UIView的一些界面属性，比如：阴影、圆角大小、边框宽度和颜色等。
// 注意:
默认图层是有阴影的, 只不过是透明的.
设置图层边框时, 在图层中使用CoreGraphics的CGColorRef 来设置颜色
CALayer & UIView 区别
1. UIView是UIKit的(只能iOS使用)，CALayer是QuartzCore的(iOS和mac os通用)
2. UIView继承UIResponder,CALayer继承NSObject,UIView比CALayer多了一个事件处理的功能，也就是说，CALayer不能处理用户的触摸事件，而UIView可以
3. UIView来自CALayer，是CALayer的高层实现和封装，UIView的所有特性来源于CALayer支持
4. CABasicAnimation，CAAnimation，CAKeyframeAnimation等动画类都需要加到CALayer上
需要明确的概念
1. CALayer是定义在QuartzCore框架中的(Core Animation)
2. CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的
3. UIColor、UIImage是定义在UIKit框架中的
4. QuartzCore框架和CoreGraphics框架是可以跨平台使用的，在iOS和Mac OS X上都能使用, 但是UIKit只能在iOS中使用, 所以为了保证可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef
自定义CALayer:
CALayer *layer = [CALayer layer];
layer.frame = CGRectMake(30, 30, 100, 100);
layer.backgroundColor = [UIColor redColor].CGColor;
layer.contents = (id)[UIImage imageNamed:@"bgimg"].CGImage;
layer.conrnerRadius = 3;
[view3.layer addSublayer:layer];
// 注: CALayer定义在QuartzCore框架中的. CGImageRef、CGColorRef两种数据类型定义在CoreGraphics框架中, .UIColor、UIImage定义在UIKit框架中.QuartzCore框架和CoreGraphics框架是可以跨平台使用的，在iOS和Mac OSX上都能使用.但是UIKit框架只能在iOS中使用.所以为了保证可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef.
CALayer属性表
CALayer 的 position属性 & anchorPoint属性
这两个属性是配合使用的. position它是用来设置当前的layer在父控件当中的位置的, 所以它的坐标原点.以父控件的左上角为(0.0)点.<br />
anchorPoint它是决定CALayer身上哪一个点会在position属性所指的位置anchorPoint是以当前的layer左上角为原点(0.0),它的取值范围是0~1,默认位置在中间也就是(0.5,0.5).anchorPoint又称锚点.就是把锚点定到position所指的位置. <br />
两者结合使用.想要修改某个控件的位置,我们可以设置它的position点.设置完毕后.layer身上的anchorPoint会自动定到position所在的位置.
圆角矩形
// 1. 圆角矩形
UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(20, 50, 100, 100)];
view1.backgroundColor = [UIColor yellowColor];
[self.view addSubview:view1];
view1.layer.cornerRadius = 10;
view1.layer.borderColor = [UIColor redColor].CGColor;
view1.layer.borderWidth = 10;
Snip20170317_1.png
圆
// 2. 圆形切图
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(140, 50, 100, 100)];
[self.view addSubview:view];
view.backgroundColor = [UIColor greenColor];
// 2.1 圆角
view.layer.cornerRadius = 50;
// 2.2 边框
view.layer.borderWidth = 5;
view.layer.borderColor = [UIColor whiteColor].CGColor;
// 2.3 内容
view.layer.contents = (id)[UIImage imageNamed:@"AppIcon40x40"].CGImage;
// 2.5 超过子图层的部分裁减掉
view.layer.masksToBounds = YES; // 如果设置了该属性, 阴影将消失
// 2.4 设置阴影图片
view.layer.shadowColor = [UIColor greenColor].CGColor;
view.layer.shadowOffset = CGSizeMake(10, 10);
view.layer.shadowOpacity = 0.6;
Snip20170317_2.png
上2圆角矩形
UIView *view3 = [[UIView alloc] initWithFrame:CGRectMake(260, 50, 100, 100)];
[self.view addSubview:view3];
view3.backgroundColor = [UIColor cyanColor];
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view3.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(15, 0)];
CAShapeLayer*maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = view3.bounds;
maskLayer.path = maskPath.CGPath;
view3.layer.mask = maskLayer;
Snip20170317_3.png
奇特图形
// 4. 奇特图形
UIView *view4 = [[UIView alloc] initWithFrame:CGRectMake(20, 170, 100, 100)];
[self.view addSubview:view4];
view4.backgroundColor = [UIColor greenColor];
//// Color Declarations
UIColor* color5 = [UIColor colorWithRed: 1 green: 0.879 blue: 0 alpha: 1];
//// Oval Drawing
CGRect ovalRect = CGRectMake(0, 0, 100, 100);
UIBezierPath* ovalPath = [UIBezierPath bezierPath];
[ovalPath addArcWithCenter: CGPointMake(0, 0) radius: ovalRect.size.width / 2 startAngle: 180 * M_PI/180 endAngle: 129 * M_PI/180 clockwise: YES];
[ovalPath addLineToPoint: CGPointMake(0, 0)];
[ovalPath closePath];
CGAffineTransform ovalTransform = CGAffineTransformMakeTranslation(CGRectGetMidX(ovalRect), CGRectGetMidY(ovalRect));
ovalTransform = CGAffineTransformScale(ovalTransform, 1, ovalRect.size.height / ovalRect.size.width);
[ovalPath applyTransform: ovalTransform];
[color5 setFill];
[ovalPath fill];
CAShapeLayer *layer3 = [[CAShapeLayer alloc] init];
layer3.frame = view4.bounds;
layer3.path = ovalPath.CGPath;
view4.layer.mask = layer3;
Snip20170317_4.png
mask 层的使用
// 5. mask
UIView *view5 = [[UIView alloc] initWithFrame:CGRectMake(140, 170, 100, 100)];
[self.view addSubview:view5];
view5.backgroundColor = [UIColor greenColor];
//// Color Declarations
UIColor* color6 = [UIColor colorWithRed: 1 green: 0.879 blue: 0 alpha: 1];
//// Oval Drawing
CGRect ovalRect6 = CGRectMake(0, 0, 100, 100);
UIBezierPath* ovalPath6 = [UIBezierPath bezierPath];
[ovalPath6 addArcWithCenter: CGPointMake(0, 0) radius: ovalRect.size.width / 2 startAngle: 180 * M_PI/180 endAngle: 129 * M_PI/180 clockwise: YES];
[ovalPath6 addLineToPoint: CGPointMake(0, 0)];
[ovalPath6 closePath];
CGAffineTransform ovalTransform6 = CGAffineTransformMakeTranslation(CGRectGetMidX(ovalRect6), CGRectGetMidY(ovalRect6));
ovalTransform6 = CGAffineTransformScale(ovalTransform6, 1, ovalRect.size.height / ovalRect.size.width);
[ovalPath6 applyTransform: ovalTransform6];
[color6 setFill];
[ovalPath6 fill];
view5.layer.contents = (id)[UIImage imageNamed:@"AppIcon40x40"].CGImage;
CAShapeLayer *layer5 = [[CAShapeLayer alloc] init];
layer5.frame = view5.bounds;
layer5.path = ovalPath6.CGPath;
view5.layer.mask = layer5;
Snip20170317_6.png
添加多个图层
// 6. 添加多个图层
UIView *view6 = [[UIView alloc] initWithFrame:CGRectMake(260, 170, 100, 100)];
[self.view addSubview:view6];
view6.backgroundColor = [UIColor greenColor];
view6.layer.backgroundColor = [UIColor redColor].CGColor;
view6.layer.cornerRadius = 10;
view6.layer.borderWidth = 5;
view6.layer.borderColor = [UIColor whiteColor].CGColor;
CALayer *layer6_1 = [CALayer layer];
layer6_1.backgroundColor = [UIColor blueColor].CGColor;
layer6_1.frame = CGRectMake(10, 10, 80, 80);
layer6_1.cornerRadius = 40;
layer6_1.borderWidth = 15;
layer6_1.borderColor = [UIColor whiteColor].CGColor;
[view6.layer addSublayer:layer6_1];
Snip20170317_8.png
- Layer跟UIView之间的关系可以这么理解，只有root layer才是真正跟view打交道的，一个view并不代表一个layer
- layer的坐标系统，anchorPoint这个是相对于自身而言的，position是相对于父layer而言的
