CALayer

CALayer的简单的使用

转：http://www.raywenderlich.com/2502/introduction-to-calayers-tutorial的

如果你已经为iPhone编程，你可能很熟悉的UIViews - 按钮，文本区域，滑块，Web视图，更是所有UIView的子类。

但你可能不知道得多关于UIView的技术是建立在：CALayers的！至少我没有，相当长一段时间。

这是很好的知道一点关于CALayers，因为你可以用它们来创造一些整洁的视觉效果真的很容易。他们也很重要，了解工作的核心动画，我们将讨论在未来的教程。

在本教程中，你要学习的基础知识做一个简单的应用程序，它看起来如何创建一个层和实验使用CALayers的。在这个过程中，你会学到什么层，一些巧妙的可以设置的属性，以及如何把图像和自定义绘制的内容里面。

本教程假定iPhone编程有基本的了解。如果你是完全新的，你可能会想如何开始，首先要创建一个简单的iPhone应用程序的教程系列。

因此，让我们分层！

什么CALayers？

CALayers只是类代表一个矩形在屏幕上的视觉内容。

“但是等待织补分钟，”你可能会说，“那什么的UIViews是！”这是真的，但有一招：每个UIView的包含根层，它吸引！你可以访问这个层（默认情况下为您创建）继位的代码：

CALayer的* myLayer = myView.layer;

CALayer类的整洁的事情是，它包含了很多属性，您可以设置它来影响视觉外观，如：

• 的层的大小和位置
• 该层的背景颜色
• 该层的内容（图像或绘制核芯显卡的东西）
• 是否应为圆形的角层
• 设置应用层阴影
• 层的边缘周围将笔触
• 还有更多！

您可以使用这些属性来创建一些整齐的效果。例如，也许要拍摄图像，然后把它放在一个白色框，并将其应用到它的影子，使它看起来整齐。而非鞭打Photoshop或创造了一堆核心图形代码，你可以做这几行代码，使用CALayers的！

CALayer的属性的其他利落的事情是，他们大多是动画的。例如，你可以开始你的形象与圆润的边角，轻按一键，它的动画的角落直。这可以使一些非常整齐的效果！

您可以使用一个CALayer对自己，或者你可以使用一个方便的子类，如CATextLayer CAGradientLayer，CAShapeLayer，和其他可用。一个UIView类的默认层是纯老CALayer类，那就是你会在本教程重点。

入门

有没有更好的方式来了解使用CALayers的，而不是自己尝试出来！所以装载的XCode，去到文件\新建项目，选择的iOS \应用\基于视图的应用程序，然后点击“选择”。命名的的项目LayerFun，并单击“保存”。

基于视图的应用程序模板单一视图控制器开始，如你所知，每个视图控制器有一个根视图。正如你上面学到，每个视图有一个根层。

所以，现在你就试试这个自己通过改变一些属性视图层。

但是首先第一件事情。要使用的CALayers和核心动画，你需要使用一个框架，默认情况下，不包括基于视图的模板：QuartzCore。所以，把它添加到你的项目通过控制点击框架组，选择“添加\现有框架，并从下拉列表中选择QuartzCore.framework。

现在你已经包括QuartzCore，到LayerFunViewController.m进行以下更改：

/ /进口QuartzCore.h的文件顶部 ＃导入<QuartzCore/QuartzCore.h>的   / /取消注释的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 ） ;

让去该位位，因为这是新的东西：

• 为了得到一个指针到视图层，只需使用self.view.layer。记住，你可以通过调用self.view视图控制器的根视图。一旦你有看法，你可以得到它的默认层（自动创建）使用view.layer。默认情况下，该层是一个的CALayer的（不是一个子类）。
• 接下来，设置图层的背景颜色为橙色。注意backgroundColor属性需要CGColor的，但它很容易转换的UIColor CGColor使用CGColor属性。
• 接下来，你有点圆角的圆角半径设置。你传递的值是半径圆拼成的角落，并选择20一个不错的圆形边缘。
• 最后，你收缩的框架了一点，所以它更容易看到的，由使用得心应手的CGRectInset函数。的CGRectInset功能需要一个框架和金额萎缩（X和Y），并返回一个新的框架。

编译并运行你的代码，你应该在你的屏幕中间看到一个圆形的橙色矩形：

CALayers和子层

的UIViews一样可以有子视图，CALayers可以有子层。您可以创建一个新的CALayer很容易与下面的一行代码：

CALayer的*子层= [ CALayer的层] ;

一旦你有一个CALayer，你可以设置你喜欢的任何属性。但要记住，你一定要设置一个属性：它的帧（或边界/位置）。毕竟，层需要知道它有多大（和它的位置），以自行绘制！当你完成后，你可以添加新的层，其他层的一个子层，由下面这行代码：

[ myLayer addSublayer ：底层] ;

好了，现在尝试了这一点，为自己添加一个简单的子层，视图层。添加以下几行代码里面viewDidLoad中，右后最后一次你离开的地方：

CALayer的*子层= [CALayer的层]; 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：底层];

这将创建一个新层，并设置了几个属性 - 其中包括一些以前从未见过的设置阴影。这里你可以看到它是多么容易设置上了一层阴影 - 用很少的努力，可以给一些惊人的效果！

设置的属性后，它集层的框架，并把它作为视图层的一个子层。请记住这些坐标是相对于父层的帧，因为父层（20,20）开始，子层将被抵消额外的（30,30）从该屏幕上，所以它会在（50 ，50）。

编译并运行你的代码，你现在应该看到一个蓝色的子层在屏幕上！

设置CALayer的图片内容

一最酷的事情关于CALayers的是，它们可以包含超过只是普通的颜色。他们包含图像，例如，它是非常容易。

所以，让我们的图像，而不是取代蓝子层。你可以把你的iPhone应用程序之一的Default.jpg作为测试使用，或从我的应用程序，你可以下载一个闪屏。

闪屏添加到您的项目，里面viewDidLoad中权前的最后行补充，增加了底层self.view.layer，添加以下几行代码：

[ sublayer.contents = （ID ） 的UIImage imageNamed ：@ “BattleMapSplashScreen.jpg”的CGImage; sublayer.borderColor = [的UIColor blackColor ]。CGColor的; sublayer.borderWidth = 2.0 ;

这层的内容设置到图像（这是从字面上所有需要！），并设置的BORDERCOLOR和边框宽度，周围的边缘设立一个黑色笔触，向人们展示它是如何工作。

编译并运行你的代码，你现在应该可以看到蓝色的层的内容替换为您的初始屏幕图像！

注：关于圆角半径和图像内容

现在，你有这方面的工作，你可能会认为它会很酷圆角的闪屏，设置的cornerRadius。

那么问题是，只要我可以告诉，如果你设置一个CALayer影像内容，仍然会被绘制图像的圆角半径边界以外。您可以解决这个设置为YES sublayer.masksToBounds，但如果你这样做的阴影不会显示出来，因为他们会被屏蔽掉！

我发现了一个解决方法，通过创建两层。最外层是只有一个彩色边框和阴影的CALayer。所述内层包含该图像，也圆，但掩膜。这样一来，外层可以绘制阴影，和内层可以包含图像。

尝试了这一点，通过修改代码来创建子层如下：

CALayer的*子层= [ CALayer的层] ; 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 ;= 10.0 sublayer.cornerRadius ; [ self.view.layer addSublayer ：底层] ;   CALayer的* imageLayer = [ CALayer的层] ; imageLayer.frame = sublayer.bounds; imageLayer.cornerRadius = 10.0 ;[ imageLayer.contents = （ID ） 的UIImage imageNamed ：@ “BattleMapSplashScreen.jpg”的CGImage; imageLayer.masksToBounds = YES ; [子层addSublayer ： imageLayer ] ;

编译并运行你的代码，现在你的形象将有圆角！

CALayer的和自定义绘制的内容

如果你想自定义绘制一个层的内容与核芯显卡，而不是把里面的图像，那是相当的容易。

我们的想法是你设置一个类的委托层，并且该类需要实现一个方法名为drawLayer：inContext，。这可以包含核心图形的绘制代码绘制任何你想要的，在该空间。

让我们尝试通过添加一个新层，并描绘图案里面。你设置视图控制器层的委托，实施drawLayer：inContext方法来绘制图案。至于图案的绘制代码，你可以使用相同的代码在核芯显卡101：模式教程早些时候发布在此网站上。

viewDidLoad中的底部添加下面的代码添加一个新图层，将自定义绘制：

CALayer的* customDrawn = [ CALayer的层] ; customDrawn.delegate =自我; customDrawn.backgroundColor = [的UIColor绿彩]。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 ] ;

大多数这里的代码，你以前见过（创建一个图层，设置属性，如阴影/的cornerRadius /边框/ masksToBounds的的），但有两个新的作品：

1. 首先，它自我层的委托。这意味着这个对象（个体经营）需要，实施drawLayer：inContext方法绘制的内容层。
2. 其次，它增加了一层后，它需要告诉层刷新自己（，呼叫drawLayer：inContext）通过调用setNeedsDisplay。如果你忘记打电话，drawLayer：inContext永远不会被调用，因此该模式将不显示！

接下来添加代码以实现drawLayer：inContext，如下所示：

无效的 MyDrawColoredPattern （无效 信息CGContextRef上下文） {   CGColorRef dotColor = [的UIColor colorWithHue上：0饱和度：0亮度：0.07阿尔法：1.0 ]。CGColor; CGColorRef shadowColor = [的UIColor colorWithRed上：1绿1蓝：1阿尔法：0.1 ]。CGColor;   CGContextSetFillColorWithColor （上下文，dotColor ） ; CGContextSetShadowWithColor 上下文，CGSizeMake （0，1 ​​），（1，shadowColor ） ;   CGContextAddArc （上下文，3，3，4，0，弧度（360 ），0 ） ; CGContextFillPath （上下文） ;   CGContextAddArc （上下文中，16，16，4，0，弧度（360 ），0 ） ; CGContextFillPath （上下文） ;   }   - （无效） drawLayer ：（ CALayer的* ）层inContext ：（ CGContextRef ），的上下文{   CGColorRef BGCOLOR = 的UIColor colorWithHue ：0.6饱和1.0亮度：1.0阿尔法：1.0 ]。CGColor; CGContextSetFillColorWithColor （上下文，BGCOLOR ） ; CGContextFillRect （上下文，layer.bounds ） ;   的静态 常量 CGPatternCallbacks回调= { 0，MyDrawColoredPattern，NULL } ;   CGContextSaveGState （上下文） ; CGColorSpaceRef patternSpace = CGColorSpaceCreatePattern （NULL ） ; CGContextSetFillColorSpace （上下文，patternSpace ） ; CGColorSpaceRelease （ patternSpace ） ;   CGPatternRef模式= CGPatternCreate （NULL， layer.bounds CGAffineTransformIdentity， 24， 24， kCGPatternTilingConstantSpacing， 真正回调） ; CGFloat的α = 1.0 ; CGContextSetFillPattern （上下文，模式，与 α- ） ; CGPatternRelease （图案） ; CGContextFillRect （上下文，layer.bounds ） ; CGContextRestoreGState （上下文） ; }

这个代码是逐字地复制和粘贴的核芯显卡101：模式 教程（只是用不同的颜色，并使用通过上下文和层越界），所以我们不会再涂一遍。如果你想知道那是什么，请参考上面的教程。

这就是它！编译并运行代码，您现在应该看到一个蓝色的抓地力图案下面的图像。

从这里去哪里？

这里是一个示例项目上面的教程中我们已经开发的所有代码。

在这一点上，你应该熟悉的概念的的CALayers和如何创造一些与他们整齐的效果真的很容易。在以后的教程中，我会告诉你如何可以动画使用核心动画CALayers，以及使用CALayer的，如CAGradientLayer，CATextLayer，CAShapeLayer一些真正好用的子类。

在此期间，检查出的核心动画编程指南，做了伟大的工作，谈论的Core Animation，和更多细节CALayers的。

如果您发现了一些好方法，在你的项目中使用CALayers，请下面分享！：]