Core Graphic之旅Part1:Getting Started(翻译)

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()方法。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,163评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,301评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,089评论 0 352
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,093评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,110评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,079评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,005评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,840评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,278评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,497评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,394评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,980评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,628评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,649评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,548评论 2 352

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,092评论 4 62
  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 25,365评论 7 249
  • 2014年元旦,我和朋友去台湾跨年,发生一件小事,至今难忘。 首站高雄,在酒店checkin后,怀着初到台湾的新鲜...
    打小阅读 522评论 0 0
  • 我- 我的想法泛滥… 我的期盼满满… 我的孤独更多… 我- 我没有男朋友不成问题,别人的逼问成了我的问题,是谁说2...
    一个人的世界阅读 154评论 0 4
  • 华科的路都是笔直笔直的,建筑也都方方正正,布局规划工工整整,路上大多是梧桐树,花树几乎不见,穿梭在里面的时候很明显...
    诗琴叔叔阅读 263评论 0 3