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方法中添加如下代码：

self . view . layer . backgroundColor  =   [ UIColor  orangeColor ]. CGColor ;   self . view . layer . cornerRadius  =   20.0f ; 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：

CALayer   * subLayer  =   [ CALayer  layer ];  subLayer . backgroundColor  =   [ UIColor  blueColor ]. CGColor ;  subLayer . shadowColor  = [ UIColor  blackColor ]. CGColor ;  subLayer . shadowOffset  =   CGSizeMake ( 0 ,   5 );  subLayer . shadowRadius  =   5.0f ; subLayer . shadowOpacity  =   0.8f ;  subLayer . frame  =   CGRectMake ( 30.0f ,   30.0f ,   128 ,   192 );  subLayer . borderColor  =   [ UIColor blackColor ]. CGColor ;  subLayer . borderWidth  =   2.0f ;  subLayer . cornerRadius  =   10.0f ;   [ 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：

CALayer   * customDrawn  =   [ CALayer  layer ];  customDrawn . delegate   =   self ;  customDrawn . backgroundColor  =   [ UIColor greenColor ]. CGColor ;  customDrawn . frame  =   CGRectMake ( 30 ,   250 ,   128 ,   40 );  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 ];   [ customDrawn setNeedsDisplay ];
使用C++语法写一个绘制方法：

void   DrawColoredPattern ( void   * info ,   CGContextRef  context ){   CGColorRef  dotColor  =   [ UIColor  colorWithHue : 0  saturation : 0 brightness : 0.07f  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 );   }
重写CALayer的drawLayer：inContext方法：

-( void ) drawLayer :( CALayer   *) layer inContext :( CGContextRef ) ctx {   CGColorRef  bgColor  =   [ UIColor  colorWithHue : 0.6 saturation : 1.0  brightness : 1.0  alpha : 1.0 ]. CGColor ;   CGContextSetFillColorWithColor ( ctx ,  bgColor );   CGContextFillRect ( ctx , layer . bounds );   static   const   CGPatternCallbacks  callbacks  =   {   0 ,   & DrawColoredPattern ,  NULL };   CGContextSaveGState ( ctx ); CGColorSpaceRef  patterSpace  =   CGColorSpaceCreatePattern ( NULL );   CGContextSetFillColorSpace ( ctx ,  patterSpace ); CGColorSpaceRelease ( patterSpace );   CGPatternRef  pattern  =   CGPatternCreate ( NULL ,  layer . bounds , CGAffineTransformIdentity ,   24 ,   24 ,  kCGPatternTilingConstantSpacing ,   true ,   & callbacks );   CGFloat  alpha  =   1.0 ; CGContextSetFillPattern ( ctx ,  pattern ,   & alpha );   CGPatternRelease ( pattern );   CGContextFillRect ( ctx ,  layer . bounds ); CGContextRestoreGState ( ctx ); }