swift语言ios开发：calayer十则示例

作者：Scott Gardner 译者：TurtleFromMars原文:CALayer in iOS with Swift: 10 Examples如你所知，我们在iOS应用中看到的都是视图（view），包括按钮视图、表视图、滑动条视图，还有可以容纳其他视图的父视图等。但你或许不知道在iOS中支撑起每个视图的是一个叫做”图层（layer）”的类，确切地说是CALayer。本文中您会了解CALayer及其工作原理，还有应用CALayer打造酷炫效果的十则示例，比如绘制矢量图形、渐变色，甚至是粒子系统。本文要求读者熟悉iOS应用开发和Swift语言的基础知识，包括利用Storyboard构建用户界面。注：如果您尚未掌握这些基础，不必担心，我们有不少相关教程，例如使用Swift语言编写iOS应用和iOS学徒。准备开始要理解图层是什么，最简便的方式就是”实地考察”。我们这就创建一个简单的项目，从头开始玩转图层。准备好写代码了吗？好！启动Xcode，然后：1.选择FileNewProject菜单项。2.在对话框中选择iOSApplicationSingle View Application。3.点击Next，Product Name填写CALayerPlayground，然后输入你自己的Organization Name和Identifier。4.Language选Swift，Devices选Universal。5.取消选择Core Data，点击Next。6.把项目保存到合适的位置（个人习惯把项目放在用户目录下建立的Source文件夹），点击Create。好，文件准备就绪，接下来就是创建视图了：7.在项目导航栏（Project navigator）中选择Main.storyboard。8.选择ViewAssistant EditorShow Assistant Editor菜单项，如果没有显示对象库（Object Library），请选择ViewUtilitiesShow Object Library。9.然后选择EditorCanvasShow Bounds Rectangles，这样在向场景添加视图时就可以看到轮廓了。10.把一个视图（View）从对象库拖入视图控制器场景，保持选中状态，在尺寸检查器（ViewUtilitiesShow Size Inspector）中将x和y设为150，Width和Height设为300。11.视图保持选中，点击自动布局工具栏（Storyboard右下角）的Align按钮，选中Horizontal Center in Container和Vertical Center in Container，数值均为0，然后点击Add 2 Constraints。12.点击Pin按钮，选中Width和Height，数值均设为300，点击Add 2 Constraints。最后按住control从刚刚创建的视图拖到ViewController.swift文件中viewDidLoad()方法的上方，在弹框中将outlet命名为viewForLayer，如图：点击Connect创建outlet。将ViewController.swift中的代码改写为：importUIKitclassViewController:UIViewControllerIBOutletweakvarviewForLayer:UIView!varl:CALayerreturnviewForLayer.layeroverridefuncviewDidLoad()super.viewDidLoad()setUpLayer()funcsetUpLayer()l.backgroundColor=UIColor.blueColor().CGColorl.borderWidth=100.0l.borderColor=UIColor.redColor().CGColorl.shadowOpacity=0.7l.shadowRadius=10.0之前提到iOS中的每个视图都拥有一个关联的图层，你可以通过yourView.layer访问图层。这段代码首先创建了一个叫”l”（小写L）的计算属性，方便访问viewForLayer的图层，可让你少写一些代码。这段代码还调用了setUpLayer方法设置图层属性：阴影，蓝色背景，红色粗边框。你马上就可以了解这些东西，不过现在还是先构建App，在iOS模拟器中运行（我选了iPhone 6），看看自定义的图层如何。几行代码，效果还不错吧？还是那句话，每个视图都由图层支撑，所以你也可以对App中的任何视图做出类似修改。我们继续深入。CALayer基本属性CALayer有几个属性可以用来自定外观，想想刚才做的：把图层背景色从默认的无色改为蓝色通过把边框宽度从默认的0改为100来添加边框把边框颜色从默认的黑色改为红色最后把阴影透明度从0（全透明）改为0.7，产生阴影效果，此外还把阴影半径从默认的3改为10。以上只是CALayer中可以设置的部分属性。我们再试两个，在setUpLayer()中追加以下代码：l.contents=UIImage(named:”star”)?.CGImagel.contentsGravity=kCAGravityCenterCALayer的contents属性可以把图层的内容设为图片，这里我们要设置一张”星星”的图片，为此你需要把图片添加到项目中，请下载图片并添加到项目中。构建，运行，欣赏一下效果：注意星星居中，这是因为contentsGravity属性被设为kCAGravityCenter，如你所想，重心也可以设为上、右上、右、右下、下、左下、左、左上。更改图层外观仅供娱乐，我们来添加几个手势识别器来控制图层外观。在Xcode中，向viewForLayer对象上拖一个轻触手势识别器（tap gesture recognizer），见下图：注：如果你对手势识别器比较陌生，请参阅Using UIGestureRecognizer with Swift。以此类推，再添加一个捏合手势识别器（pinch gesture recognizer）。然后按住control依次将两个手势识别器从Storyboard场景停靠栏拖入ViewController.swift，放在setUpLayer()和类自身的闭合花括号之间。在弹框中修改连接为Action，命名轻触识别操作为tapGestureRecognized，捏合识别操作为pinchGestureRecognized，例如：如下改写tapGestureRecognized(_:)：IBActionfunctapGestureRecognized(sender:UITapGestureRecognizer)l.shadowOpacity=l.shadowOpacity=0.7?0.0:0.7当令视图识别出轻触手势时，代码告知viewForLayer图层在0.7和0之间切换阴影透明度。你说视图？嗯，没错，重写CALayer的hitTest(_:)也可以实现相同效果，本文后面也会看到这个方法，不过我们这里用的方法也有道理：图层本身并不能响应手势识别，只能响应点击测试，所以我们在视图上设置了轻触手势识别器。然后如下修改pinchGestureRecognized(_:)：IBActionfuncpinchGestureRecognized(sender:UIPinchGestureRecognizer)letoffset:CGFloat=sender.scale=100.0&&newFrame.width此处基于用户的捏合手势创建正负偏移值，借此调整图层框架大小、边缘宽度和边角半径。图层的边角半径默认值为0，意即标准的90度直角。增大半径会产生圆角，如果想将图层变成圆形，可以设边角半径为宽度的一半。注意：调整边角半径并不会裁剪图层内容（星星图片），除非图层的masksToBounds属性被设为true。构建运行，尝试在视图中使用轻触和捏合手势：嘿，再好好装扮一下都能当头像用了！ :CALayer体验CALayer中的属性和方法琳琅满目，此外还有几个包含特有属性和方法的子类。要遍历如此酷炫的API，Raywenderlich.com导游先生最好不过了。接下来，你需要以下材料：Layer Player AppLayer Player 源代码该App包含十种不同的CALayer示例，本文后面会依次介绍，十分方便。先来吊吊大家的胃口：下面在讲解每个示例的同时，我建议在CALayer演示应用中亲自动手试验，还可以读读代码。不用写，只要深呼吸，轻松阅读就可以了。 :我相信这些酷炫的示例会启发您利用不同的CALayer为自己的App锦上添花，希望大家喜欢！示例 #1：CALayer前面我们看过使用CALayer的示例，也就是设置各种属性。关于CALayer还有几点没提：图层可以包含子图层。就像视图可以包含子视图，图层也可以有子图层，稍加利用就能打造漂亮的效果！图层属性自带动画效果。修改图层属性时，存在默认的动画效果，你也可以自定义动画行为。图层是轻量概念。相对视图而言，图层更加轻量，因此图层可以帮助提升性能。图层有大量实用属性。前面你已经看过几条了，我们继续探索！刚刚说CALayer图层有很多属性，我们来看一批实用属性：有些属性你可能第一次见，但真的很方便！/1letlayer=CALayer()layer.frame=someView.bounds/2layer.contents=UIImage(named:”star”)?.CGImagelayer.contentsGravity=kCAGravityCenter/3layer.magnificationFilter=kCAFilterLinearlayer.geometryFlipped=false/4layer.backgroundColor=UIColor(red:11/255.0,green:86/255.0,blue:14/255.0,alpha:1.0).CGColorlayer.opacity=1.0layer.hidden=falselayer.masksToBounds=false/5layer.cornerRadius=100.0layer.borderWidth=12.0layer.borderColor=UIColor.whiteColor().CGColor/6layer.shadowOpacity=0.75layer.shadowOffset=CGSize(width:0,height:3)layer.shadowRadius=3.0someView.layer.addSublayer(layer)在以上代码中：创建一个CALayer实例，并把框架设为someView边框。将图层内容设为一张图片，并使其在图层内居中，注意赋值的类型是底层的Quartz图像数据（CGImage）。使用过滤器，过滤器在图像利用contentsGravity放大时发挥作用，可用于改变大小（缩放、比例缩放、填充比例缩放）和位置（中心、上、右上、右等等）。以上属性的改变没有动画效果，另外如果geometryFlipped未设为true，几何位置和阴影会上下颠倒。继续：把背景色设为Ray最爱的深绿色。: 然后让图层透明、可见。同时令图层不要遮罩内容，意思是如果图层尺寸小于内容（星星图片），图像不会被裁减