CALayer 类

什么是CALayer？

CALayer（这里简单地称其为层）。

首先要说的是CALayers是屏幕上的一个具有可见内容的矩形区域，每个UIView都有一个根CALayer，

其所有的绘制（视觉效果）都是在这个layer上进行的。

UILabel* lable = [[UILabelalloc]initWithFrame:CGRectMake(0, 0, 100,30)];

lable.text = @"test";

[self.viewaddSubview: lable];

lable.backgroundColor = [UIColorclearColor];

[lable release];

// 设定CALayer

self.view.layer.backgroundColor =[UIColororangeColor].CGColor;

self.view.layer.cornerRadius =20.0;

self.view.layer.frame = CGRectInset(self.view.layer.frame,20, 20);

请注意，我创建的UILable始终随着UIView的根CALayer的缩放而改变位置。）

其次，CALayer的可以影响其外观的特性有：

层的大小尺寸背景色内容（比如图像或是使用
CoreGraphics

绘制的内容）是否使用圆角是否使用阴影等等
需要说明的是CALayer的大部分属性都可以用来实现动画效果。

另外，你可以直接使用CALayer，也可以使用其子类，如CAGradientLayer，CATextLayer，CAShapeLayer等等。

示例

首先在Xcode中创建一个View-based App，CALayer是属于QuartzCoreframework的，所以需要引入QuartzCoreframework，另外在程序中包括QuartzCore.h。

第一个例子是创建一个带圆角的层，在你的ViewController中的ViewDidLoad中加入下面代码：

// Import QuartzCore.h at the top of thefile

#import

// Uncomment viewDidLoad and add the followinglines

self.view.layer.backgroundColor =[UIColororangeColor].CGColor;

self.view.layer.cornerRadius =20.0;

self.view.layer.frame = CGRectInset(self.view.layer.frame,20, 20);

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

CALayer *sublayer = [CALayerlayer];

sublayer.backgroundColor = [UIColorblueColor].CGColor;

sublayer.shadowOffset = CGSizeMake(0,3);

sublayer.shadowRadius = 5.0;

sublayer.shadowColor = [UIColorblackColor].CGColor;

sublayer.shadowOpacity = 0.8;

sublayer.frame = CGRectMake(30,30, 128, 192);

[self.view.layeraddSublayer:sublayer];

为子层增加内容（图片），你还可以设置层的边框，代码如下：

sublayer.contents =(id)[UIImageimageNamed:@"BattleMapSplashScreen.png"].CGImage;

sublayer.borderColor =[UIColorblackColor].CGColor;

sublayer.borderWidth =2.0;

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

CALayer *sublayer =[CALayerlayer];

sublayer.backgroundColor =[UIColorblueColor].CGColor;

sublayer.shadowOffset = CGSizeMake(0,3);

sublayer.shadowRadius =5.0;

sublayer.shadowColor =[UIColorblackColor].CGColor;

sublayer.shadowOpacity =0.8;

sublayer.frame = CGRectMake(30,30, 128, 192);

sublayer.borderColor =[UIColorblackColor].CGColor;

sublayer.borderWidth =2.0;

sublayer.cornerRadius =10.0;

[self.view.layeraddSublayer:sublayer];

CALayer *imageLayer =[CALayerlayer];

imageLayer.frame = sublayer.bounds;

imageLayer.cornerRadius =10.0;

imageLayer.contents =(id)[UIImageimageNamed:@"BattleMapSplashScreen.png"].CGImage;

imageLayer.masksToBounds =YES;

[sublayeraddSublayer:imageLayer];

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

代码如下：

void MyDrawColoredPattern (void*info,CGContextRef context){

CGColorRefdotColor =[UIColor colorWithHue:0 saturation:0brightness:0.07alpha:1.0].CGColor;

CGColorRefshadowColor =[UIColor colorWithRed:1 green:1blue: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 *)layerinContext:(CGContextRef)context {

CGColorRefbgColor =[UIColor colorWithHue:0.6 saturation:1.0brightness:1.0alpha:1.0].CGColor;

CGContextSetFillColorWithColor(context,bgColor);

CGContextFillRect(context,layer.bounds);

staticc*****tCGPatternCallbackscallbacks ={0, &MyDrawColoredPattern, NULL};

CGContextSaveGState(context);

CGColorSpaceRefpatternSpace = CGColorSpaceCreatePattern(NULL);

CGContextSetFillColorSpace(context,patternSpace);

还需要注意，radians是一个自定义函数：

static inline double radians (double degrees) { return degrees * M_PI/180; }
CALayer 这个类么，和UIView有什么区别和联系？Layer到底是个什么东西？

答：就是层啊，这个层你随便控制他的大小，旋转，角度，坐标变化或者内容之类的信息，这些变化还可以通过动画表现出来。

UIView所有你能看到的显示的内容，后面都有一个Layer。

UIView 的animation我觉得是一种简化，实质还是调用的CALayer。

CoreAnimation绘图的基础是“层”，叫做CALayer。你可以在View中设置层，层中可以放置更多的层。

每个层都可以设定单独的动作，还可以给上一级的层设置动作，下一级的层就可以跟着上一层进行动作。

CALayer是为更好实现View的动画，比如你想View消失时做成玻璃破碎的效果，

就可以在View的CALayer上密密麻麻排一层N个小的子CALayer，设置每个CALayer的落下动画，用View就比较不合适。

一个UIView包含CALayer树，CALayer是一个数据模型，包含了一些用于显示的对象，但本身不用于显示。

CALayer和UIView的关系?

一个UIView包含CALayer树，CALayer是一个数据模型，包含了一些用于显示的对象，但本身不用于显示。

CALayer相当于photoshop的一个层，很多动画可以通过设置CALayer来实现。据说有人用CALayer显示图片来播放视频。

Core animation应该是用CAlayer来实现各种动画。

CALayer简单教程

首先要说的是CALayers是屏幕上的一个具有可见内容的矩形区域，每个UIView都有一个根CALayer，其所有的绘制（视觉效果）都是在这个layer上进行的。（译者注：为验证这点，我写下了如下代码：

1 2 3 4 5 6 7 8 9 10

UILabel* lable = [[UILabelalloc]initWithFrame:CGRectMake(0, 0, 100, 30)]; lable.text = @"test"; [self.viewaddSubview: lable]; lable.backgroundColor = [UIColorclearColor]; [lablerelease]; //设定CALayer self.view.layer.backgroundColor =[UIColororangeColor].CGColor; self.view.layer.cornerRadius =20.0; self.view.layer.frame = CGRectInset(self.view.layer.frame,20, 20);

请注意，我创建的UILable始终随着UIView的根CALayer的缩放而改变位置。）

其次，CALayer的可以影响其外观的特性有：层的大小尺寸背景色内容（比如图像或是使用CoreGraphics绘制的内容）是否使用圆角是否使用阴影等等

需要说明的是CALayer的大部分属性都可以用来实现动画效果。

另外，你可以直接使用CALayer，也可以使用其子类，如CAGradientLayer，CATextLayer，CAShapeLayer等等。

示例

首先在Xcode中创建一个View-based App，CALayer是属于QuartzCoreframework的，所以需要引入QuartzCoreframework，另外在程序中包括QuartzCore.h。

第一个例子是创建一个带圆角的层，在你的ViewController中的ViewDidLoad中加入下面代码：

1 2 3 4 5 6 7

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

结果如下：



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

1 2 3 4 5 6 7 8

CALayer *sublayer = [CALayerlayer]; sublayer.backgroundColor = [UIColorblueColor].CGColor; sublayer.shadowOffset = CGSizeMake(0,3); sublayer.shadowRadius = 5.0; sublayer.shadowColor = [UIColorblackColor].CGColor; sublayer.shadowOpacity = 0.8; sublayer.frame = CGRectMake(30,30, 128, 192); [self.view.layer addSublayer:sublayer];

效果图：



为子层增加内容（图片），你还可以设置层的边框，代码如下：

1 2 3

sublayer.contents =(id)[UIImageimageNamed:@"BattleMapSplashScreen.png"].CGImage; sublayer.borderColor =[UIColorblackColor].CGColor; sublayer.borderWidth =2.0;

效果图：



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

CALayer *sublayer =[CALayerlayer];

sublayer.backgroundColor =[UIColorblueColor].CGColor;

sublayer.shadowOffset = CGSizeMake(0,3);

sublayer.shadowRadius =5.0;

sublayer.shadowColor =[UIColorblackColor].CGColor;

sublayer.shadowOpacity =0.8;

sublayer.frame = CGRectMake(30,30, 128, 192);

sublayer.borderColor =[UIColorblackColor].CGColor;

sublayer.borderWidth =2.0;

sublayer.cornerRadius =10.0;

[self.view.layer addSublayer:sublayer];

CALayer *imageLayer =[CALayerlayer];

imageLayer.frame = sublayer.bounds;

imageLayer.cornerRadius =10.0;

imageLayer.contents =(id)[UIImageimageNamed:@"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){

CGColorRefdotColor =[UIColor colorWithHue:0 saturation:0brightness:0.07 alpha:1.0].CGColor;

CGColorRefshadowColor =[UIColor colorWithRed:1 green:1blue: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 *)layerinContext:(CGContextRef)context {

CGColorRefbgColor =[UIColor colorWithHue:0.6 saturation:1.0brightness:1.0 alpha:1.0].CGColor;

CGContextSetFillColorWithColor(context, bgColor);

CGContextFillRect(context,layer.bounds);

staticc*****tCGPatternCallbackscallbacks ={0, &MyDrawColoredPattern, NULL};

CGContextSaveGState(context);

CGColorSpaceRefpatternSpace = CGColorSpaceCreatePattern(NULL);

CGContextSetFillColorSpace(context, patternSpace);

CGColorSpaceRelease(patternSpace);

CGPatternRefpattern = CGPatternCreate(NULL,

layer.bounds,

CGAffineTransformIdentity,

24,

24,

kCGPatternTilingC*****tantSpacing,

true,

&callbacks);

CGFloatalpha =1.0;

CGContextSetFillPattern(context,pattern, &alpha);

CGPatternRelease(pattern);

CGContextFillRect(context,layer.bounds);

CGContextRestoreGState(context);

}

还需要注意，radians是一个自定义函数：

1	static inline double radians (double degrees) { return degrees * M_PI/180; }

效果如下：

UIView与CALayer的区别?

1.UIView是iOS系统中界面元素的基础，所有的界面元素都继承自它。它本身完全是由CoreAnimation来实现的（Mac下似乎不是这样）。它真正的绘图部分，是由一个叫CALayer（CoreAnimationLayer）的类来管理。UIView本身，更像是一个CALayer的管理器，访问它的跟绘图和跟坐标有关的属性，例如frame，bounds等等，实际上内部都是在访问它所包含的CALayer的相关属性。

2.UIView有个layer属性，可以返回它的主CALayer实例，UIView有一个layerClass方法，返回主layer所使用的类，UIView的子类，可以通过重载这个方法，来让UIView使用不同的CALayer来显示，例如通过

1

- (class) layerClass {

2

return ([CAEAGLLayerclass]);

3

}

使某个UIView的子类使用GL来进行绘制。

3.UIView的CALayer类似UIView的子View树形结构，也可以向它的layer上添加子layer，来完成某些特殊的表示。例如下面的代码

1

grayCover = [[CALayer alloc] init];

2

grayCover.backgroundColor = [[[UIColor blackColor]colorWithAlphaComponent:0.2] CGColor];

3

[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显示阴影.....