IOS-CALayer（图层）

BWLayer.m

 1 //
 2 //  BWLayer.m
 3 //  IOS_0222_CALayer
 4 //
 5 //  Created by ma c on 16/2/23.
 6 //  Copyright © 2016年 博文科技. All rights reserved.
 7 //
 8 
 9 #import "BWLayer.h"
10 
11 @implementation BWLayer
12 
13 ///只有明显的调用setNeedsDisplay,，才会调用drawInContext方法进行绘制
14 - (void)drawInContext:(CGContextRef)ctx
15 {
16     //红色
17     CGContextSetRGBFillColor(ctx, 1, 0, 0, 1);
18     //添加圆
19     CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 50, 50));
20     //实心绘制
21     CGContextFillPath(ctx);
22     
23 }
24 
25 @end

二、ViewController.m

  1 //
  2 //  ViewController.m
  3 //  IOS_0222_CALayer
  4 //
  5 //  Created by ma c on 16/2/22.
  6 //  Copyright © 2016年 博文科技. All rights reserved.
  7 //
  8 
  9 #import "ViewController.h"
 10 #import <QuartzCore/QuartzCore.h>
 11 #import "BWLayer.h"
 12 
 13 @interface ViewController ()
 14 
 15 @property (weak, nonatomic) IBOutlet UIView *layerView;
 16 @property (weak, nonatomic) IBOutlet UIImageView *imgView;
 17 @property (nonatomic, strong) CALayer *layer;
 18 
 19 
 20 @end
 21 
 22 @implementation ViewController
 23 /*
 24  一、CALayer
 25  UIView之所以能显示在屏幕上，完全是因为它内部的一个图层
 26  
 27  在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个层
 28  @property(nonatomic,readonly,retain) CALayer *layer;
 29  
 30  当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是就完成了UIView的显示
 31  
 32  换句话说，UIView本身不具备显示的功能，是它内部的层才有显示功能
 33  
 34  二、CALayer的属性
 35  宽度和高度
 36  @property CGRect bounds;
 37  
 38  位置(默认指中点，具体由anchorPoint决定)
 39  @property CGPoint position;
 40  
 41  锚点(x,y的范围都是0-1)，决定了position的含义
 42  @property CGPoint anchorPoint;
 43  
 44  背景颜色(CGColorRef类型)
 45  @property CGColorRef backgroundColor;
 46  
 47  形变属性
 48  @property CATransform3D transform;
 49  
 50  边框颜色(CGColorRef类型)
 51  @property CGColorRef borderColor;
 52  
 53  边框宽度
 54  @property CGFloat borderWidth;
 55  
 56  圆角半径
 57  @property CGColorRef borderColor;
 58  
 59  内容(比如设置为图片CGImageRef)
 60  @property(retain) id contents;
 61  
 62 三、关于CALayer的疑惑
 63  首先
 64  CALayer是定义在QuartzCore框架中的
 65  CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的
 66  UIColor、UIImage是定义在UIKit框架中的
 67  
 68  其次
 69  QuartzCore框架和CoreGraphics框架是可以跨平台使用的，在iOS和Mac OS X上都能使用
 70  但是UIKit只能在iOS中使用
 71  
 72  为了保证可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef
 73 
 74  四、UIView和CALayer的选择
 75  通过CALayer，就能做出跟UIImageView一样的界面效果
 76  
 77  既然CALayer和UIView都能实现相同的显示效果，那究竟该选择谁好呢？
 78  其实，对比CALayer，UIView多了一个事件处理的功能。也就是说，CALayer不能处理用户的触摸事件，而UIView可以
 79  所以，如果显示出来的东西需要跟用户进行交互的话，用UIView；如果不需要跟用户进行交互，用UIView或者CALayer都可以
 80  当然，CALayer的性能会高一些，因为它少了事件处理的功能，更加轻量级
 81 
 82  五、position和anchorPoint
 83  CALayer有2个非常重要的属性：position和anchorPoint
 84  
 85  @property CGPoint position;
 86  用来设置CALayer在父层中的位置
 87  以父层的左上角为原点(0, 0)
 88  
 89  @property CGPoint anchorPoint;
 90  称为“定位点”、“锚点”
 91  决定着CALayer身上的哪个点会在position属性所指的位置
 92  以自己的左上角为原点(0, 0)
 93  它的x、y取值范围都是0~1，默认值为（0.5, 0.5）
 94 
 95 
 96  六、隐式动画
 97  每一个UIView内部都默认关联着一个CALayer，我们可用称这个Layer为Root Layer（根层）
 98  
 99  所有的非Root Layer，也就是手动创建的CALayer对象，都存在着隐式动画
100  
101  什么是隐式动画？
102  当对非Root Layer的部分属性进行修改时，默认会自动产生一些动画效果
103  而这些属性称为Animatable Properties(可动画属性)
104  
105  列举几个常见的Animatable Properties：
106  bounds：用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画
107  backgroundColor：用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画
108  position：用于设置CALayer的位置。修改这个属性会产生平移动画
109  
110  可以通过动画事务(CATransaction)关闭默认的隐式动画效果
111  [CATransaction begin];
112  [CATransaction setDisableActions:YES];
113  self.myview.layer.position = CGPointMake(10, 10);
114  [CATransaction commit];
115  
116  七、其他
117  1.总结
118  无论采取哪种方法来自定义层，都必须调用CALayer的setNeedsDisplay方法才能正常绘图。
119  
120  2.UIView的详细显示过程
121  1>当UIView需要显示时，它内部的层会准备好一个CGContextRef(图形上下文)，然后调用delegate(这里就是UIView)的drawLayer:inContext:方法，并且传入已经准备好的CGContextRef对象。而UIView在drawLayer:inContext:方法中又会调用自己的drawRect:方法
122  
123  2>平时在drawRect:中通过UIGraphicsGetCurrentContext()获取的就是由层传入的CGContextRef对象，在drawRect:中完成的所有绘图都会填入层的CGContextRef中，然后被拷贝至屏幕
124  */
125 
126 - (void)viewDidLoad {
127     [super viewDidLoad];
128     
129 //    [self layerTransform];
130 //    [self createLayer];
131     [self customLayer2];
132 }
133 
134 ///自定义图层
135 - (void)customLayer1
136 {
137     BWLayer *layer = [BWLayer layer];
138     layer.bounds = CGRectMake(0, 0, 100, 100);
139     layer.backgroundColor = [UIColor blueColor].CGColor;
140     layer.position = CGPointMake(150, 100);
141     layer.anchorPoint = CGPointZero;
142     //重绘
143     [layer setNeedsDisplay];
144     [self.view.layer addSublayer:layer];
145 }
146 ///通过代理实现重绘
147 - (void)customLayer2
148 {
149     CALayer *layer = [CALayer layer];
150     layer.bounds = CGRectMake(0, 0, 100, 100);
151     layer.backgroundColor = [UIColor blueColor].CGColor;
152     layer.position = CGPointMake(150, 100);
153     layer.anchorPoint = CGPointZero;
154     //重绘
155     [layer setNeedsDisplay];
156     layer.delegate = self;
157     [self.view.layer addSublayer:layer];
158     
159 }
160 //图层代理方法
161 - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
162 {
163     CGContextSetRGBFillColor(ctx, 1, 0, 0, 1);
164     CGContextAddRect(ctx, CGRectMake(0, 0, 50, 50));
165     CGContextFillPath(ctx);
166 }
167 
168 
169 ///新建图层
170 - (void)createLayer
171 {
172     CALayer *layer = [CALayer layer];
173     layer.backgroundColor = [UIColor redColor].CGColor;
174     layer.bounds = CGRectMake(0, 0, 100, 100);
175     
176     layer.position = CGPointMake(200, 100);
177     layer.anchorPoint = CGPointZero;
178     
179     layer.cornerRadius = 10;
180     layer.masksToBounds = YES;
181     
182     //layer.contents = (id)[UIImage imageNamed:@"lufy.png"].CGImage;
183     [self.view.layer addSublayer:layer];
184     
185     self.layer = layer;
186 }
187 //隐式动画
188 - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
189 {
190     //关闭隐式动画
191     [CATransaction begin];
192     [CATransaction setDisableActions:YES];
193     
194     self.layer.backgroundColor = [UIColor greenColor].CGColor;
195     self.layer.opacity = 0.5;
196     
197     [CATransaction commit];
198     
199 }
200 
201 - (void)layerTransform
202 {
203     //3D缩放
204 //    self.imgView.layer.transform = CATransform3DMakeScale(1.5, 0.5, 0);
205     //3D平移
206 //    self.imgView.layer.transform = CATransform3DMakeTranslation(30, 30, 0);
207     //2D旋转
208 //    self.imgView.transform = CGAffineTransformMakeRotation(M_PI_4);
209     //3D旋转（确定旋转角度和旋转轴）
210 //    self.imgView.layer.transform = CATransform3DMakeRotation(M_PI_4, 1, 1, 0);
211     
212 //    NSValue *value = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4, 0, 0, 1)];
213 //    [self.imgView.layer setValue:value forKey:@"transform"];
214     
215 //    [self.imgView.layer setValue:@(M_PI_2) forKeyPath:@"transform.rotation"];
216     
217 //    [self.imgView.layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 2, 0)] forKeyPath:@"transform"];
218     
219     //可以转递那些key path，在官方文档搜索“CATransform3D key paths”
220     [self.imgView.layer setValue:@(0.5) forKeyPath:@"transform.scale.y"];
221 }
222 
223 - (void)basicLayer
224 {
225     //边框宽度
226     self.layerView.layer.borderWidth = 10;
227     //边框颜色
228     self.layerView.layer.borderColor = [UIColor greenColor].CGColor;
229     //圆角
230     self.layerView.layer.cornerRadius = 10;
231     //超出根层边框范围的内容都剪掉
232     //self.layerView.layer.masksToBounds = YES;//此属性和阴影有冲突
233     
234     //阴影颜色
235     self.layerView.layer.shadowColor = [UIColor darkGrayColor].CGColor;
236     //阴影偏差
237     self.layerView.layer.shadowOffset = CGSizeMake(10, 10);
238     //阴影不透明度
239     self.layerView.layer.shadowOpacity = 0.5;
240     
241 }
242 
243 
244 
245 @end

 

转载于:https://www.cnblogs.com/oc-bowen/p/5209543.html