Update 06/03/2016:Updated for Xcode 7.2 and Object-C
试图在你的脑海里描绘这样的一幅场景,自己苦心完成的app却丑的连自己都不忍直视。你可能会试图用Photoshop做出一大串各种适配的图片,并且不断祈祷苹果最好不要出现retina屏,不然你会分分秒因为自己的五毛特效吐血身亡,或者脑细胞不够用缺氧窒息而死......
好了,上面的场景你可能已经有所体会过,现在想来也有所后怕。然而,iOS开发中有一把利剑可以斩断你之前所有苦恼的情丝。从今天开始,三节课助你摆脱困境。Core Graphics就是你的一剂良药,你可以用它以代码的方式创建可以“猴赛雷”犀利匹配任意设备的图片。
Core Graphics是苹果的一个矢量作图框架-它远非你所能想象,总能给你带来惊喜,因而也绝不是两三节课就能悟透其中真谛。但无需畏惧---接下来的三节课,我会弃繁从简,带你走进Core Graphics的世界,领略它是多么的美,多么令人赞叹不已,多么让人爱不释手。
现在,grab your favorite beverage , let's begin!
Introducing Flo - One glass at a time
接下来我们将着手创造一个完整的app,用来追踪你的喝水习惯。
具体点讲,它会追踪你喝了多少水。我们常被告知一天喝八杯水有利身体健康,然后如此简单易行之事也容易常常被我们忘记,这就是Flo诞生的目的:提醒你,记得,喝水,像妈妈提醒你要起床尿尿一样......:]每次你喝完一杯水,你就点击添加按钮。Flo还会通过图表的方式向你展示你前七天的饮水量。
在第一部分,你将使用UIKit's下的drawing方法创建三个控件。
在第二部分,你将深入了解Core Graphics中的contexts并且绘制图形。
在第三部分,你将着手创建一个有图案的背景和一个奖励自己的自制核心图形奖章。
Getting Started
首先,创建一个新工程(File\New\Project...),光标移到左边模板,选择iOS\Application\Single View Application,然后点击next。
完善工程信息,设置Product Name为Flo,语言选择为Swift,然后点击next.
现在,项目创建完成。
Custom Drawing on Views
无论何时你试图自定义绘图,你都需要按照下面这二个步骤:
1、创建一个UIView的子类
2、重写drawRect(_:)并且在方法中添加相对应的代码
现在让我们试着制作一个下面这个按钮:
创建一个new File(File\New\File...),选择 iOS\Source\Cocoa Touch Class 并且命名这个新类为PushButtonView。 使它继承自UIButton, 并且确保language为Swift,点击Next,Create,搞定。
UIButton是UIView的一个子类,所以在UIView中有的方法,比如drawRect(_:),同样存在UIButton中。
在Main.storyboard, 拖拽UIButton到view controller的view中,在Document Outline中光标选择UIButton。
在Identity Inspector,改变Class为PushButtonView。
在Size Inspector,设置X=250,Y=350,Width=100,Height=100。
Auto Layout Constraints
这一步我们设置Auto Layout约束:
操作是这样的:
1、按住control键,鼠标向UIButton左侧但仅在UIButton内部拖动,选择Width,此招设置UIButton的宽度约束。
2、按住control键,鼠标向UIButton顶部但仅在UIButton内部拖动,选择Height,此招设置UIButton的高度约束。
3、按住control键,鼠标向UIButton顶部拖动直至UIButton外侧,选择Center Vertically in Container,此招设置UIButton相对于view container的view水平方向居中。
4、按住control键,鼠标向UIButton左侧拖动直至UIButton外侧,选择Center Horizontally in Container,此招设置UIButton相对于view container的view垂直方向居中。
结果在Size Inspector中显示如下:
在Attributes Inspector,移除默认Title"Button"。
Drawing the Button
首先,我们需要将button磨成圆的:
使用Core Graphics绘画,你必须定义一条供Core Graphics追踪的路径(就像按钮中的两条十字交叉的线)或者一条供Core Graphics填充的路径(就像填充圆形)。如果你有类似用Photoshop创作矢量形状或者插画的经历,路径的概念对你可能不难理解。
路径的三个基本:
1、路径可以被描边和被填充
2、路径使用当前描边颜色描边
3、路径使用当前填充颜色填充
使用UIBezierPath可以快速便利地创建一条Core Graphics路径。无论路径是基于直,曲,矩形或者是一连串连洁的点,UIBezierPath总能让你用起来得心应手。
让我们试着用UIBezierPath创造一条被绿色浸染的路径。打开PushButtonView.Swift,加入这个方法:
Object-C下的实现方法如下:
运行后:哇,嘻嘻,多么神奇的一个圆形按钮就这样形成了,其实这只是小菜一碟,原来其实就是这样,用UIBezierPath的类方法创建一个oval-shaped,即圆形的路径,然后依据之前说的路径的三个基本中的第三点,路径使用当前填充颜色填充,所以设置提冲颜色为green,通过路径调用fill方法来填充路径。
Build,Run,完美:
哈哈,不难吧,创建一条路径简直是信手拈来的一件事,其实,按钮本身的大小并没有变化哦,如果你设置button的背景色除了白色的其他颜色,然后运行,你会发现,多了四个角出来。对了,路径是路径,button归button,我路径干我路径自己的事,我button干我button自己的事,互不相干。
Behind the Scenes in Core Graphics
每个UIView都有一个graphics context,(这句不知道怎么翻译合适,所以原文摘抄下来,欢迎提供合适翻译-),and all drawing for the view renders into this context before being transferred to the device's hardware.
iOS通过调用drawRect(:)更新context,一旦需要更新view,以下三种情况会调用drawRect(:):
1、view是"fish",就是view是新来的_;
2、建立在view上的其他views移动了;
3、view不可见(即对自身可见,意思就是定义在m文件中的属性)属性改变了;
4、view上调用了setNeedsDisplay()或者setNeedDisplayInRect()方法。