扩展护照App的功能~第六章练习Expanding the Passport App

这次的练习我们将扩展第五章开发的Passport App,在本次练习中,我们将全面过一遍Debugger和documentation(文档),最后,我们还会给App增加应用图标和启动界面。见图6-11。

Page 174 | Chapter 6 : Next Steps : Debugging, Documentation, and App Icons

图6-11

首先我们找到Passport工程文件夹(见图6-12),打开Passport文件夹,文件夹中有三部分,两个文件夹和一个Passport.xcodeproj文件。

图6-12

Exercise: Expanding the Passport App | Page 175

见图6-13的文件,这些文件构成了Passport应用,在这里的文件层次和你Xcode中Project Navigator看到的文件层次是不一样的。

图6-13

Page 176 | Chapter 6 : Next Steps : Debugging, Documentation, and App Icons

三个.swift文件,文件名中包含其代表的类,Base.lproj文件夹中有.storyboard文件,image.xcassets文件夹中保存App的图标,Info.plist文件用来存储App的一些细节,例如版本号,bundle identifier(Bundle ID)。双击扩展名.xcodeproj的文件打开工程。

我们要在Passport App中增加国家,然后显示在国家清单中。点开CountriesTableViewController.swift文件,把鼠标放到数组中England后面,然后输入“Spain”,要在数组的中括号中输入,然后点击Play按钮(Command+R)。

哎呀,报错了。点击左侧的红点,然后出现Fix-It弹出框(见图6-14)。点击Fix-It,自动在数组中添加一个逗号。然后点击Play按钮(Command+R)。

图6-14

Exercise: Expanding the Passport App | Page 177

App启动后,点击Show Countries按钮,查看刚刚增加的国家(见图6-15)。

图6-15

Page 178 | Chapter 6 : Next Steps : Debugging, Documentation, and App Icons

Spain并没有出现在table view中,关闭iOS模拟器,然后回到CountriesTableViewController.swift文件。

滑倒cellForRowAtIndexFath方法,把鼠标放到cell.textLabel.text = country下方,Editor左侧有一条灰色的区域,这块区域叫做gutter,点击cell.textLabel.text = country下方那行的gutter,生成一个breakpoint的(断点)。

生成breakpoint后会在gutter上出现一个蓝色的箭头,这个蓝色箭头就是breakpoint(图6-16)。breakpoint会暂停程序运行,允许你一步一步的检查每一行代码。用这种方法,可以能够找到问题所在。点击Play按钮(Command+R)。

图6-16

Exercise: Expanding the Passport App | Page 179

App启动后,点击Show Countries按钮,这时模拟器会隐藏起来,Xcode出现在最前面,有breakpoint(断点)的那行代码会高亮绿色背景,Debugger也会出现在Xcode最下方(见图6-17)。

图6-17

Page 180 | Chapter 6 : Next Steps : Debugging, Documentation, and App Icons

Debugger左侧的清单列出了所有的变量,这个清单叫做variables view。请注意,country变量目前是设置成了Italy。点击debug tool(调试工具栏)中的Continue按钮,从左往右数第三个按钮,外表看起来像是Play按钮。

下载的指示会立即出现,然后breakpoint所在的那行代码被标注出绿色背景,再看country这个变量,现在被设置成了Norway。然后继续点击debug tool(调试工具栏)中的Continue按钮。

下载的指示会立即出现,然后breakpoint所在的那行代码被标注出绿色背景,再看country这个变量,现在被设置成了England。然后继续点击debug tool(调试工具栏)中的Continue按钮。

这时模拟器再次出现了,table view中还是和上次同样的三个国家。调试区域显示cellForRowAtIndexFath方法被调用了三次。

打开CountriesTableViewController.swift文件,去掉gutter上的breakpoint(断点),看一下numberOfRowsInSection方法,返回值是3,这意味着table view中只有3个cell,把返回值那行代码修改为:

return countries.count

这行代码会让cell的数量等于数组countries中的元素数量。这样,countries数组中每个元素都会有一个cell,所有的元素现在都能够显示到table view中了。点击Play按钮(Command+R)。

恭喜你!你刚刚修复了你第一个bug!

Documentation文档

要是cell还能显示更多东西就好了。找到cellForRowAtIndexFath方法,按住Option键,点击方法中UITableViewCell这个词,会出现一个快速帮助框(见图6-18)。点击UITableViewCellClass链接。

图6-11

Exercise: Expanding the Passport App | Page 181

出现UITableViewCell文档窗口,左侧是文档目录,往下滑找到accessoryTpye然后点击,文档会出现下面的内容:

The accessory view appears in the right side of the cell in the table view’s normal (default)state. The standard accessory views include the disclosure chevron; for a description ofvalid accessoryType constants, see UITableViewCellAccessoryType.

点击UITableViewCellAccessoryTpye,出现下列列表:

• None
• DisclosureIndicator
• DetailDisclosureButton
• Checkmark
• DetailButton

估计给每个国家增加一个check框会是不错的效果。关闭文档,把鼠标放到cell.textLabel.text = country下方,增加下方代码:

cell.accessoryType = .Checkmark

点击Play按钮(Command+R),现在tableview中每行都有checkmark了(见图6-19)。

图6-19

Page 182 | Chapter 6 : Next Steps : Debugging, Documentation, and App Icons

App Icon应用图标

现在是时候给你的工程添加应用图标了。你可以从这个网站下载图标http://www.AppSchool.com/book.(这个网站我是打不开,你们去网上下载免费的图标用吧)。

Exercise: Expanding the Passport App | Page 183

接下来,打开文件夹,把文件夹放到图6-20这个位置,正好在Xcode的右下角,打开Xcode中的Images.xcassets,点击AppIcon,把图标拖到对应的位置。

图6-20

把每个文件放到对应的框中(图6-21)。

图6-21

Page 184 | Chapter 6 : Next Steps : Debugging, Documentation, and App Icons

App图标添加完毕。

打开LaunchScreen.xib文件,去掉Passport Label(见图6-22)。选中Label删掉。点击Play按钮(Command+R)启动模拟器。

图6-22

点击模拟器,这时顶部菜单选择Hardware -> Home,可以看到我们刚刚设置的App Icon效果(图6-23)。

图6-23

Exercise: Expanding the Passport App | Page 185

如果App没有按照你想要的结果运行,或者程序有了错误或警告,不要太担心,学习的最佳方式就是试错,熟能生巧,到我们的网站上下载示例代码,对比一下代码,多试几次,直到搞定这个程序为止。

Page 186 | Chapter 6 : Next Steps : Debugging, Documentation, and App Icons

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

推荐阅读更多精彩内容