[ios] Core Animation之简单使用CALayer 【转】

1、什么是CALayer

CALayer是个简单的类，它是用来在屏幕上显示内容展示的矩形区域。 

靠，这是不描述UIView的话吗？其实他们是有区别的。每个UIView都有一个根CALayer，UIView在这个layer上描绘东西。

那怎么访问这个layer呢，很简单：

[cpp] view plaincopy
  1. CALayer *myLayer = myView.layer;  


CALayer有这么些属性，可以设置改变层的显示：

  1. 层的大小和位置
  2. 层的背景颜色
  3. 层的内容（图像，core graphics）
  4. 层的的圆角，半径
  5. 层的阴影设置
  6. 等等....

2、开始

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

小试牛刀看看。
设置层的背景颜色，层的设置圆角半径为20
[cpp] view plaincopy
  1. #import <QuartzCore/QuartzCore.h>  
  2.    
  3. // Uncomment viewDidLoad and add the following lines  
  4. self.view.layer.backgroundColor = [UIColor orangeColor].CGColor;  
  5. self.view.layer.cornerRadius = 20.0;  


3、层和子层

获取一个新CALayer的实例
[cpp] view plaincopy
  1. CALayer *sublayer = [CALayer layer];  
设置layler的属性，下面分别是
  1. 设置背景色，
  2. 阴影的偏差值，
  3. 阴影的半径，
  4. 阴影的颜色，
  5. 阴影的透明度，
  6. 子层的frame值。
  7. 然后把新的层add到view的层里。
[cpp] view plaincopy
  1.     CALayer *sublayer = [CALayer layer];  
  2.     sublayer.backgroundColor = [UIColor purpleColor].CGColor;  
  3.     sublayer.shadowOffset = CGSizeMake(0, 3);  
  4.     sublayer.shadowRadius = 5.0;  
  5.     sublayer.shadowColor = [UIColor blackColor].CGColor;  
  6.     sublayer.shadowOpacity = 0.8;  
  7.     sublayer.frame = CGRectMake(30, 30, 128, 192);  
  8.     [self.view.layer addSublayer:sublayer];  
效果如下：


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

  1. 主要内容有：
  2. 新建imagelayer放置图片
  3. 设置圆角半径cornerRadius
  4. 设置层的内容contents为图片
  5. 边界遮罩masksToBounds
[cpp] view plaincopy
  1. CALayer *sublayer = [CALayer layer];  
  2. sublayer.backgroundColor = [UIColor purpleColor].CGColor;  
  3. sublayer.shadowOffset = CGSizeMake(0, 3);  
  4. sublayer.shadowRadius = 5.0;  
  5. sublayer.shadowColor = [UIColor blackColor].CGColor;  
  6. sublayer.shadowOpacity = 0.8;  
  7. sublayer.frame = CGRectMake(30, 30, 128, 192);  
  8. sublayer.borderColor = [UIColor blackColor].CGColor;  
  9. sublayer.borderWidth = 2.0;  
  10. sublayer.cornerRadius = 10.0;  
  11. [self.view.layer addSublayer:sublayer];  
  12.   
  13. CALayer *imageLayer = [CALayer layer];  
  14. imageLayer.frame = sublayer.bounds;  
  15. imageLayer.cornerRadius = 10.0;  
  16. imageLayer.contents = (id)[UIImage imageNamed:@"snaguosha.png"].CGImage;  
  17. imageLayer.masksToBounds = YES;  
  18. [sublayer addSublayer:imageLayer];  
效果：


有圆角就是好看很多。

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

如果不想使用图片内容，而是想用 Core Graphics绘制内容到层上的话也简单。
这里主要靠viewController类实现一个drawLayer:inContext方法，并把它设置成layer的代理。代码如下：
[cpp] view plaincopy
  1. CALayer *customDrawn = [CALayer layer];  
  2. customDrawn.delegate = self;  
  3. customDrawn.backgroundColor = [UIColor greenColor].CGColor;  
  4. customDrawn.frame = CGRectMake(30, 250, 280, 200);  
  5. customDrawn.shadowOffset = CGSizeMake(0, 3);  
  6. customDrawn.shadowRadius = 5.0;  
  7. customDrawn.shadowColor = [UIColor blackColor].CGColor;  
  8. customDrawn.shadowOpacity = 0.8;  
  9. customDrawn.cornerRadius = 10.0;  
  10. customDrawn.borderColor = [UIColor blackColor].CGColor;  
  11. customDrawn.borderWidth = 2.0;  
  12. customDrawn.masksToBounds = YES;  
  13. [self.view.layer addSublayer:customDrawn];  

在viewController中加入：
[cpp] view plaincopy
  1. static inline double radians (double degrees) { return degrees * M_PI/180; }  
  2.   
  3. void MyDrawColoredPattern (void *info, CGContextRef context) {  
  4.       
  5.     CGColorRef dotColor = [UIColor colorWithHue:0 saturation:0 brightness:0.07 alpha:1.0].CGColor;  
  6.     CGColorRef shadowColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:0.1].CGColor;  
  7.       
  8.     CGContextSetFillColorWithColor(context, dotColor);  
  9.     CGContextSetShadowWithColor(context, CGSizeMake(0, 1), 1, shadowColor);  
  10.       
  11.     CGContextAddArc(context, 3, 3, 4, 0, radians(360), 0);  
  12.     CGContextFillPath(context);  
  13.       
  14.     CGContextAddArc(context, 16, 16, 4, 0, radians(360), 0);  
  15.     CGContextFillPath(context);  
  16.       
  17. }  
  18.   
  19. - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)context {  
  20.       
  21.     CGColorRef bgColor = [UIColor colorWithHue:0 saturation:0 brightness:0.15 alpha:1.0].CGColor;  
  22.     CGContextSetFillColorWithColor(context, bgColor);  
  23.     CGContextFillRect(context, layer.bounds);  
  24.       
  25.     static const CGPatternCallbacks callbacks = { 0, &MyDrawColoredPattern, NULL };  
  26.       
  27.     CGContextSaveGState(context);  
  28.     CGColorSpaceRef patternSpace = CGColorSpaceCreatePattern(NULL);  
  29.     CGContextSetFillColorSpace(context, patternSpace);  
  30.     CGColorSpaceRelease(patternSpace);  
  31.       
  32.     CGPatternRef pattern = CGPatternCreate(NULL,  
  33.                                            layer.bounds,  
  34.                                            CGAffineTransformIdentity,  
  35.                                            24,  
  36.                                            24,  
  37.                                            kCGPatternTilingConstantSpacing,  
  38.                                            true,  
  39.                                            &callbacks);  
  40.     CGFloat alpha = 1.0;  
  41.     CGContextSetFillPattern(context, pattern, &alpha);  
  42.     CGPatternRelease(pattern);  
  43.     CGContextFillRect(context, layer.bounds);  
  44.     CGContextRestoreGState(context);  
  45. }  
这样，Core Graphics绘制了一个有质地的图像到customDrawn层上，这个绘制教程请参考： Core Graphics 101: Patterns 
咱们看下这很酷的效果：

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

Core Animation之多种动画效果


参考：http://www.raywenderlich.com/2502/introduction-to-calayers-tutorial

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

posted @ 2013-03-28 10:35  金建彤  阅读(172)  评论(0)  编辑  收藏  举报