IOS 特性CALayer的使用

在IOS的开发中，经常需要针对大量的UIViews进行个性化定制，这样的空间包括Button、Label、slider、web view  and so on。几乎UIView的子类都可能会遇到个性化定制的时候。那么接下来就针对UIView的特性CALayer开进行一个个性化定制吧。

What Are CALayers?

CALayers是一个表示矩形区域内的可视内容的类，并且 任何UIView都有一个root layer。在具体的时候的时候可以向下面这样指定view的layer：

CALayer *viewLayer = someView.layer;

另外CALayer有如一些属性特点：

• Layer的大小位置  <size、position>
• Layer的背景颜色  <backgroundColor>
• Layer的内容  <image、core graphics的绘图>
• Layer的阴影 <shadow>
• Layer的边缘 <edges>
• and so on

Getting Started

创建一个给予Single-View Application的项目工程，LayerFun。添加CALayer的类库QuartCore.framework。

打开ViewController.m 文件，引入QuartzCore头文件，并尝试设置当前View的Layer设置。

在viewdidload方法中添加如下代码：

[cpp] view plaincopy

1. self.view.layer.backgroundColor = [UIColor orangeColor].CGColor;  
2. self.view.layer.cornerRadius = 20.0f;  
3. self.view.layer.frame = CGRectInset(self.view.layer.frame, 20.0f, 20.0f);  

运行工程，可以看到当前视图的view已经有了橘色背景颜色、圆角以及位置的变化。

 

CALayers and Sublayers

就像UIView有subViews一样，CALayer也有subLayers，这样就可以像UIView那样的使用方式来使用CALayer了，例如：

CALayer *subLayer = [CALayer layer]; 

不管你有多少个subLayers，当你创建了一个CALayer之后，你就可以设置它的属性了，并且要指定其大小和位置。设置完成之后，将其add到某个Layer的subLayer，就可以显示了。例如：

[myLayer  addSublayer:sublayer];

接下来继续在viewdidload方法中添加如下代码，实现layer的addSublayer：

[cpp] view plaincopy

1. CALayer *subLayer = [CALayer layer];  
2. subLayer.backgroundColor = [UIColor blueColor].CGColor;  
3. subLayer.shadowColor = [UIColor blackColor].CGColor;  
4. subLayer.shadowOffset = CGSizeMake(0, 5);  
5. subLayer.shadowRadius = 5.0f;  
6. subLayer.shadowOpacity = 0.8f;  
7. subLayer.frame = CGRectMake(30.0f, 30.0f, 128, 192);  
8. subLayer.borderColor = [UIColor blackColor].CGColor;  
9. subLayer.borderWidth = 2.0f;  
10. subLayer.cornerRadius = 10.0f;  
11.   
12. [self.view.layer addSublayer:subLayer];  

完成后运行，就可以看到在当前视图的Layer上新增加了另一个layer之后，两个layer的显示完全由开发者自己定制，并且方法简单。

Setting CALayer Image Content

对于CALayer来说，不一定只能对其填充颜色，还可以通过其他很多元素进行填充，使其达到要求，例如使用图片来填充。

首先选择一张需要的图片，本例使用的图片地址：download a splash screen ，你们可以下载来暂时使用。

添加图片到工程，使用一下的内容更改viewdidload里面的部分代码：

 subLayer.contents = (id) [UIImage imageNamed:@"BattleMapSplashScreen.jpeg"].CGImage;
subLayer.borderColor = [UIColor blackColor].CGColor;
subLayer.borderWidth = 2.0f;

运行工程可以看到在subLayer上面显示了一张图片：

但是可以看到图片并没有圆角化，只需要对subLayer设置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.jpg"].CGImage;

imageLayer.masksToBounds = YES;

[sublayer addSublayer:imageLayer];

CALayer and Custom Drawn Content

接下来实现一个自定义卡通效果的样式显示：

按照如下代码例子重写viewdidload即可实现：

新建一个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, 128, 40);  
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];  
14.   [customDrawn setNeedsDisplay];  

使用C++语法写一个绘制方法：

[cpp] view plaincopy

1. void DrawColoredPattern(void *info, CGContextRef context){  
2.       
3.     CGColorRef dotColor = [UIColor colorWithHue:0 saturation:0 brightness:0.07f alpha:1.0].CGColor;  
4.     CGColorRef shadowColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:0.1].CGColor;  
5.       
6.     CGContextSetFillColorWithColor(context, dotColor);  
7.     CGContextSetShadowWithColor(context, CGSizeMake(0, 1), 1, shadowColor);  
8.       
9.     CGContextAddArc(context, 3, 3, 4, 0, radians(360), 0);  
10.     CGContextFillPath(context);  
11.       
12.     CGContextAddArc(context, 16, 16, 4, 0, radians(360), 0);  
13.     CGContextFillPath(context);  
14.       
15. }  

重写CALayer的drawLayer：inContext方法：

[cpp] view plaincopy

1. -(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx{  
2.     CGColorRef bgColor = [UIColor colorWithHue:0.6 saturation:1.0 brightness:1.0 alpha:1.0].CGColor;  
3.     CGContextSetFillColorWithColor(ctx, bgColor);  
4.     CGContextFillRect(ctx, layer.bounds);  
5.       
6.     static const CGPatternCallbacks callbacks = { 0, &DrawColoredPattern, NULL};  
7.       
8.     CGContextSaveGState(ctx);  
9.     CGColorSpaceRef patterSpace = CGColorSpaceCreatePattern(NULL);  
10.     CGContextSetFillColorSpace(ctx, patterSpace);  
11.     CGColorSpaceRelease(patterSpace);  
12.       
13.     CGPatternRef pattern = CGPatternCreate(NULL, layer.bounds, CGAffineTransformIdentity, 24, 24, kCGPatternTilingConstantSpacing, true, &callbacks);  
14.     CGFloat alpha = 1.0;  
15.     CGContextSetFillPattern(ctx, pattern, &alpha);  
16.     CGPatternRelease(pattern);  
17.     CGContextFillRect(ctx, layer.bounds);  
18.     CGContextRestoreGState(ctx);  
19. }  

OK，这样就实现了一个完全自定义的图片样式化的显示了，虽然结果看起来好像是一张图片，可是实现却是使用CoreGraphics来绘制的。  

 Demo下载地址：sample project