CALayer (层) 是屏幕上的一个矩形区域,在每一个UIView中都包含一个根CALayer,在UIView上的所有视觉效果都是在这个Layer上进行的。
CALayer外形特征主要包括:
1、层的大小尺寸
2、背景色
3、内容(可以填充图片或者使用Core Graphics 绘制的内容)
4、矩形是否使用圆角
5、矩形是否有阴影
Layer有很多种,最常用也是最基本的是CALayer,当然还包括其他的子类:
CAScrollerLayer 简化显示层的一部分
CATextLayer 文本层
CAGradientLayer、 CAShapeLayer 等等
使用层之前,需要在项目中引入QuartzCore.framework框架
第一个例子是创建一个带圆角的层,在你的ViewController中的ViewDidLoad中加入下面代码:
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.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:@"bg.png"].CGImage;
subLayer.borderColor = [UIColor blackColor].CGColor;
subLayer.borderWidth = 2.0;
// subLayer.cornerRadius = 10.0;
// subLayer.masksToBounds = YES;
如果你希望子层也是圆角怎么办?你可能说很容易,设置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];
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来显示,例如通过
+ (Class) layerClass
{
return [CAGradientLayer class];
}
使某个UIView的子类使用渐变层来进行绘制
3、UIView的CALayer类似UIView的子View树形结构,即它也可以想它的layer上添加子layer,来完成某些特殊的表示。例如下面的代码:
CALayer *grayCover = [ [CALayer alloc] init];
grayCover.backgroundColor = [ [UIColor blackColor] colorWithAlphaComponent:0.2].CGColor;
[self.layer addSubLayer:grayCover];
会在目标view上敷上一层黑色的透明薄膜。
4、UIView的layer树形在系统内部,被系统维护者三分copy。 分别是逻辑树,这里是代码可以操纵的;动画树,是一个中间层,系统就在这一层上更改属性,进行各种渲染操作;显示树,其内容就是当前正被显示在屏幕上得内容。
5、动画的运作:对UIView的subLayer (非主Layer)属性进行更改,系统将自动进行动画生成,动画持续时间的缺省值是0。5秒。
6、坐标系统: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、渲染:当更新层,改变不能立即显示在屏幕上。当所有的层都准备好时,可以调用setNeedsDisplay方法来重绘显示。
若要重绘部分屏幕区域,请使用setNeedsDisplayInRect:方法,通过在CGRect结构的区域更新。
如果是用的Core Graphics框架来执行渲染的话,可以直接渲染Core Graphics的内容。用renderINContet:来做这个事。
[ gameLayer renderIncontext:UIGraphicsGetCurrentContext () ];
8、变换:要在一个层中添加一个3D或仿射变换,可以分别设置层的transform或affineTransform 属性。
subLayer.transform = CATransform3DMakeScale(-1.5, 1.5, 1.0); //参数表示放大缩小倍数。 >1放大, <1缩小,<0表示翻转,即可以x轴翻转(第一个参数为负值),y轴翻转(第二个参数为负值),也可以都翻转(前两个参数都为负值)
CGAffineTransform transform = CGAffineTransformMakeRotation(-45.0); //正值表示顺时针旋转45° 负值表示逆时针旋转45°
subLayer.affineTransform = transform;
9、变形:Quartz Core的渲染能力,使二维图像可以被自由操作,就好像是三维的。图像可以在一个三维坐标系中以任意角度被旋转,缩放和倾斜。CATransform3D的一套方法提供了一些魔术般的变换效果。