IOS-CALayer(图层)
2016-02-23 13:06
495 查看
BWLayer.m
二、ViewController.m
// // BWLayer.m // IOS_0222_CALayer // // Created by ma c on 16/2/23. // Copyright © 2016年 博文科技. All rights reserved. // #import "BWLayer.h" @implementation BWLayer ///只有明显的调用setNeedsDisplay,,才会调用drawInContext方法进行绘制 - (void)drawInContext:(CGContextRef)ctx { //红色 CGContextSetRGBFillColor(ctx, 1, 0, 0, 1); //添加圆 CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 50, 50)); //实心绘制 CGContextFillPath(ctx); } @end
二、ViewController.m
// // ViewController.m // IOS_0222_CALayer // // Created by ma c on 16/2/22. // Copyright © 2016年 博文科技. All rights reserved. // #import "ViewController.h" #import <QuartzCore/QuartzCore.h> #import "BWLayer.h" @interface ViewController () @property (weak, nonatomic) IBOutlet UIView *layerView; @property (weak, nonatomic) IBOutlet UIImageView *imgView; @property (nonatomic, strong) CALayer *layer; @end @implementation ViewController /* 一、CALayer UIView之所以能显示在屏幕上,完全是因为它内部的一个图层 在创建UIView对象时,UIView内部会自动创建一个图层(即CALayer对象),通过UIView的layer属性可以访问这个层 @property(nonatomic,readonly,retain) CALayer *layer; 当UIView需要显示到屏幕上时,会调用drawRect:方法进行绘图,并且会将所有内容绘制在自己的图层上,绘图完毕后,系统会将图层拷贝到屏幕上,于是就完成了UIView的显示 换句话说,UIView本身不具备显示的功能,是它内部的层才有显示功能 二、CALayer的属性 宽度和高度 @property CGRect bounds; 位置(默认指中点,具体由anchorPoint决定) @property CGPoint position; 锚点(x,y的范围都是0-1),决定了position的含义 @property CGPoint anchorPoint; 背景颜色(CGColorRef类型) @property CGColorRef backgroundColor; 形变属性 @property CATransform3D transform; 边框颜色(CGColorRef类型) @property CGColorRef borderColor; 边框宽度 @property CGFloat borderWidth; 圆角半径 @property CGColorRef borderColor; 内容(比如设置为图片CGImageRef) @property(retain) id contents; 三、关于CALayer的疑惑 首先 CALayer是定义在QuartzCore框架中的 CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的 UIColor、UIImage是定义在UIKit框架中的 其次 QuartzCore框架和CoreGraphics框架是可以跨平台使用的,在iOS和Mac OS X上都能使用 但是UIKit只能在iOS中使用 为了保证可移植性,QuartzCore不能使用UIImage、UIColor,只能使用CGImageRef、CGColorRef 四、UIView和CALayer的选择 通过CALayer,就能做出跟UIImageView一样的界面效果 既然CALayer和UIView都能实现相同的显示效果,那究竟该选择谁好呢? 其实,对比CALayer,UIView多了一个事件处理的功能。也就是说,CALayer不能处理用户的触摸事件,而UIView可以 所以,如果显示出来的东西需要跟用户进行交互的话,用UIView;如果不需要跟用户进行交互,用UIView或者CALayer都可以 当然,CALayer的性能会高一些,因为它少了事件处理的功能,更加轻量级 五、position和anchorPoint CALayer有2个非常重要的属性:position和anchorPoint @property CGPoint position; 用来设置CALayer在父层中的位置 以父层的左上角为原点(0, 0) @property CGPoint anchorPoint; 称为“定位点”、“锚点” 决定着CALayer身上的哪个点会在position属性所指的位置 以自己的左上角为原点(0, 0) 它的x、y取值范围都是0~1,默认值为(0.5, 0.5) 六、隐式动画 每一个UIView内部都默认关联着一个CALayer,我们可用称这个Layer为Root Layer(根层) 所有的非Root Layer,也就是手动创建的CALayer对象,都存在着隐式动画 什么是隐式动画? 当对非Root Layer的部分属性进行修改时,默认会自动产生一些动画效果 而这些属性称为Animatable Properties(可动画属性) 列举几个常见的Animatable Properties: bounds:用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画 backgroundColor:用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画 position:用于设置CALayer的位置。修改这个属性会产生平移动画 可以通过动画事务(CATransaction)关闭默认的隐式动画效果 [CATransaction begin]; [CATransaction setDisableActions:YES]; self.myview.layer.position = CGPointMake(10, 10); [CATransaction commit]; 七、其他 1.总结 无论采取哪种方法来自定义层,都必须调用CALayer的setNeedsDisplay方法才能正常绘图。 2.UIView的详细显示过程 1>当UIView需要显示时,它内部的层会准备好一个CGContextRef(图形上下文),然后调用delegate(这里就是UIView)的drawLayer:inContext:方法,并且传入已经准备好的CGContextRef对象。而UIView在drawLayer:inContext:方法中又会调用自己的drawRect:方法 2>平时在drawRect:中通过UIGraphicsGetCurrentContext()获取的就是由层传入的CGContextRef对象,在drawRect:中完成的所有绘图都会填入层的CGContextRef中,然后被拷贝至屏幕 */ - (void)viewDidLoad { [super viewDidLoad]; // [self layerTransform]; // [self createLayer]; [self customLayer2]; } ///自定义图层 - (void)customLayer1 { BWLayer *layer = [BWLayer layer]; layer.bounds = CGRectMake(0, 0, 100, 100); layer.backgroundColor = [UIColor blueColor].CGColor; layer.position = CGPointMake(150, 100); layer.anchorPoint = CGPointZero; //重绘 [layer setNeedsDisplay]; [self.view.layer addSublayer:layer]; } ///通过代理实现重绘 - (void)customLayer2 { CALayer *layer = [CALayer layer]; layer.bounds = CGRectMake(0, 0, 100, 100); layer.backgroundColor = [UIColor blueColor].CGColor; layer.position = CGPointMake(150, 100); layer.anchorPoint = CGPointZero; //重绘 [layer setNeedsDisplay]; layer.delegate = self; [self.view.layer addSublayer:layer]; } //图层代理方法 - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx { CGContextSetRGBFillColor(ctx, 1, 0, 0, 1); CGContextAddRect(ctx, CGRectMake(0, 0, 50, 50)); CGContextFillPath(ctx); } ///新建图层 - (void)createLayer { CALayer *layer = [CALayer layer]; layer.backgroundColor = [UIColor redColor].CGColor; layer.bounds = CGRectMake(0, 0, 100, 100); layer.position = CGPointMake(200, 100); layer.anchorPoint = CGPointZero; layer.cornerRadius = 10; layer.masksToBounds = YES; //layer.contents = (id)[UIImage imageNamed:@"lufy.png"].CGImage; [self.view.layer addSublayer:layer]; self.layer = layer; } //隐式动画 - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { //关闭隐式动画 [CATransaction begin]; [CATransaction setDisableActions:YES]; self.layer.backgroundColor = [UIColor greenColor].CGColor; self.layer.opacity = 0.5; [CATransaction commit]; } - (void)layerTransform { //3D缩放 // self.imgView.layer.transform = CATransform3DMakeScale(1.5, 0.5, 0); //3D平移 // self.imgView.layer.transform = CATransform3DMakeTranslation(30, 30, 0); //2D旋转 // self.imgView.transform = CGAffineTransformMakeRotation(M_PI_4); //3D旋转(确定旋转角度和旋转轴) // self.imgView.layer.transform = CATransform3DMakeRotation(M_PI_4, 1, 1, 0); // NSValue *value = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4, 0, 0, 1)]; // [self.imgView.layer setValue:value forKey:@"transform"]; // [self.imgView.layer setValue:@(M_PI_2) forKeyPath:@"transform.rotation"]; // [self.imgView.layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 2, 0)] forKeyPath:@"transform"]; //可以转递那些key path,在官方文档搜索“CATransform3D key paths” [self.imgView.layer setValue:@(0.5) forKeyPath:@"transform.scale.y"]; } - (void)basicLayer { //边框宽度 self.layerView.layer.borderWidth = 10; //边框颜色 self.layerView.layer.borderColor = [UIColor greenColor].CGColor; //圆角 self.layerView.layer.cornerRadius = 10; //超出根层边框范围的内容都剪掉 //self.layerView.layer.masksToBounds = YES;//此属性和阴影有冲突 //阴影颜色 self.layerView.layer.shadowColor = [UIColor darkGrayColor].CGColor; //阴影偏差 self.layerView.layer.shadowOffset = CGSizeMake(10, 10); //阴影不透明度 self.layerView.layer.shadowOpacity = 0.5; } @end
相关文章推荐
- iOS海哥开发笔记 (海哥原创,线程安全的几种加锁方法)
- iOS海哥开发笔记 (海哥原创,iOS 之应用性能调优的25个建议和技巧
- iOS小明开发笔记(十) (Xcode统计代码行数)
- iOS海哥开发笔记 (海哥原创,iOS 之API概述)
- iOS海哥开发笔记 (海哥原创,iOS 之Autolayout(VFL)(二))
- iOS海哥开发笔记 (海哥原创,iOS 之Autolayout(VFL)(一))
- iOS海哥开发笔记 (海哥原创,iOS 之NSBundle介绍)
- iOS海哥开发笔记 (海哥原创,iOS 之mac终端命令大全介绍 )
- iOS小明开发笔记(九) (tableViewCell侧滑显示多个按钮)
- iOS海哥开发笔记 (海哥原创,iOS 之同步请求、异步请求、GET请求、POST请求 )
- ios海哥开发笔记 (海哥原创,iOS 之iOS 之NSIndexPath )
- ios海哥开发笔记 (海哥原创,iOS 之NSCoding )
- iOS软件安装图文教程(免证书)
- IOS系列——NStimer
- IOS比较常用的第三方组件及应用源代码(持续更新中)
- iOS海哥开发笔记 (海哥原创,NSCharacterSet 简单用法)
- ios海哥开发笔记 (海哥原创,iOS缓存机制NSUserDefaults)
- iOS开发——判断手机格式
- iOS海哥开发笔记 (海哥原创,iOS 通知NSNotificationCenter)
- iOS海哥开发笔记 (海哥原创,retain、strong、weak、assign区别)