Core Animation之简单使用CALayer

分享到:

上篇Core Animation之基础介绍提到CALayer的重要性,那咱们就试试CALayer如何使用。

1、什么是CALayer

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

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

那怎么访问这个layer呢,很简单:

CALayer *myLayer = myView.layer;

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

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

2、开始

新建项目默认的模版里是 QuartzCore库的,先添加它,才能使用CALayer。
小试牛刀看看。 设置层的背景颜色,层的设置圆角半径为20
#import 
// Uncomment viewDidLoad and add the following lines
self.view.layer.backgroundColor = [UIColor orangeColor].CGColor;
self.view.layer.cornerRadius = 20.0;
Core Animation之简单使用CALayer

3、层和子层

获取一个新CALayer的实例
CALayer *sublayer = [CALayer layer];
设置layler的属性,下面分别是
  1. 设置背景色,
  2. 阴影的偏差值,
  3. 阴影的半径,
  4. 阴影的颜色,
  5. 阴影的透明度,
  6. 子层的freme值。
  7. 然后把新的层add到view的层里。
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];
效果如下: Core Animation之简单使用CALayer

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

  1. 主要内容有:
  2. 新建imagelayer放置图片
  3. 设置圆角半径cornerRadius
  4. 设置层的内容contents为图片
  5. 边界遮罩masksToBounds
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];
效果: Core Animation之简单使用CALayer

有圆角就是好看很多。

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

如果不想使用图片内容,而是想用 Core Graphics绘制内容到层上的话也简单。 这里主要靠viewController类实现一个drawLayer:inContext方法,并把它设置成layer的代理。代码如下:
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中加入:
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 
咱们看下这很酷的效果: Core Animation之简单使用CALayer
这个是不是像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)

本文遵循“署名-非商业用途-保持一致”创作公用协议


昵    称:
验证码:

相关文档: