文档章节

Core Animation之简单使用CALayer

AK_47
 AK_47
发布于 2014/07/09 17:09
字数 839
阅读 16
收藏 2

上篇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 <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的实例
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];
效果如下:


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];
效果:


有圆角就是好看很多。

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 
咱们看下这很酷的效果:

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

Core Animation之多种动画效果


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

容芳志 (http://blog.csdn.net/totogo2010)

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


© 著作权归作者所有

AK_47
粉丝 16
博文 533
码字总数 569998
作品 0
嘉定
程序员
私信 提问
iOS-Core-Animation之一----图层树

最近在找Core Animation的资料,先给大家介绍一下Core Animation的基本知识吧(如果对这部分很熟悉请略过),总共十三篇,分两个星期给大家看。个人感觉这位大牛写的挺好的,我看过很瘦启发了...

夜空下最亮的亮点
2017/11/22
0
0
iOS核心动画笔记1-图层的树状结构

从今天开始, 准备系统的学习一下iOS中的核心动画了, 准备花一个月时间, 利用空闲时间把所有章节内容都看完, demo都敲完, 每个章节的笔记就记在这里了, demo记在github上. 我认为的重点我会提...

hell03W
2016/07/30
57
0
IOS-Core Animation

1.Core Animation 类结构 1、CALayer中 名叫图层类,是整个Core Animation的基础,也是所有Core Animation图层类的 类。 2、CAAnimationCAAnimation是所有Core Animation中动画类的 类,遵守NSC...

PengLiu
2016/08/27
8
0
[iOS Animation]-CALayer 图层树 一

图层的树状结构 巨妖有图层,洋葱也有图层,你有吗?我们都有图层 -- 史莱克 Core Animation其实是一个令人误解的命名。你可能认为它只是用来做动画的,但实际上它是从一个叫做Layer Kit这么...

浩浩老师
2015/10/12
157
0
[iOS Animation]-CALayer 图层树 二

图层的能力 如果说CALayer是UIView内部实现细节,那我们为什么要全面地了解它呢?苹果当然为我们提供了优美简洁的UIView接口,那么我们是否就没必要直接去处理Core Animation的细节了呢? 某...

浩浩老师
2015/10/12
119
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
6
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
6
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部