在這章練習叫做Passport，Passport是一個非常簡單的應用，展示個人的名字、生日、國籍和照片（圖5-1）。Passport還提供各種國家供你選擇，顯示曾經去過哪些國家。這個練習將會在下一章中繼續使用。
Exercise: Passport | Page 143
打開Xcode吧，點擊頂部菜單欄的File -> New -> Project（見圖5-2）。
從模板中選擇Single View Application，點擊Next（見圖5-3）。
Page 144 | Chapter 5 : Building Multiscreen Apps
在Product Name一欄輸入Passport，Language選擇Swift，Devices選擇iPhone（見圖5-4），點擊Next。
把工程保存到某個文件夾中（見圖5-5）。
Exercise: Passport | Page 145
出現了工程的詳細信息界面（見圖5-6）。不勾選Landscape Left和Landscape Right這個兩個方向，然后打開Main.storyboard（見圖5-7）。
Page 146 | Chapter 5 : Building Multiscreen Apps
點擊Inspector上工具欄中第一個圖標File Inspector，看起來像是一張紙折了一個角。
鼠標移動到到中間部分，不勾選Use Auto Layout選項。這時會出現一個對話框，選擇iPhone。然后不勾選Disable Size Classes。這時，Storyboard中的界面形狀會改變（見圖5-8和圖5-9）。
Exercise: Passport | Page 147
選中這個界面，然后點擊頂部菜單欄的Editor -> Embed In -> Navigation Controller。
Page 148 | Chapter 5 : Building Multiscreen Apps
一個新的scene會增加到Storyboard中，Navigation Controller Scene（見圖5-10）。一個scene表示App一屏或者一個界面。Navigation Controller Scene和之前的View Controller Scene是連接在一起的，這連接說明View Controller Scene是Navigation Controller Scene里第一個出現視圖，點擊Storyboard Editor左下角的盒子按鈕打開Document Outline，Document Outline顯示了storyboard文件中所有的控件以及控件所處的層次等級。接著把Project Navigator隱藏起來（見圖5-11）。
Exercise: Passport | Page 149
View Controller Scene的頂部有個灰色的方塊，這就是navigation bar。雙擊，然后輸入Passport，敲擊回車。
在Inspector中間打開Object Library，在搜索框中輸入Image View（見圖5-12）。
把Image View拖到View Controller界面的中間，然后打開Size Inspector（見圖5-13）。
Page 150 | Chapter 5 : Building Multiscreen Apps
X一欄輸入48，Y一欄輸入70，Width一欄輸入225，Height一欄輸入225。然后不勾選Autoresizing中的兩個相交的剪頭（見圖5-14）。
然后拖一個Label控件，放在Image View的左下方，然后再放兩個Label控件。選中這三個Label控件，打開Attribute Inspector，在font一欄中有個帶有字母T的方格，點擊這個方格，彈出菜單，選擇System Bold（見圖5-15），點擊Done。
Exercise: Passport | Page 151
把每個Label的寬調整到100pts以上，然后把3個Label控件的文字改為：Name，Birthday，Nationality（見圖5-15）。
Page 152 | Chapter 5 : Building Multiscreen Apps
然后再添加3個Label，放在右側，對齊方式改為右對齊。在Attribute Inspector中，有個Alignment屬性，可在這里找到右對齊的圖標，點擊圖標即可修改為右對齊。寬度調整到1100pts以上，然后雙擊修改文字（見圖5-16）。
找到一張你自己的照片，然后點擊頂部菜單File -> Add Files to Passport（見圖5-17）。找到你的照片，然后勾選Copy Items if needed，選擇圖片文件，點擊Add。回到Storyboard中來，點擊Image View，然后點擊Attribute Inspector中的Image下拉菜單，選中剛剛添加的照片（見圖5-18）。
Exercise: Passport | Page 153
圖片可能看起會有拉伸變形，點擊Attribute Inspector中的Mode下拉菜單可以修復這個問題。選擇Aspect Fill，這樣會保證圖片的寬高比不會變化，現在Image View中的圖片看起來好多了。
從Object Library中拖拽一個Button控件，放在個人信息的下方（就是3+3個Label控件的下方）。雙擊Button控件，命名為Show Countries（見圖5-19）。當點擊這個Button時，App會展示一個國家清單。
Page 154 | Chapter 5 : Building Multiscreen Apps
這個國家清單是由table view來處理，蘋果提供了UITableViewController這個控制器來專門與table view視圖協調工作。從Object Library中拖拽一個Table View Controller，放到Passport Scene旁邊。
接著選中Show Countries這個Button控件，同時按住Control鍵，鼠標拖拽到table view controller上（見圖5-20），然后松開鼠標。
Exercise: Passport | Page 155
這時會彈出一個窗口（見圖5-21），選擇push，然后在兩個Scene之間出現了一條線。
而且Table View Controller Scene中有了navigation bar，雙擊這個navigation bar然后輸入Countries Visited。
然后點擊Prototype Cells下方的空白方格，接著打開Attribute Inspector，在Identifier后面輸入reuseIndentifier（見圖5-22）。
這個App的storyboard部分已經完成了。現在需要創建table view controller文件。選擇頂部菜單的File -> New -> File（見圖5-23）。確保Source是在iOS下，選擇Cocoa Touch Class，點擊Next。
Page 156 | Chapter 5 : Building Multiscreen Apps
Subclass of一欄選擇UITableViewController，Class一欄輸入CountriesTableViewController，不勾選Also create .xib，語言是Swift（見圖5-24）。點擊Next。
Exercise: Passport | Page 157
然后選擇文件保存地點，已經自動選擇了當前工程所在的文件夾，確保Passport文件夾在最上方（見圖5-25），然后點擊Create。
剛剛創建的CountriesTableViewController.swift文件已經自動在Xcode中打開了。
然后選中所有綠色的代碼，刪掉它們。注意不要一不小心刪掉最底部的那個右大括號。viewDidLoad和didReceiveMemoryWarning中的綠色代碼也刪掉。然后隱藏Inspector，打開Project Navigator。
把鼠標光標放到class CountriesTableViewController: UITableViewController這行代碼的下方，我們在這里創建變量屬性，去過的國家應該是存儲在數組當中，任何方法都可以訪問數組，請輸入下列代碼：
var countries = ["Italy","Norway","England"]
numberOfSectionsInTableView方法確定table view中顯示多少個section，把數字改為1，刪掉這行//#warningPotentially incomplete method implementation，見下方：
override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
//Return the number of sections.
return 1
}
Page 158 | Chapter 5 : Building Multiscreen Apps
在 numberOfSectionsInTableView方法下面，還有一個numberOfRowsInSection方法，numberOfRowsInSection這個方法確定table view中顯示多少行，把數字改成3，刪掉這行//#warningPotentially incomplete method implementation，見下方：
override func tableView(tableView: UITableView, numberOfRowsInSection section:Int) -> Int {
//Return the number of sections.
return 3
}
把鼠標光標放到這兩個方法下面，然后輸入tableView，會自動出現一些代碼，這是自動補全功能，幫助你更快的輸入代碼，找到下面這行代碼：
tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
然后敲擊回車，刪掉代碼占位符。
tableview中的每一行都會調用cellForRowAtIndexPath方法，在這個方法中我們創建UITableViewCell，然后每一行都會顯示我們想顯示的內容。在方法中添加下列代碼：
let cell = tableView.dequeueReusableCellWithIdentifier("reuseIdentifier", forIndexPath: indexPath) as! UITableViewCell
這行代碼創建了一個名為cell的常量，等號后面是tableView中可回收的cell，這個方法用來檢查使用已經有了一個可回收的cell，且其identifier為reuseIdentifier。如果有這個cell，那么讓cell可回收；反之，創建一個新的cell。接著添加下列代碼：
var country = countries[indexPath.row]
這行代碼把國家名字賦值給了country這個變量。table view中的每一行都會調用cellForRowAtIndexPath這個方法，每次被調用，indexPath變量會更新，然后提供最新的section和row number。例如，cellForRowAtIndexPath第一次被調用的時候，是第一section第一行，接著是第一section第二行，然后是第一section第三行，繼續直到遍歷完所有的section所有的行。indexPath.row用來提取數組中的第一個第二個和第三個國家。
接著添加下列代碼：
cell.textLabel.text = country
這行代碼把coutry變量的值賦值給了UITableViewCell的text屬性，這樣，國家名字將會展示在每行中。
Exercise: Passport | Page 159
添加最后一行代碼：
return cell
應用幾乎快要完成了，然而還需要修改Storyboard中的一些設置。打開Main.storybaord，然后打開Inspector。
接著點擊Table View Controller Scene，接著選中Table View Controller Scene上方的黃色圓圈，選中后一個藍色框會包裹住黃色圓圈，打開Identity Inspector，從左數第三個圖標，看起來像是張報紙，在Class一欄中選擇CountriesTableViewController（見圖5-26）
這個操作會把CountriesTableViewController.swift和Table View Controller Scene連起來。現在應用已經編寫完成了，保存你的操作，然后點擊左上角的Paly按鈕（或者快捷鍵Command+R）。
App啟動后會展示姓名生日國籍和照片（見圖5-27）。點擊Show Countries按鈕，navigation controller會自動push一個新的view controller到最前面。
Page 160 | Chapter 5 : Building Multiscreen Apps
每一個cell都顯示一個不同的國家（見圖5-28）。左上角的back（返回按鈕）是自動生成的，文字顯示的是之前界面的title，如果之前的界面沒有title，就會顯示Back。點擊Back這個按鈕。
Exercise: Passport | Page 161
如果App沒有按照你想要的結果運行，或者程序有了錯誤或警告，不要太擔心，學習的最佳方式就是試錯，熟能生巧，到我們的網站上下載示例代碼，對比一下代碼，多試幾次，直到搞定這個程序為止。
Page 162 | Chapter 5 : Building Multiscreen Apps
