Core Animation之简单使用CALayer

试试CALayer如何使用。

1、什么是CALayer

CALayer是个简单的类，它是用来在屏幕上显示内容展示的矩形区域。 
靠，这是不描述UIView的话吗？其实他们是有区别的。每个UIView都有一个根CALayer，UIView在这个layer上描绘东西。
那怎么访问这个layer呢，很简单：

[cpp] view
plaincopy

CALayer *myLayer = myView.layer;  

CALayer有这么些属性，可以设置改变层的显示：
层的大小和位置
层的背景颜色
层的内容（图像，core graphics）
层的的圆角，半径
层的阴影设置
等等....

2、开始

新建项目默认的模版里是QuartzCore库的，先添加它，才能使用CALayer。

小试牛刀看看。
设置层的背景颜色，层的设置圆角半径为20

[cpp] view
plaincopy

#import <QuartzCore/QuartzCore.h>  

   

// Uncomment viewDidLoad and add the following lines  

self.view.layer.backgroundColor = [UIColor orangeColor].CGColor;  

self.view.layer.cornerRadius = 20.0;  

3、层和子层

获取一个新CALayer的实例

[cpp] view
plaincopy

CALayer *sublayer = [CALayer layer];  

设置layler的属性，下面分别是

设置背景色，
阴影的偏差值，
阴影的半径，
阴影的颜色，
阴影的透明度，
子层的frame值。
然后把新的层add到view的层里。

[cpp] view
plaincopy

    CALayer *sublayer = [CALayer layer];  

    sublayer.backgroundColor = [UIColor purpleColor].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];  

效果如下：

4、添加图片内容和层的圆角

主要内容有：
新建imagelayer放置图片
设置圆角半径cornerRadius
设置层的内容contents为图片
边界遮罩masksToBounds

[cpp] view
plaincopy

CALayer *sublayer = [CALayer layer];  

sublayer.backgroundColor = [UIColor purpleColor].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:@"snaguosha.png"].CGImage;  

imageLayer.masksToBounds = YES;  

[sublayer addSublayer:imageLayer];  

效果：



有圆角就是好看很多。

5、自定义绘画内容到图层

如果不想使用图片内容，而是想用 Core Graphics绘制内容到层上的话也简单。
这里主要靠viewController类实现一个drawLayer:inContext方法，并把它设置成layer的代理。代码如下：

[cpp] view
plaincopy

CALayer *customDrawn = [CALayer layer];  

customDrawn.delegate = self;  

customDrawn.backgroundColor = [UIColor greenColor].CGColor;  

customDrawn.frame = CGRectMake(30, 250, 280, 200);  

customDrawn.shadowOffset = CGSizeMake(0, 3);  

customDrawn.shadowRadius = 5.0;  

customDrawn.shadowColor = [UIColor blackColor].CGColor;  

customDrawn.shadowOpacity = 0.8;  

customDrawn.cornerRadius = 10.0;  

customDrawn.borderColor = [UIColor blackColor].CGColor;  

customDrawn.borderWidth = 2.0;  

customDrawn.masksToBounds = YES;  

[self.view.layer addSublayer:customDrawn];  

在viewController中加入：

[cpp] view
plaincopy

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

  

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 saturation:0 brightness:0.15 alpha:1.0].CGColor;  

    CGContextSetFillColorWithColor(context, bgColor);  

    CGContextFillRect(context, layer.bounds);  

      

    static const CGPatternCallbacks callbacks = { 0, &MyDrawColoredPattern, NULL };  

      

    CGContextSaveGState(context);  

    CGColorSpaceRef patternSpace = CGColorSpaceCreatePattern(NULL);  

    CGContextSetFillColorSpace(context, patternSpace);  

    CGColorSpaceRelease(patternSpace);  

      

    CGPatternRef pattern = CGPatternCreate(NULL,  

                                           layer.bounds,  

                                           CGAffineTransformIdentity,  

                                           24,  

                                           24,  

                                           kCGPatternTilingConstantSpacing,  

                                           true,  

                                           &callbacks);  

    CGFloat alpha = 1.0;  

    CGContextSetFillPattern(context, pattern, &alpha);  

    CGPatternRelease(pattern);  

    CGContextFillRect(context, layer.bounds);  

    CGContextRestoreGState(context);  

}  

这样，Core Graphics绘制了一个有质地的图像到customDrawn层上，这个绘制教程请参考： Core
Graphics 101: Patterns 

咱们看下这很酷的效果：



这个是不是像mac电脑上按下F12键时出来的背景。
层了解了，是不是该看看动画了： 

Core Animation之多种动画效果

本篇例子代码：http://download.csdn.net/detail/totogo2010/5083326
参考：http://www.raywenderlich.com/2502/introduction-to-calayers-tutorial

转载自：容芳志 (http://blog.csdn.net/totogo2010)