這次的練習(xí)我們將擴(kuò)展第五章開發(fā)的Passport App割择,在本次練習(xí)中错邦,我們將全面過一遍Debugger和documentation(文檔)邀窃,最后,我們還會(huì)給App增加應(yīng)用圖標(biāo)和啟動(dòng)界面儡炼。見圖6-11。
Page 174 | Chapter 6 : Next Steps : Debugging, Documentation, and App Icons
首先我們找到Passport工程文件夾(見圖6-12)查蓉,打開Passport文件夾乌询,文件夾中有三部分,兩個(gè)文件夾和一個(gè)Passport.xcodeproj文件豌研。
Exercise: Expanding the Passport App | Page 175
見圖6-13的文件妹田,這些文件構(gòu)成了Passport應(yīng)用,在這里的文件層次和你Xcode中Project Navigator看到的文件層次是不一樣的鹃共。
Page 176 | Chapter 6 : Next Steps : Debugging, Documentation, and App Icons
三個(gè).swift文件蹈丸,文件名中包含其代表的類,Base.lproj文件夾中有.storyboard文件装畅,image.xcassets文件夾中保存App的圖標(biāo)恭应,Info.plist文件用來存儲(chǔ)App的一些細(xì)節(jié),例如版本號(hào)阴孟,bundle identifier(Bundle ID)晌纫。雙擊擴(kuò)展名.xcodeproj的文件打開工程。
我們要在Passport App中增加國家永丝,然后顯示在國家清單中锹漱。點(diǎn)開CountriesTableViewController.swift文件,把鼠標(biāo)放到數(shù)組中England后面慕嚷,然后輸入“Spain”哥牍,要在數(shù)組的中括號(hào)中輸入,然后點(diǎn)擊Play按鈕(Command+R)闯冷。
哎呀砂心,報(bào)錯(cuò)了。點(diǎn)擊左側(cè)的紅點(diǎn)蛇耀,然后出現(xiàn)Fix-It彈出框(見圖6-14)辩诞。點(diǎn)擊Fix-It,自動(dòng)在數(shù)組中添加一個(gè)逗號(hào)纺涤。然后點(diǎn)擊Play按鈕(Command+R)译暂。
Exercise: Expanding the Passport App | Page 177
App啟動(dòng)后,點(diǎn)擊Show Countries按鈕撩炊,查看剛剛增加的國家(見圖6-15)外永。
Page 178 | Chapter 6 : Next Steps : Debugging, Documentation, and App Icons
Spain并沒有出現(xiàn)在table view中,關(guān)閉iOS模擬器拧咳,然后回到CountriesTableViewController.swift文件伯顶。
滑倒cellForRowAtIndexFath方法,把鼠標(biāo)放到cell.textLabel.text = country
下方,Editor左側(cè)有一條灰色的區(qū)域祭衩,這塊區(qū)域叫做gutter灶体,點(diǎn)擊cell.textLabel.text = country
下方那行的gutter,生成一個(gè)breakpoint的(斷點(diǎn))掐暮。
生成breakpoint后會(huì)在gutter上出現(xiàn)一個(gè)藍(lán)色的箭頭蝎抽,這個(gè)藍(lán)色箭頭就是breakpoint(圖6-16)。breakpoint會(huì)暫停程序運(yùn)行路克,允許你一步一步的檢查每一行代碼樟结。用這種方法,可以能夠找到問題所在精算。點(diǎn)擊Play按鈕(Command+R)瓢宦。
Exercise: Expanding the Passport App | Page 179
App啟動(dòng)后,點(diǎn)擊Show Countries按鈕殖妇,這時(shí)模擬器會(huì)隱藏起來刁笙,Xcode出現(xiàn)在最前面破花,有breakpoint(斷點(diǎn))的那行代碼會(huì)高亮綠色背景谦趣,Debugger也會(huì)出現(xiàn)在Xcode最下方(見圖6-17)。
Page 180 | Chapter 6 : Next Steps : Debugging, Documentation, and App Icons
Debugger左側(cè)的清單列出了所有的變量座每,這個(gè)清單叫做variables view前鹅。請(qǐng)注意,country變量目前是設(shè)置成了Italy峭梳。點(diǎn)擊debug tool(調(diào)試工具欄)中的Continue按鈕舰绘,從左往右數(shù)第三個(gè)按鈕,外表看起來像是Play按鈕葱椭。
下載的指示會(huì)立即出現(xiàn)捂寿,然后breakpoint所在的那行代碼被標(biāo)注出綠色背景,再看country這個(gè)變量孵运,現(xiàn)在被設(shè)置成了Norway秦陋。然后繼續(xù)點(diǎn)擊debug tool(調(diào)試工具欄)中的Continue按鈕。
下載的指示會(huì)立即出現(xiàn)治笨,然后breakpoint所在的那行代碼被標(biāo)注出綠色背景驳概,再看country這個(gè)變量,現(xiàn)在被設(shè)置成了England旷赖。然后繼續(xù)點(diǎn)擊debug tool(調(diào)試工具欄)中的Continue按鈕顺又。
這時(shí)模擬器再次出現(xiàn)了,table view中還是和上次同樣的三個(gè)國家等孵。調(diào)試區(qū)域顯示cellForRowAtIndexFath方法被調(diào)用了三次稚照。
打開CountriesTableViewController.swift文件,去掉gutter上的breakpoint(斷點(diǎn)),看一下numberOfRowsInSection方法果录,返回值是3腌闯,這意味著table view中只有3個(gè)cell,把返回值那行代碼修改為:
return countries.count
這行代碼會(huì)讓cell的數(shù)量等于數(shù)組countries中的元素?cái)?shù)量雕憔。這樣姿骏,countries數(shù)組中每個(gè)元素都會(huì)有一個(gè)cell,所有的元素現(xiàn)在都能夠顯示到table view中了斤彼。點(diǎn)擊Play按鈕(Command+R)分瘦。
恭喜你!你剛剛修復(fù)了你第一個(gè)bug琉苇!
Documentation文檔
要是cell還能顯示更多東西就好了嘲玫。找到cellForRowAtIndexFath方法,按住Option鍵并扇,點(diǎn)擊方法中UITableViewCell這個(gè)詞去团,會(huì)出現(xiàn)一個(gè)快速幫助框(見圖6-18)。點(diǎn)擊UITableViewCellClass鏈接穷蛹。
Exercise: Expanding the Passport App | Page 181
出現(xiàn)UITableViewCell文檔窗口土陪,左側(cè)是文檔目錄,往下滑找到accessoryTpye然后點(diǎn)擊肴熏,文檔會(huì)出現(xiàn)下面的內(nèi)容:
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.
點(diǎn)擊UITableViewCellAccessoryTpye鬼雀,出現(xiàn)下列列表:
? None
? DisclosureIndicator
? DetailDisclosureButton
? Checkmark
? DetailButton
估計(jì)給每個(gè)國家增加一個(gè)check框會(huì)是不錯(cuò)的效果。關(guān)閉文檔蛙吏,把鼠標(biāo)放到cell.textLabel.text = country
下方源哩,增加下方代碼:
cell.accessoryType = .Checkmark
點(diǎn)擊Play按鈕(Command+R),現(xiàn)在tableview中每行都有checkmark了(見圖6-19)鸦做。
Page 182 | Chapter 6 : Next Steps : Debugging, Documentation, and App Icons
App Icon應(yīng)用圖標(biāo)
現(xiàn)在是時(shí)候給你的工程添加應(yīng)用圖標(biāo)了励烦。你可以從這個(gè)網(wǎng)站下載圖標(biāo)http://www.AppSchool.com/book.(這個(gè)網(wǎng)站我是打不開,你們?nèi)ゾW(wǎng)上下載免費(fèi)的圖標(biāo)用吧)泼诱。
Exercise: Expanding the Passport App | Page 183
接下來坛掠,打開文件夾,把文件夾放到圖6-20這個(gè)位置坷檩,正好在Xcode的右下角却音,打開Xcode中的Images.xcassets,點(diǎn)擊AppIcon矢炼,把圖標(biāo)拖到對(duì)應(yīng)的位置系瓢。
把每個(gè)文件放到對(duì)應(yīng)的框中(圖6-21)。
Page 184 | Chapter 6 : Next Steps : Debugging, Documentation, and App Icons
App圖標(biāo)添加完畢句灌。
打開LaunchScreen.xib文件夷陋,去掉Passport Label(見圖6-22)欠拾。選中Label刪掉。點(diǎn)擊Play按鈕(Command+R)啟動(dòng)模擬器骗绕。
點(diǎn)擊模擬器藐窄,這時(shí)頂部菜單選擇Hardware -> Home,可以看到我們剛剛設(shè)置的App Icon效果(圖6-23)酬土。
Exercise: Expanding the Passport App | Page 185
如果App沒有按照你想要的結(jié)果運(yùn)行荆忍,或者程序有了錯(cuò)誤或警告,不要太擔(dān)心撤缴,學(xué)習(xí)的最佳方式就是試錯(cuò)刹枉,熟能生巧,到我們的網(wǎng)站上下載示例代碼屈呕,對(duì)比一下代碼微宝,多試幾次,直到搞定這個(gè)程序?yàn)橹埂?/p>
Page 186 | Chapter 6 : Next Steps : Debugging, Documentation, and App Icons