[iOS UI进阶 - 6.0] CALayer
- CALayer的基本属性
- CALayer和UIView的关系
- position和anchorPoint的作用
其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层
在创建UIView对象时,UIView内部会自动创建一个图层(即CALayer对象),通过UIView的layer属性可以访问这个层
@property(nonatomic,readonly,retain) CALayer *layer;
当UIView需要显示到屏幕上时,会调用drawRect:方法进行绘图,并且会将所有内容绘制在自己的图层上,绘图完毕后,系统会将图层拷贝到屏幕上,于是就完成了UIView的显示
换句话说,UIView本身不具备显示的功能,是它内部的层才有显示功能
阴影
圆角大小
边框宽度和颜色
… …
还可以给图层添加动画,来实现一些比较炫酷的效果
边框宽度
@property CGFloat borderWidth;
圆角半径
@property CGColorRef borderColor;
内容(比如设置为图片CGImageRef)
@property(retain) id contents;

//
// ViewController.m
// CALayerTest
//
// Created by hellovoidworld on 15/1/14.
// Copyright (c) 2015年 hellovoidworld. All rights reserved.
// #import "ViewController.h" @interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *orangeView; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib. // [self testBasicLayer]; // [self testOrangeView]; // [self testImageView]; [self testTransform];
} /** 基本属性 */
- (void) testBasicLayer {
// 创建一个图层
CALayer *layer = [[CALayer alloc] init];
// 设置图层边框颜色
layer.borderColor = [UIColor blueColor].CGColor;
// 设置图层边框粗细,边框是占据view内的尺寸的
layer.borderWidth = ;
//
layer.frame = CGRectMake(, , , );
layer.backgroundColor = [UIColor redColor].CGColor;
layer.cornerRadius = ;
// layer.masksToBounds = YES; // UIImage *image = [UIImage imageNamed:@"M3Mini"];
// layer.contents = (id)image.CGImage; layer.shadowColor = [UIColor blackColor].CGColor;
layer.shadowOffset = CGSizeMake(, );
layer.shadowOpacity = 0.5; [self.view.layer addSublayer:layer];
} /** UIView的圆角+阴影 */
- (void) testOrangeView {
self.orangeView.layer.shadowColor = [UIColor blackColor].CGColor;
self.orangeView.layer.shadowOffset = CGSizeMake(, );
self.orangeView.layer.shadowOpacity = 0.5;
self.orangeView.layer.cornerRadius = ; self.orangeView.layer.borderWidth = ;
} /** ImageView的圆角+阴影效果 */
- (void) testImageView {
// 用于产生阴影的辅助view,作为父view,显示在底层
UIView *shadowView = [[UIView alloc] init];
shadowView.frame = CGRectMake(, , , );
shadowView.layer.cornerRadius = ;
shadowView.backgroundColor = [UIColor redColor]; // 产生阴影
shadowView.layer.shadowColor = [UIColor blueColor].CGColor;
shadowView.layer.shadowOffset = CGSizeMake(, );
shadowView.layer.shadowOpacity = 0.7; // 用于显示圆角内容的imageView,作为子view,显示在表层
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"M3Mini"]];
imageView.frame = shadowView.bounds;
imageView.layer.cornerRadius = shadowView.layer.cornerRadius ; // 圆角裁剪
imageView.layer.masksToBounds = YES; // “合成”两个view
[shadowView addSubview:imageView]; // 添加到屏幕
[self.view addSubview:shadowView];
} /** 3D transform */
- (void) testTransform {
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"M3Mini"]];
imageView.frame = CGRectMake(, , , ); // 1.从3D的x、y、z轴三个向量的缩放
// imageView.layer.transform = CATransform3DMakeScale(2, 2, 0); // 2.沿着x=1,y=1,z=0的向量为轴旋转
// imageView.layer.transform = CATransform3DMakeRotation(M_PI_4, 1, 1, 0); // 3.使用key paths设置
// 3.1使用整个transform对象来设置,3D向量旋转
// NSValue *value = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4, 1, 1, 0)];
// [imageView.layer setValue:value forKeyPath:@"transform"]; // 3.2直接利用rotation来设置,2D旋转(跟view的transform旋转一样)
[imageView.layer setValue:@(M_PI_4) forKeyPath:@"transform.rotation"]; [self.view addSubview:imageView];
} - (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
} @end
- (void) testImageView {
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"M3Mini"]];
imageView.frame = CGRectMake(, , , );
imageView.layer.cornerRadius = ;
imageView.layer.masksToBounds = YES; imageView.layer.shadowColor = [UIColor blueColor].CGColor;
imageView.layer.shadowOffset = CGSizeMake(, );
imageView.layer.shadowOpacity = 0.7; [self.view addSubview:imageView];
}

- (void) testImageView {
// 用于产生阴影的辅助view,作为父view,显示在底层
UIView *shadowView = [[UIView alloc] init];
shadowView.frame = CGRectMake(, , , );
shadowView.layer.cornerRadius = ;
shadowView.backgroundColor = [UIColor redColor]; // 产生阴影
shadowView.layer.shadowColor = [UIColor blueColor].CGColor;
shadowView.layer.shadowOffset = CGSizeMake(, );
shadowView.layer.shadowOpacity = 0.7; // 用于显示圆角内容的imageView,作为子view,显示在表层
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"M3Mini"]];
imageView.frame = shadowView.bounds;
imageView.layer.cornerRadius = shadowView.layer.cornerRadius ; // 圆角裁剪
imageView.layer.masksToBounds = YES; // “合成”两个view
[shadowView addSubview:imageView]; // 添加到屏幕
[self.view addSubview:shadowView];
}

CALayer是定义在QuartzCore框架中的
CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的
UIColor、UIImage是定义在UIKit框架中的
其次
QuartzCore框架和CoreGraphics框架是可以跨平台使用的,在iOS和Mac OS X上都能使用
但是UIKit只能在iOS中使用
为了保证可移植性,QuartzCore不能使用UIImage、UIColor,只能使用CGImageRef、CGColorRef
既然CALayer和UIView都能实现相同的显示效果,那究竟该选择谁好呢?
其实,对比CALayer,UIView多了一个事件处理的功能。也就是说,CALayer不能处理用户的触摸事件,而UIView可以
所以,如果显示出来的东西需要跟用户进行交互的话,用UIView;如果不需要跟用户进行交互,用UIView或者CALayer都可以
当然,CALayer的性能会高一些,因为它少了事件处理的功能,更加轻量级
@property CGPoint position;
用来设置CALayer在父层中的位置
以父层的左上角为原点(0, 0)
@property CGPoint anchorPoint;
称为“定位点”、“锚点”
决定着CALayer身上的哪个点会在position属性所指的位置
以自己的左上角为原点(0, 0)
它的x、y取值范围都是0~1,默认值为(0.5, 0.5)
CALayer *layer = [[CALayer alloc] init];
layer.backgroundColor = [UIColor redColor].CGColor;
layer.frame = CGRectMake(, , , );
layer.position = CGPointMake(, );
// anchorPoint默认是(0.5,0.5),即中心点
layer.anchorPoint = CGPointMake(,); [self.view.layer addSublayer:layer];

所有的非Root Layer,也就是手动创建的CALayer对象,都存在着隐式动画
什么是隐式动画?
当对非Root Layer的部分属性进行修改时,默认会自动产生一些动画效果
而这些属性称为Animatable Properties(可动画属性)
列举几个常见的Animatable Properties:
bounds:用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画
backgroundColor:用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画
position:用于设置CALayer的位置。修改这个属性会产生平移动画
[CATransaction begin];
[CATransaction setDisableActions:YES];
self.myview.layer.position = CGPointMake(, );
[CATransaction commit];
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
// 缩放
self.layer.frame = CGRectMake(self.layer.position.x, self.layer.position.y, , );
// 位移
self.layer.position = CGPointMake(, );
// 背景色
self.layer.backgroundColor = [UIColor blueColor].CGColor;
}

//
// HVWLayer.m
// CALayerTest
//
// Created by hellovoidworld on 15/1/14.
// Copyright (c) 2015年 hellovoidworld. All rights reserved.
// #import "HVWLayer.h" @implementation HVWLayer /**
* 必须调用一次layer的setNeedDisplay方法,才能触发此方法
*/
- (void)drawInContext:(CGContextRef)ctx {
NSLog(@"%@ - drawInContext", [self class]); // 绿色
CGContextSetRGBFillColor(ctx, , , , );
// 矩形
CGContextFillRect(ctx, CGRectMake(, , , ));
CGContextFillPath(ctx);
} @end
- (void) diyLayer1 {
HVWLayer *layer = [[HVWLayer alloc] init];
layer.frame = CGRectMake(, , , );
layer.backgroundColor = [UIColor grayColor].CGColor;
// 必须调用重绘,才能触发layer的drawInContent:方法
[layer setNeedsDisplay]; [self.view.layer addSublayer:layer];
}

- (void) diyLayer2 {
CALayer *layer = [[CALayer alloc] init];
layer.bounds = CGRectMake(, , , );
layer.anchorPoint = CGPointZero;
layer.backgroundColor = [UIColor grayColor].CGColor;
layer.delegate = self; // 必须要进行重绘
[layer setNeedsDisplay]; [self.view.layer addSublayer:layer];
} #pragma mark - layer代理方法
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
// 绿色
CGContextSetRGBFillColor(ctx, , , , );
// 矩形
CGContextFillRect(ctx, CGRectMake(, , , ));
CGContextFillPath(ctx);
}

- view准备一个图层上下文Layer Context Ref
- 调用[view.layer.delegate drawLayer:inContext:],传入上下文
- 在drawLayer:inContext:内会调用view的drawRect:方法
- 所以drawRect:内实现的绘图方法,会画到layer上
- 系统把layer上的内容描绘到屏幕,完成view的显示
//
// HVWView.m
// CALayerTest
//
// Created by hellovoidworld on 15/1/14.
// Copyright (c) 2015年 hellovoidworld. All rights reserved.
// #import "HVWView.h" @implementation HVWView - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
NSLog(@"%@ - drawLayer", [self class]);
[super drawLayer:layer inContext:ctx];
} - (void)drawRect:(CGRect)rect {
NSLog(@"%@ - drawRect", [self class]);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSetRGBFillColor(ctx, , , , );
CGContextFillEllipseInRect(ctx, CGRectMake(, , , ));
CGContextFillPath(ctx);
} @end
//
// HVWLayer.m
// CALayerTest
//
// Created by hellovoidworld on 15/1/14.
// Copyright (c) 2015年 hellovoidworld. All rights reserved.
// #import "HVWLayer.h" @implementation HVWLayer - (void)drawInContext:(CGContextRef)ctx {
NSLog(@"%@ - drawInContext", [self class]); // 绿色
CGContextSetRGBFillColor(ctx, , , , );
// 矩形
CGContextFillRect(ctx, CGRectMake(, , , ));
CGContextFillPath(ctx);
} @end
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib. // 创建view
HVWView *hvwView = [[HVWView alloc] init];
hvwView.backgroundColor = [UIColor grayColor];
hvwView.frame = CGRectMake(, , , ); // 创建layer
HVWLayer *layer = [[HVWLayer alloc] init];
layer.frame = CGRectMake(, , , );
layer.backgroundColor = [UIColor blueColor].CGColor; // 必须要重绘才能调用layer的drawInContext
[layer setNeedsDisplay]; // 配置layer到view,会设置layer的delegate就是那个view
[hvwView.layer addSublayer:layer]; [self.view addSubview:hvwView];
// [self.view.layer addSublayer:layer];
}

2015-01-14 21:59:45.560 CALayerTest3[3246:115305] HVWView - drawRect
[iOS UI进阶 - 6.0] CALayer的更多相关文章
- iOS UI进阶-2.0 CALayer
在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮.一个文本标签.一个文本输入框.一个图标等等,这些都是UIView 其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图 ...
- iOS UI进阶-1.0 Quartz2D
概述 Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac系统.Quartz 2D能完成的工作: 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图像) 读取\生成PDF ...
- [iOS UI进阶 - 3.0] 触摸事件的基本处理
A.需要掌握和练习的 1.介绍事件类型2.通过按钮的事件处理引出view的事件处理3.响应者对象 --> UIResponder --> UIView4.view的拖拽* 实现触摸方法,打 ...
- [iOS UI进阶 - 2.0] 彩票Demo v1.0
A.需求 1.模仿“网易彩票”做出有5个导航页面和相应功能的Demo 2.v1.0 版本搭建基本框架 code source:https://github.com/hellovoidworld/H ...
- iOS UI进阶-4.0 地图与定位
在移动互联网时代,移动app能解决用户的很多生活琐事,比如 导航:去任意陌生的地方 周边:找餐馆.找酒店.找银行.找电影院 在上述应用中,都用到了地图和定位功能,在iOS开发中,要想加入这2大功能 ...
- [iOS UI进阶 - 4.0] 涂鸦app Demo
A.需求 1.超简易画图,只有一种画笔 2.清屏功能 3.回退功能 4.保存功能 5.使用了cocos2D code source: https://github.com/hellovoidwor ...
- iOS UI进阶-3.0 核心动画
Core Animation是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍,使用它需要先添加QuartzCore.framework和引入对应的框架<Quar ...
- [iOS UI进阶 - 5.0] 手势解锁Demo
A.需求 1.九宫格手势解锁 2.使用了绘图和手势事件 code source: https://github.com/hellovoidworld/GestureUnlockDemo B ...
- iOS UI进阶-6.0 手势
给每个页面添加手势,只需要统一设置不是根控制器的页面,都增加手势.需要自定义导航控制器 1.继承代理 @interface BSNavigationController ()<UIGesture ...
随机推荐
- C# MySQL 数据库操作类
using System; using System.Configuration; using System.Collections; using System.Data; using MySql.D ...
- springMVC传对象参数、返回JSON格式数据
假如请求路径:http://localhost/test/test.do?user.id=1 后台接收参数的方法如下: @RequestMapping("/test") publi ...
- 用I/O口模拟IIC总线协议遇到的一些问题
最近做的一个项目,是基于IIC总线通信的传感器系统.由于另外一个传感器使用的是类IIC协议,而不是标准IIC,所以MCU不能与其通信,最后没有办法,只有通过I/O口模拟的方式实现IIC的总线通信.具体 ...
- [反汇编练习] 160个CrackMe之003
[反汇编练习] 160个CrackMe之003. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...
- shell 的判断与比较
1 shell 的$! ,$?, $$,$@ $n $1 the first parameter,$2 the second... $# The number of co ...
- Windows下FFmpeg快速入门
本系列文章导航 Windows下FFmpeg快速入门 ffmpeg参数解释 mencoder和ffmpeg参数详解(Java处理视频) Java 生成视频缩略图(ffmpeg) 使用ffmpeg进行视 ...
- 用NSData和NSFileManager保存内存中的对象
曾经接触过iOS开发,并且开发过两个应用,纵然青涩,也算是一断美好的回忆.转眼就已经一年多了!现在回过头来决定再次拿起iOS开发. 下面讲NSData: NSdata的概念 1.使用文件时需要频繁地将 ...
- 【转】Masonry介绍与使用实践(快速上手Autolayout)
原文网址:http://adad184.com/2014/09/28/use-masonry-to-quick-solve-autolayout/ 前言 1 MagicNumber -> aut ...
- w3c盒子模型与ie盒子模型
盒子模型是css的专有名词,用来描述页面设置中的各种属性,如内容(content).填充(padding).边框(border).边界(margin),由于这些属性拼在一起,与日常生活中的“盒子”很相 ...
- golang windows程序获取管理员权限(UAC ) via gocn
golang windows程序获取管理员权限(UAC ) 在windows上执行有关系统设置命令的时候需要管理员权限才能操作,比如修改网卡的禁用.启用状态.双击执行是不能正确执行命令的,只有右键以管 ...