IOS-CALayer

什么是CALayer?  
CALayer(这里简单地称其为层)。  
首先要说的是CALayers 是屏幕上的一个具有可见内容的矩形区域,每个UIView都有一个根CALayer,  
其所有的绘制(视觉效果)都是在这个layer上进行的。  
UILabel* lable = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 100, 30)]; 
lable.text = @"test"; 
[self.view addSubview: lable]; 
lable.backgroundColor = [UIColor clearColor]; 
[lable release]; 
// 设定CALayer 
self.view.layer.backgroundColor =[UIColor orangeColor].CGColor; 
self.view.layer.cornerRadius =20.0; 
self.view.layer.frame = CGRectInset(self.view.layer.frame, 20, 20); 
请注意,我创建的UILable始终随着UIView的根CALayer的缩放而改变位置。) 
其次,CALayer的可以影响其外观的特性有: 
    1. 层的大小尺寸背景色内容(比如图像或是使用
Core Graphics
  1. 绘制的内容)是否使用圆角是否使用阴影等等
需要说明的是CALayer的大部分属性都可以用来实现动画效果。  
另外,你可以直接使用CALayer,也可以使用其子类,如CAGradientLayer,CATextLayer, CAShapeLayer等等。 
示例 
首先在Xcode中创建一个View-based App,CALayer是属于QuartzCore framework的,所以需要引入QuartzCore framework,另外在程序中包括QuartzCore.h。 
第一个例子是创建一个带圆角的层,在你的ViewController中的ViewDidLoad中加入下面代码: 
// Import QuartzCore.h at the top of the file 
#import <QuartzCore/QuartzCore.h> 

// Uncomment viewDidLoad and add the following lines 
self.view.layer.backgroundColor =[UIColor orangeColor].CGColor; 
self.view.layer.cornerRadius =20.0; 
self.view.layer.frame = CGRectInset(self.view.layer.frame, 20, 20); 


然后添加一个带阴影效果的子层,加入下列代码: 
CALayer *sublayer = [CALayer layer]; 
sublayer.backgroundColor = [UIColor blueColor].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]; 



为子层增加内容(图片),你还可以设置层的边框,代码如下: 
sublayer.contents =(id)[UIImage imageNamed:@"BattleMapSplashScreen.png"].CGImage; 
sublayer.borderColor =[UIColor blackColor].CGColor; 
sublayer.borderWidth =2.0; 


如果你希望子层也是圆角怎么办?你可能说很容易设置cornerRadius属性就行。实际上你即算是设置了cornerRadius属性,图片仍然不会显示圆角。你还需要设置masksToBounds为YES。但是这样做还是不够的,因为如果是这样,这个层的阴影显示就没有了。简单的实现方法如下(通过两个层来实现): 
CALayer *sublayer =[CALayer layer]; 
sublayer.backgroundColor =[UIColor blueColor].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:@"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){ 
  
    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.6 saturation:1.0 brightness:1.0 alpha:1.0].CGColor; 
    CGContextSetFillColorWithColor(context, bgColor); 
    CGContextFillRect(context, layer.bounds); 
  
    staticc*****t CGPatternCallbacks callbacks ={0, &MyDrawColoredPattern, NULL}; 
  
    CGContextSaveGState(context); 
    CGColorSpaceRef patternSpace = 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

Core Animation绘图的基础是“层”,叫做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 = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 100, 30)];
lable.text =  @"test";
[self.view addSubview: lable];
lable.backgroundColor = [UIColor clearColor];
[lable release];

// 设定CALayer
self.view.layer.backgroundColor =[UIColor orangeColor].CGColor;
self.view.layer.cornerRadius =20.0;
self.view.layer.frame = CGRectInset(self.view.layer.frame, 20, 20);
请注意,我创建的UILable始终随着UIView的根CALayer的缩放而改变位置。)
其次,CALayer的可以影响其外观的特性有:层的大小尺寸背景色内容(比如图像或是使用Core Graphics绘制的内容)是否使用圆角是否使用阴影等等
需要说明的是CALayer的大部分属性都可以用来实现动画效果。
另外,你可以直接使用CALayer,也可以使用其子类,如CAGradientLayer,CATextLayer, CAShapeLayer等等。
示例
首先在Xcode中创建一个View-based App,CALayer是属于QuartzCore framework的,所以需要引入QuartzCore framework,另外在程序中包括QuartzCore.h。
第一个例子是创建一个带圆角的层,在你的ViewController中的ViewDidLoad中加入下面代码:

1
2
3
4
5
6
7
 
// Import QuartzCore.h at the top of the file
#import <QuartzCore/QuartzCore.h>

// Uncomment viewDidLoad and add the following lines
self.view.layer.backgroundColor =[UIColor orangeColor].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 = [CALayer layer];
sublayer.backgroundColor = [UIColor blueColor].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];
效果图:
为子层增加内容(图片),你还可以设置层的边框,代码如下:

1
2
3
 
sublayer.contents =( id)[UIImage imageNamed: @ "BattleMapSplashScreen.png"].CGImage;
sublayer.borderColor =[UIColor blackColor].CGColor;
sublayer.borderWidth = 2.0;
效果图:
 

如果你希望子层也是圆角怎么办?你可能说很容易设置cornerRadius属性就行。实际上你即算是设置了cornerRadius属性,图片仍然不会显示圆角。你还需要设置masksToBounds为YES。但是这样做还是不够的,因为如果是这样,这个层的阴影显示就没有了。简单的实现方法如下(通过两个层来实现):
CALayer *sublayer =[CALayer layer];
sublayer.backgroundColor =[UIColor blueColor].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: @ "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){
 
    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.6 saturation:1.0 brightness:1.0 alpha:1.0].CGColor;
    CGContextSetFillColorWithColor(context, bgColor);
    CGContextFillRect(context, layer.bounds);
 
    staticc*****t 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,
                                           kCGPatternTilingC*****tantSpacing,
                                            true ,
                                           &callbacks);
    CGFloat alpha = 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(Core Animation Layer)的类来管理。UIView本身,更像是一个CALayer的管理器,访问它的跟绘图和跟坐标有关的属性,例如frame,bounds等等,实际上内部都是在访问它所包含的CALayer的相关属性。

2.UIView有个layer属性,可以返回它的主CALayer实例,UIView有一个layerClass方法,返回主layer所使用的类,UIView的子类,可以通过重载这个方法,来让UIView使用不同的CALayer来显示,例如通过
1
- (class) layerClass {
2
  return ([CAEAGLLayer class]);
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显示阴影.....

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值