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