CALayer

我是大自然的搬运工,处女第二篇(笔记篇-转载别人的)
什么是CALayer?
CALayer(这里简单地称其为层)。
首先要说的是CALayers 是屏幕上的一个具有可见内容的矩形区域,每个UIView都有一个根CALayer,
其所有的绘制(视觉效果)都是在这个layer上进行的。

UILabel* lable = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 100, 30)];  
lable.text = @"test";  
[self.view addSubview: lable];  
lable.backgroundColor = [UIColor clearColor];  
[lable release];  
// 设定CALayer  
self.view.layer.backgroundColor =[UIColor orangeColor].CGColor;  
self.view.layer.cornerRadius =20.0;  
self.view.layer.frame = CGRectInset(self.view.layer.frame, 20, 20);  

请注意,我创建的UILable始终随着UIView的根CALayer的缩放而改变位置。)
其次,CALayer的可以影响其外观的特性有:层的大小尺寸背景色内容(比如图像或是使用Core Graphics 绘制的内容)是否使用圆角是否使用阴影等等.需要说明的是CALayer的大部分属性都可以用来实现动画效果。
另外,你可以直接使用CALayer,也可以使用其子类,如CAGradientLayer,CATextLayer, CAShapeLayer等等。
1、示例
首先在Xcode中创建一个View-based App,CALayer是属于QuartzCore framework的,所以需要引入QuartzCore framework,另外在程序中包括QuartzCore.h。
第一个例子是创建一个带圆角的层,在你的ViewController中的ViewDidLoad中加入下面代码:

// Import QuartzCore.h at the top of the file  
#import   
// Uncomment viewDidLoad and add the following lines  
self.view.layer.backgroundColor =[UIColor orangeColor].CGColor;  
self.view.layer.cornerRadius =20.0;  
self.view.layer.frame = CGRectInset(self.view.layer.frame, 20, 20);  

然后添加一个带阴影效果的子层,加入下列代码:

CALayer *sublayer = [CALayer layer];  
sublayer.backgroundColor = [UIColor blueColor].CGColor;  
sublayer.shadowOffset = CGSizeMake(0, 3);  
sublayer.shadowRadius = 5.0;  
sublayer.shadowColor = [UIColor blackColor].CGColor;  
sublayer.shadowOpacity = 0.8;  
sublayer.frame = CGRectMake(30, 30, 128, 192);  
[self.view.layer addSublayer:sublayer];  
//为子层增加内容(图片),你还可以设置层的边框,代码如下:  
sublayer.contents =(id)[UIImage imageNamed:@"BattleMapSplashScreen.png"].CGImage;  
sublayer.borderColor =[UIColor blackColor].CGColor;  
sublayer.borderWidth =2.0;  

如 果你希望子层也是圆角怎么办?你可能说很容易设置cornerRadius属性就行。实际上你即算是设置了cornerRadius属性,图片仍然不会显 示圆角。你还需要设置masksToBounds为YES。但是这样做还是不够的,因为如果是这样,这个层的阴影显示就没有了。简单的实现方法如下(通过 两个层来实现):

CALayer *sublayer =[CALayer layer];  
sublayer.backgroundColor =[UIColor blueColor].CGColor;  
sublayer.shadowOffset = CGSizeMake(0, 3);  
sublayer.shadowRadius =5.0;  
sublayer.shadowColor =[UIColor blackColor].CGColor;  
sublayer.shadowOpacity =0.8;  
sublayer.frame = CGRectMake(30, 30, 128, 192);  
sublayer.borderColor =[UIColor blackColor].CGColor;  
sublayer.borderWidth =2.0;  
sublayer.cornerRadius =10.0;  
[self.view.layer addSublayer:sublayer];  
CALayer *imageLayer =[CALayer layer];  
imageLayer.frame = sublayer.bounds;  
imageLayer.cornerRadius =10.0;  
imageLayer.contents =(id)[UIImage imageNamed:@"BattleMapSplashScreen.png"].CGImage;  
imageLayer.masksToBounds =YES;  
[sublayer addSublayer:imageLayer];  

最 后,还介绍一下自绘图型的实现,其要点是要设置所绘制层的delegate。比如在我们的例子中使用ViewController作为delegate, 那么就需要在ViewController中实现drawLayer:inContext方法,对层进行绘制工作。另外,还需要调用 setNeedsDisplay,来通知层需要进行绘制了,于是层才会通过对delegate的drawLayer:inContext方法进行调用。
代码如下:

void MyDrawColoredPattern (void*info, CGContextRef context){  
   
    CGColorRef dotColor =[UIColor colorWithHue:0 saturation:0 brightness:0.07 alpha:1.0].CGColor;  
    CGColorRef shadowColor =[UIColor colorWithRed:1 green:1 blue:1 alpha:0.1].CGColor;  
   
    CGContextSetFillColorWithColor(context, dotColor);  
    CGContextSetShadowWithColor(context, CGSizeMake(0, 1), 1, shadowColor);  
   
    CGContextAddArc(context, 3, 3, 4, 0, radians(360), 0);  
    CGContextFillPath(context);  
   
    CGContextAddArc(context, 16, 16, 4, 0, radians(360), 0);  
    CGContextFillPath(context);  
   
}  
-(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)context {  
   
    CGColorRef bgColor =[UIColor colorWithHue:0.6 saturation:1.0 brightness:1.0 alpha:1.0].CGColor;  
    CGContextSetFillColorWithColor(context, bgColor);  
    CGContextFillRect(context, layer.bounds);  
   
    staticc*****t CGPatternCallbacks callbacks ={0, &MyDrawColoredPattern, NULL};  
   
    CGContextSaveGState(context);  
    CGColorSpaceRef patternSpace = CGColorSpaceCreatePattern(NULL);  
    CGContextSetFillColorSpace(context, patternSpace);  
//还需要注意,radians是一个自定义函数: 
static inline double radians (double degrees) { return degrees * M_PI/180; } 

_______________________________________CALayer_______________________________________
1、CALayer 这个类么,和UIView有什么区别和联系?Layer到底是个什么东西?
答:就是层啊,这个层你随便控制他的大小,旋转,角度,坐标变化或者内容之类的信息,这些变化还可以通过动画表现出来。
UIView所有你能看到的显示的内容,后面都有一个Layer。
UIView 的animation我觉得是一种简化,实质还是调用的 CALayer 。
每个层都可以设定单独的动作,还可以给上一级的层设置动作,下一级的层就可以跟着上一层进行动作。
CALayer是为更好实现View的动画,比如你想View消失时做成玻璃破碎的效果,
就可以在View的CALayer上密密麻麻排一层N个小的子CALayer, 设置每个CALayer的落下动画,用View就比较不合适。
一个UIView包含CALayer树,CALayer是一个数据模型,包含了一些用于显示的对象,但本身不用于显示。

2、CALayer和UIView的关系?
一个UIView包含CALayer树,CALayer是一个数据模型,包含了一些用于显示的对象,但本身不用于显示。
CALayer相当于photoshop的一个层,很多动画可以通过设置CALayer来实现。据说有人用CALayer显示图片来播放视频。
Core animation应该是用CAlayer来实现各种动画。

3、UIView 与CALayer的区别?

  1. UIView是iOS系统中界面元素的基础, 所有的界面元素都继承自它。它本身完全是由CoreAnimation来实 现的(Mac下似乎不是这样)。它真正的绘图部分,是由一个叫CALayer(Core Animation Layer)的类来管理。UIView本身,更像是一个CALayer的管理器,访问它的跟绘图和跟坐标有关的属性,例如frame,bounds等等,实际上内部都是在访问它所包含的CALayer的相关属性。
    2.UIView有个layer属性,可以返回它的主CALayer实例,UIView有一个layerClass方法,返回主layer所使用的类,UIView的子类,可以通过重载这个方法,来让UIView使用不同的CALayer来显示,例如通过
- (class) layerClass { 
    return ([CAEAGLLayer class]); 
} 

使某个UIView的子类使用GL来进行绘制。
3.UIView的CALayer类似UIView的子View树形结构,也可以向它的layer上添加子layer,来完成某些特殊的表示。例如下面的代码

grayCover = [[CALayer alloc] init]; 
grayCover.backgroundColor = [[[UIColor blackColor] colorWithAlphaComponent:0.2] CGColor]; 
[self.layer addSubLayer: grayCover]; 

会在目标View上敷上一层黑色的透明薄膜。
4.UIView的layer树形在系统内部,被系统维护着三份copy(这段理解有点吃不准)。
第一份,逻辑树,就是代码里可以操纵的,例如更改layer的属性等等就在这一份。
第二份,动画树,这是一个中间层,系统正在这一层上更改属性,进行各种渲染操作。
第三份,显示树,这棵树的内容是当前正被显示在屏幕上的内容。
这三棵树的逻辑结构都是一样的,区别只有各自的属性。
5.动画的运作
UIView的主layer以外(我觉得是这样),对它的subLayer,也就是子layer的属性进行更改,系统将自动进行动画生成,动画持续时间有 个缺省时间,个人感觉大概是0.5秒。在动画时间里,系统自动判定哪些属性更改了,自动对更改的属性进行动画插值,生成中间帧然后连续显示产生动画效果。
6.坐标系系统(对position和anchorPoint的关系还是犯晕)
CALayer的坐标系系统和UIView有点不一样,它多了一个叫anchorPoint的属性,它使用CGPoint结构,但是值域是0~1,也就是 按照比例来设置。这个点是各种图形变换的坐标原点,同时会更改layer的position的位置,它的缺省值是{0.5, 0.5},也就是在layer的中央。
某layer.anchorPoint = CGPointMake(0.f, 0.f);
如果这么设置,layer的左上角就会被挪到原来的中间的位置,
加上这样一句就好了
某layer.position = CGPointMake(0.f, 0.f);
7.真实例子的分析
这是iphone上iBook翻页的效果,假设每一页都是一个UIView,我觉得一个页面是贴了俩个Layer,文字Layer显示正面的内容,背面 layer用文字layer的快照做affine翻转,贴在文字layer的后面。因为Layer可以设置显示阴影,也许后面的阴影效果没有使用单独的一 个layer来显示。至于这个曲面效果,我查了很多资料也没有结果,估计是使用了GL的曲面绘图?
8.最后一个
layer可以设置圆角显示,例如UIButton的效果,也可以设置阴影显示,但是如果layer树中的某个layer设置了圆角,树中所有layer 的阴影效果都将显示不了了。如果既想有圆角又想要阴影,好像只能做两个重叠的UIView,一个的layer显示圆角,一个的layer显示阴 影.....

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,468评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,620评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,427评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,160评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,197评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,334评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,775评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,444评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,628评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,459评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,508评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,210评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,767评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,850评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,076评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,627评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,196评论 2 341

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,446评论 6 30
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,089评论 5 13
  • CALayer1-简介 本文目录 一、什么是CALayer 二、CALayer的简单使用 回到顶部 一、什么是CA...
    白水灬煮一切阅读 2,561评论 0 8
  • 前言 前面发了一篇iOS 面试的文章,在说到 UIView 和 CALayer 的区别和联系的时候,被喵神指出没有...
    Mz楓阅读 751评论 0 4
  • CALayer - 在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮、一个文本标签、一个文本...
    Hevin_Chen阅读 1,133评论 0 10