一個簡單的iOS應用程式

在本章中，您將要編寫一個名為 Quiz 的 iOS應用程式。 此應用程式將顯示一個問題，然後在使用者點選按鈕時顯示答案。 點選另一個按鈕將向用戶顯示一個新問題（圖1.1）。

圖1.1您的第一個應用程式：Quiz

當您編寫iOS應用程式時，您必須想到兩個基本問題：

1. 如何正確建立和配置物件？ （例如：“我想要一個 Next Question 按鈕”。）
2. 如何使我的應用程式響應使用者互動？ （例如：當用戶點選按鈕時，我希望這段程式碼被執行。“）

這本書大部分都是為了回答這些問題。

建立一個Xcode專案

開啟 Xcode，然後從 File 選單中選擇 New

→ Project....（如果 Xcode 自動開啟到歡迎介面，請直接選擇 Create a new Xcode project。

將出現一個新的工作區視窗，工作表將從工具欄向下滑動。 在頂部，找到 iOS 部分，然後找到 Application 區域（圖1.2）。 被有好幾個應用模板供您選擇。 選擇 Single View Application。

圖1.2建立專案

這本書是為 Xcode 8.1 建立的。 這些模板的名稱可能隨著新的 Xcode 版本而改變。 如果您沒有看到 Single View Application 模板，請使用看起來最簡單的模板。

單擊 Next，然後在下一個工作表 Product Name

中輸入 Quiz（圖1.3）。接著是組織名稱和識別符號。 您可以使用 Big Nerd Ranch 或任何您想要的組織名稱。 對於組織識別符號，您可以使用 com.bignerdranch* 或 *com.yourcompanynamehere。

從 Language 彈出選單中，選擇 Swift，然後從 Devices 彈出選單中選擇 Universal。 確保未選中 Use Core Data 複選框。

圖1.3配置新專案

單擊 Next，在最後的工作表中，將專案儲存到你計劃好的儲存本書中例子的目錄中。 單擊 Create 以建立 Quiz 專案。

您的新專案將在Xcode工作區視窗中開啟（圖1.4）。

圖1.4 Xcode工作區視窗

工作區視窗的左側是 導航區域(navigator area) 。 該區域顯示不同的導航器 - 顯示專案不同部分的工具。 您可以通過選擇導航器選擇器中的一個圖示來開啟導航器，導航器選擇器是導航器區域上方的欄。

當前開啟的導航器是專案導航器。 專案導航器顯示構成專案的檔案（圖1.5）。 您可以選擇其中一個檔案，以在導航區域右側的編輯器區域中開啟它們。

專案導航器中的檔案可以分組到資料夾中，以幫助您組織專案。 模板為您建立了幾個組。如果需要，您可以重新命名它們，或者新增新組。 這些組只是用於組織檔案，並且不以任何方式與檔案系統相關。

圖1.5專案導航器中的Quiz應用程式檔案

模型 - 檢視 - 控制器

在開始應用程式之前，讓我們來討論應用程式架構中的一個關鍵概念： Model-View-Controller 或 MVC。 MVC 是iOS開發中使用的一種設計模式。 在 MVC 中，每個例項都屬於模型層，檢視層或控制器層。 （這裡的層簡單地指一個或多個符合相同規則的物件。）

• 模型層(model layer) 儲存資料，不瞭解使用者介面或 UI。 在 Quiz 中，模型將由兩個有序的字串列表組成：一個用於提問，另一個用於解答。通常，模型層中的例項代表使用者世界中的真實事物。 例如，當您為保險公司編寫應用程式時，您的模型幾乎肯定會包含一個名為 InsurancePolicy 的自定義型別。
• 檢視層(view layer) 包含對使用者可見的物件。按鈕，文字欄位和滑塊就是檢視物件或檢視的示例。 檢視物件(view objects) 組成應用程式的UI。 在 Quiz 中，顯示問題和答案的標籤及其下的按鈕都是檢視物件。
• 控制器層(controller layer) 是應用程式管理的地方。 控制器物件或控制器是應用程式的管理器。 控制器配置使用者看到的檢視，並確保檢視和模型物件保持同步。 一般來說，控制器通常處理“然後呢？”問題。 例如，當用戶從列表中選擇一個專案時，控制器確定使用者接下來看到什麼。

圖1.6顯示了響應於使用者輸入的應用程式中的控制流程，例如使用者點選按鈕。

圖1.6 MVC模式

請注意，模型和檢視不直接相互交流; 控制器正好位於它們的中間，接收訊息和排程指令。

設計Quiz程式

您將使用MVC模式編寫 Quiz 應用程式。 以下是您將要建立和使用的例項的清單：

• 模型層將由 [String] 的兩個例項組成。
• 檢視層將由 UILabel 的兩個例項和 UIButton 的兩個例項組成。
• 控制器層將由 ViewController 的一個例項組成。

圖1.7Quiz物件圖

圖1.7是 Quiz 應用程式如何工作的大圖。 例如，當點選 Next Question 按鈕時，它將觸發 ViewController 中的一個方法。 一個方法就是一個函式——要執行的指令列表。 該方法將從問題陣列中檢索一個新問題，並要求頂部標籤顯示該問題。

這圖表在這章結整前看起來沒多大意義，這並不影響後面的學習。 在構建應用程式的時候，請返回這參考這張圖來檢視應用程式的流程。

您將逐步構建 Quiz 程式，先從應用程式的視覺化介面開始。

介面生成器

您正在使用 Single View Application 模板，因為它是 Xcode 提供的最簡單的模板。 不過，這個模板有很大的魔力，因為已經為您設定了一些關鍵元件。 現在，您只需使用這些元件，而不用深入瞭解它們的工作原理。 本書的其餘部分將會關注這些細節。

在專案導航器中，單擊一次 Main.storyboard 檔案。 Xcode 將開啟其稱為 Interface Builder 的圖形樣式編輯器。

Interface Builder 將編輯器區域分為兩部分：左側的 文件概覽(document outline) 和右側的 畫布(canvas)。

如圖1.8所示。 如果您在編輯區域看到的內容與圖形不符，可能需要單擊 Show Document Outline 按鈕。 （如果您有其他區域顯示，請不用擔心。）您還可能需要單擊文件輪廓中的倒三角以顯示內容。

圖1.8顯示Main.storyboard的Interface Builder

您在 Interface Builder 畫布中看到的矩形稱為 scene，並表示目前唯一的“螢幕”或檢視（請注意，建立此專案時你使用的是 Single View Application 模板）。

在下一節中，您將瞭解如何使用 Interface Builder 為應用程式建立UI。Interface Builder 允許您將庫中的物件拖動到畫布上以建立例項，還可以在這些物件和程式碼之間建立連線。 這些連線可以轉換成程式碼被使用者互動呼叫。

Interface Builder 的一個關鍵特性是它在其它檔案上並沒有生成程式碼。 Interface Builder 是一個物件編輯器，可以建立物件的例項並操縱其屬性。 完成編輯介面後，它不會生成與您所做的工作相對應的程式碼。 在必要時 .storyboard 檔案會載入到記憶體中的物件例項的歸檔。

構建介面

讓我們開始你的介面。 您已經選擇 Main.storyboard 在畫布中顯示的單個 scene（圖1.9）。

圖1.9 Main.storyboard中的場景

要開始，請確保您的場景的尺寸適用於 iPhone 7。在畫布底部，找到 View as 按鈕。 它可能會像這樣：View as: iPhone 7 (wC hR)。 （wC hR現在來說沒有意義，我們將在第17章中解釋。）如果iPhone 7 已經顯示，那麼表明已經設定好了。 如果沒有，請單擊 View as 按鈕，然後從左側選擇第四個對應於 iPhone 7 的裝置（圖1.10）。

圖1.10檢視 iPhone 7 的 scene

現在是將檢視物件新增到該空白畫板的時候了。

建立檢視物件

確保 Xcode 視窗中的實用程式區域可見。 您可能需要單擊視窗右上角 控制元件的最右邊的按鈕。 實用區域在編輯區右側，有兩個部分：檢查器( inspector ) 和 庫( library )。 頂部是檢查器，它顯示在編輯器區域中選擇的檔案或物件的設定。 底部是庫，它列出可以新增到檔案或專案的項。

在實用程式區域的每個部分的頂部是各種檢查器和庫的選擇器（圖1.11）。

圖1.11 Xcode實用程式區

您的應用程式介面需要四個檢視物件：兩個按鈕來接受使用者輸入和兩個文字標籤來顯示資訊。 要新增它們，首先請確保您可以通過從庫選擇器中選擇 選項卡來檢視物件庫，如圖1.11所示。

物件庫包含可以新增到故事板檔案中以組成介面的物件。 通過向下滾動列表或使用庫底部的搜尋欄來查詢 Label 物件。 在庫中選擇此物件並將其拖動到畫布上的檢視物件上。 將標籤拖到畫布上並注意當標籤靠近畫布中心時出現的虛藍色線條（圖1.12）。 這些輔助線將幫助您部署您的介面。

圖1.12將標籤(label)新增到畫布

根據輔助線的指引，將標籤放置在檢視的水平中心，靠近頂部，如圖1.12所示。 最終，此標籤將向用戶顯示問題。 將第二個標籤拖到檢視上並將其放置在水平中心，靠近中間。 此標籤將顯示答案。

接下來，在物件庫中找到 Button 並將兩個按鈕拖到檢視上。 在每個標籤下方放置一個。

您現在已將四個檢視物件新增到 ViewController 的UI中。 請注意，它們也出現在文件大綱中。 您的介面應如圖1.13所示。

圖1.13構建Quiz介面

配置檢視物件

現在您已經建立了檢視物件，可以配置其屬性了。 檢視的某些屬性（如大小，位置和文字）可以直接在畫布上更改。 例如，您可以通過在畫布或文件輪廓中選擇物件，然後在畫布中拖動其角落和邊緣來調整物件的大小。

首先重新命名標籤和按鈕。 雙擊每個標籤並用 ??? 替換文字。 然後雙擊上方的按鈕並將其名稱更改為 Next Question。 重新命名下面的按鈕為 Show Answer。 結果如圖1.14所示。

圖1.14重新命名標籤和按鈕

您可能已經注意到，因為您更改了標籤和按鈕中的文字，因此它們的寬度已經不再整齊地居中在 scene 中。 點選並拖動它們以使它們再次居中，如圖1.15所示。

圖1.15定位標籤和按鈕

在模擬器上執行

要測試您的UI，您將要在 Xcode 的 iOS模擬器 上執行 Quiz。

要準備在模擬器上執行 Quiz，請在 Xcode 工具欄上找到當前的方案彈出選單（圖1.16）。

圖1.16選擇了iPhone 7方案

如果它顯示了 iPhone 7 一樣的東西，那麼這個專案就被設定為在模擬器上執行。 如果它顯示 Christian's iPhone，那就要點選並從彈出選單中選擇 iPhone 7。 在本書中，iPhone 7 方案將是您的模擬器預設設定。

單擊工具欄中的三角形播放按鈕。 這將構建（編譯）然後執行應用程式。 你會經常做這個，鍵盤快捷方式為 Command-R。

模擬器啟動後，您將看到介面具有您新增的所有檢視，與你在 Interface Builder 中看到的一樣。

現在回到當前的方案彈出選單，選擇 iPhone 7 Plus 作為您的模擬器。 再次執行應用程式，您會注意到，您新增的檢視仍然存在，但它們不像在 iPhone 7 一樣居中。這是因為標籤和按鈕目前在螢幕上具有固定位置，並且不會在主檢視保持居中。 要糾正此問題，您將使用一種稱為 自動佈局(Auto Layout) 的技術。

自動佈局簡介

到目前為止，您的介面在 Interface Builder 畫布中看起來不錯。 但是，iOS裝置的螢幕尺寸越來越大，而我們希望應用程式能支援所有螢幕尺寸和方向，甚至支援多種裝置型別。 無論執行應用程式的裝置的螢幕尺寸或方向如何，都需要保證檢視物件的佈局正確。 解決方法就是使用自動佈局。

自動佈局通過為 scene 中的每個檢視物件指定位置和大小約束來工作。 這些約束可以相對應於鄰近檢視或容器檢視。 容器檢視只是一個檢視物件，顧名思義，它包含另一個檢視。 例如，檢視 Main.storyboard 的文件大綱（圖1.17）。

圖1.17帶容器檢視的文件佈局

您可以在文件大綱中看到，您新增的標籤和按鈕對於一個 View 物件是縮排的。 此檢視物件是標籤和按鈕的容器，並且物件可以相對於此檢視進行定位和縮放。

要開始指定自動佈局約束，請通過在畫布上或文件大綱中單擊頂部標籤來選擇頂部標籤。 在畫布底部，注意如圖1.18所示的自動佈局選單，。

圖1.18自動佈局選單

在頂部標籤被選中的情況下，點選 圖示顯示如圖1.19所示的 對齊選單(Align menu)。

圖1.19將容器中的頂部標籤居中

在 Align 選單中，選中 Horizontally in Container 複選框，以將標籤居中。 然後單擊 Add 1 Constraint 按鈕。 該約束能保證在任何尺寸的螢幕上，以任何方向，標籤將水平居中。

現在，您需要新增更多的約束來使下面的標籤和按鈕相對於頂部標籤居中，並鎖定它們之間的間距。 通過按住 Command 鍵單擊選中這四個檢視物件，然後單擊圖示 開啟 Add New Constraints 選單，如圖1.20所示。

圖1.20 新增約束以居中並修復檢視之間的間距

點選選單頂部附近的紅色垂直虛線段。 當您點選該段時，它將變為實心紅色（如圖1.20所示），表示每個檢視的距離固定在最近的頂層鄰居處。 另外，檢查 Align 框，然後從彈出選單中選擇 Horizontal Centers。 對於 Update Frames，請確保已選擇 Items of New Constraints。 最後點選選單底部的 Add 7 Constraints 按鈕。

如果您在新增約束時發生任何錯誤，您可能會在畫布上看到紅色或橙色的約束和邊框，而不是正確的藍線。 如果是這種情況，您將需要清除現有的約束，然後再次執行上述步驟。 要清除約束，首先選擇背景（容器）檢視。 然後單擊該圖示 以開啟 Resolve Auto Layout Issues 選單。 在 All Views in View Controller 部分下選擇 Clear Constraints 部分（圖1.21）。 這將清除您新增的任何限制，並讓您重新新增約束。

圖1.21清除約束

自動佈局可能是一個難以掌握的工具，這就是為什麼您在本書第一章開始使用它。 越早開始接觸使用它，你將有更多的機會使用它，並習慣它。 另外，在應用程式變得複雜之前處理自動佈局將有助於你更容易地去除錯佈局問題。

要確認您的介面正確展示，請在 iPhone 7 Plus 模擬器上構建並執行應用程式。 確認介面看起來正確後，在iPhone 7 模擬器上構建並執行應用程式。 標籤和按鈕在兩者皆居中。

建立連線

連線(connection) 允許一個物件知道另一個物件在記憶體中的位置，以便兩個物件可以進行通訊。 您可以在 Interface Builder 中進行兩種連線：outlet 和 action。 outlet 是物件的引用。action 是一種方法，由使用者通過按鈕或滑塊或選擇器觸發。

我們先來建立引用 UILabel 例項的 outlet。 是時候離開 Interface Builder 去編寫一些程式碼了。

宣告 outlet

在專案導航器中，找到並選中名為 ViewController.swift 的檔案。 編輯器區域將從 Interface Builder 更改為 Xcode 的程式碼編輯器。

在 ViewController.swift 中，首先刪除模板在 class ViewController ：UIViewController { 和 } 之間自動生成的程式碼，使該檔案如下所示：

import UIKit

class ViewController: UIViewController {

}

（為了簡方使起見，我們不會再顯示該檔案的 import UIKit 這一行 。）

接下來，新增宣告兩個屬性的程式碼。 （在本書中，您將新增的新程式碼將以粗體顯示，您將刪除的程式碼將被刪除線顯示。）不用擔心現在就要了解程式碼或屬性; 這才剛剛開始

class ViewController: UIViewController {

  @IBOutlet var questionLabel: UILabel!
  @IBOutlet var answerLabel: UILabel!

}

此程式碼為 ViewController 的每個例項提供一個名為 questionLabel 的 outlet 和一個名為 answerLabel 的 outlet。 檢視控制器可以使用每個 outlet 來引用特定的 UILabel 物件（即您檢視中的一個標籤）。 @IBOutlet 關鍵字告訴 Xcode，您將使用 Interface Builder 將這些 outlet 連線到標籤物件。

設定 outlet

在專案導航器中，選擇 Main.storyboard 重新開啟 Interface Builder。

你想讓 questionLabel outlet 指向 UI 頂部的 UILabel 例項。

在文件大綱中，找到其中的 View Controller Scene 部分和 View Controller 物件。 在當前的情況下，View Controller 代表 ViewController 的一個例項，它是負責管理 Main.storyboard 中定義的介面的物件。

右鍵 從文件輪廓中的 View Controller 拖動到場景中的頂部標籤。 當標籤突出顯示時，鬆開滑鼠和鍵盤; 將出現黑色面板。 選擇 questionLabel 來設定 outlet，如圖1.22所示。

圖1.22設定questionLabel

（如果在連接面板中沒有看到 questionLabel，請仔細檢查您的 ViewController.swift 檔案以進行修改）。

現在，當載入了故事板檔案時，ViewController 的 questionLabel outlet 將自動引用螢幕頂部的 UILabel 例項，這將允許 ViewController 告訴標籤顯示什麼問題。

以相同的方式設定 answerLabel outlet： 右鍵從 ViewController 拖動到底部的 UILabel 並選擇 answerLabel（圖1.23）。

圖1.23設定answerLabel

請注意，是從要設定的 outlet 的物件拖動到要將該 outlet 指向的物件。

您的 outlet 全部設定好後，您需要的下一個連線涉及到兩個按鈕。

定義動作方法

當 UIButton 被點選時，它會呼叫另一個物件的方法。 該物件稱為 目標(target)。 觸發的方法稱為動作(action)。 該動作是該方法的名稱，該方法包含要在按鈕被點選時執行的程式碼。

在您的應用程式中，這兩個按鈕的目標將是 ViewController 的例項。 每個按鈕都有自己的動作。 我們首先定義兩個動作方法：showNextQuestion（_ :) 和 showAnswer（_ :)。

重新開啟 ViewController.swift，並在 outlet 後新增兩種動作方法。

class ViewController: UIViewController {

  @IBOutlet var questionLabel: UILabel!
  @IBOutlet var answerLabel: UILabel!

  @IBAction func showNextQuestion(_ sender: UIButton) {

  }

  @IBAction func showAnswer(_ sender: UIButton) {

  }
}

在進行目標和動作連線後，您將會使用這些方法。@IBAction 關鍵字告訴 Xcode 您將在 Interface Builder 中進行這些連線。

設定目標和動作

切換回 Main.storyboard。 我們先從 Next Question 按鈕開始。 您希望將其目標設為 ViewController，其動作為 showNextQuestion（_ :)。

要設定一個物件的目標，請右鍵從該物件拖動到它的目標。 當您釋放滑鼠時，目標將被設定，並出現一個彈出選單，讓您選擇一個動作。

在畫布中選擇 Next Question 按鈕，然後拖動到在文件大綱的 View Controller。 當 View Controller 突出顯示時，釋放滑鼠按鈕並在彈出選單中的 Sent Events 下選擇 showNextQuestion：如圖1.24所示。

圖1.24設定 Next Question 目標/動作

現在輪到 Show Answer 按鈕。 選擇按鈕，然後從按鈕控制拖動到 View Controller。 從彈出選單中選擇 showAnswer：

連線摘要

ViewController 和檢視物件之間現在有五個連線。 您已設定屬性 answerLabel 和 questionLabel 來引用標籤物件——這是其中兩個。 ViewController 是兩個按鈕的目標——這是另外兩個。 專案的模板建立了一個附加連線： ViewController 的 view 屬性連線到表示應用程式背景的 View 物件。 這就是所有的五個連線。

您可以在連線檢查器中檢查這些連線。 在文件大綱中選擇 View Controller。 然後，在公用程式區域中，單擊選項卡 以顯示連線檢查器（圖1.25）。

圖1.25檢查連線檢查器中的連線

您的故事板檔案已完成。 檢視物件已建立和配置，並已對控制器物件進行了所有必要的連線。 我們繼續建立和連線你的模型物件。

建立模型層

檢視物件組成UI，因此開發人員通常使用 Interface Builder 建立，配置和連線檢視物件。 另一方面，模型層的部分通常以程式碼形式設定。

在專案導航器中，選擇 ViewController.swift。 新增以下程式碼，宣告兩個字串陣列和一個整數。

class ViewController: UIViewController {
  @IBOutlet var questionLabel: UILabel!
  @IBOutlet var answerLabel: UILabel!

  let questions: [String] = [
    "What is 7+7?",
    "What is the capital of Vermont?",
    "What is cognac made from?"
  ]
  let answers: [String] = [
    "14",
    "Montpelier",
    "Grapes"
  ]
  var currentQuestionIndex: Int = 0
  ...
}

陣列是包含問題和答案的有序列表。 整數用於跟蹤使用者當前的問題。

請注意，使用 let 關鍵字宣告陣列，而使用 var 關鍵字宣告整數。 常數用 let 關鍵字表示; 其值不能改變。 問題和答案陣列是常數。 本程式中的問題和答案不會改變，實際上只是不能從初始值改變。

另一方面，變數由 var 關鍵字表示; 它的值被允許改變。 你將 currentQuestionIndex 屬性變成一個變數，因為它的值必須能夠隨著使用者迴圈的問題和答案而改變。

實現動作方法

現在你有問題和答案，你可以來實現它們的動作方法。 在 ViewController.swift 中，更新 showNextQuestion（_ :) 和 showAnswer（_ :)。

...
@IBAction func showNextQuestion(_ sender: UIButton) {
  currentQuestionIndex += 1
  if currentQuestionIndex == questions.count {
    currentQuestionIndex = 0
  }
  let question: String = questions[currentQuestionIndex]
  questionLabel.text = question
  answerLabel.text = "???"
}
@IBAction func showAnswer(_ sender: UIButton) {
  let answer: String = answers[currentQuestionIndex]
  answerLabel.text = answer
}
...

載入第一個問題

應用程式啟動後，您將要從陣列中載入第一個問題，並使用它來替換 ??? 問題標籤中的佔位符。 一個很好的方法是重寫 ViewController 的 viewDidLoad（） 方法。 （“覆蓋”表示您正在為方法提供自定義實現。）將方法新增到 ViewController.swift。

class ViewController: UIViewController {
  ...
  override func viewDidLoad() {
  super.viewDidLoad()
    questionLabel.text = questions[currentQuestionIndex]
  }
}

您的應用程式的所有程式碼現在已經完成！

構建應用程式

如前所述，在 iPhone 7 模擬器上構建並執行應用程式。

如果構建出現任何錯誤，您可以通過選擇導航器區域中的選項卡 ，在問題導航器中檢視它們（圖1.26）。

圖1.26帶有示例錯誤和警告的問題導航器

單擊問題導航器中的任何錯誤或警告將被帶到檔案和發生問題的程式碼行。 通過將程式碼與本章中的程式碼進行比較，找出並解決任何問題（即程式碼拼寫錯誤！）。 然後再次嘗試執行應用程式。 重複此過程直到您的應用程式編譯成功。

在您的應用程式編譯完成後，它將在iOS模擬器中啟動。 測試 Quiz 應用程式。 您應該能夠點選 Next Question 按鈕，並在頂部標籤中看到一個新問題; 點選 Show Answer* 應該顯示正確的答案。 如果您的應用程式無法正常工作，請檢查 Main.storyboard 中的連線。

你已經建立了一個可執行的iOS應用程式，花點時間享受你的成果。

好的,享受夠了。你的應用程式可以執行，但它需要一些美化和改進。

應用圖示

執行 Quiz 時，從模擬器選單中選擇 Hardware → Home。 你會看到 Quiz 圖示是一個無聊的預設磁貼。 讓我們給 Quiz 一個更好的圖示。

應用程式圖示是表示iOS主螢幕上的應用程式的簡單影象。 不同的裝置需要不同大小的圖示，其中一些顯示在表1.1中。

表1.1不同裝置的應用程式圖示

我們已經為 Quiz 應用準備了一個圖示影象檔案（大小為120x120）。 您可以從 www.bignerdranch.com/solutions/iOSProgramming6ed.zip 下載此圖示（以及其他章節的資源）。 解壓縮iOSProgramming6ed.zip並在解壓縮的資料夾的 0- Resources/Project App Icons 目錄中找到 Quiz-120.png 檔案。

您將將此圖示作為資源新增到應用程式包中。 一般來說，應用程式中有兩種檔案：程式碼和資源。 程式碼（如 ViewController.swift）用於建立應用程式本身。 資源是應用程式在執行時使用的影象和聲音。

在專案導航器中，找到 Assets.xcassets。 選擇此檔案開啟它，然後從左側的資源列表中選擇 AppIcon（圖1.27）。

圖1.27顯示Asset目錄

此面板是 Asset 目錄，您可以在其中管理應用程式所需的所有影象。

將 Quiz-120.png 檔案從 Finder 拖到 iPhone App 部分的 2x 插槽上（圖1.28）。 這將將檔案複製到檔案系統中的專案目錄中，並在 Asset 目錄中新增對該檔案的引用。 （您可以按住 Control 鍵並單擊 Asset 目錄中的檔案，然後選擇在 Show in Finder 以確認此選項。）

圖1.28將應用圖示新增到 Asset 目錄中

再次構建並執行應用程式。 通過單擊 Hardware → Home，像之前一樣，或使用鍵盤快捷鍵 Command-Shift-H 切換到模擬器的主螢幕(在虛擬機器中 Command 鍵即 Win 鍵)。 你應該看到新的圖示。

(如果沒有看到圖示，請關閉應用程式，然後重新構建並重新執行）。為此，最簡單的選項是通過單擊 Simulator → Reset Content and Settings... 這將刪除所有應用程式並將模擬器重置為預設設定，您應該在下次執行應用程式時看到應用程式圖示。）

啟動螢幕

現在該為專案設定 啟動圖片(launch image) 了，它在應用程式載入時顯示。 launch image 在iOS中具有特定的作用：它表示應用程式正在啟動，並描述了使用者在應用程式載入後將進行互動的UI。 因此，良好的 launch image 是應用程式的無內容螢幕截圖。 例如，Clock 應用程式的 launch image 顯示底部的四個選項卡，全部處於未選擇的狀態。 一旦應用程式載入，將選擇正確的選項卡，內容變得可見。 （請注意，啟動圖片在應用程式啟動後被替換;它不會成為應用程式的背景影象。）

完成此操作的一個簡單方法是允許 Xcode 使用 launch screen file 為您生成可能的 啟動螢幕影象。

通過單擊專案導航器中的最頂部的 Quiz 來開啟專案設定。 在 App Icons and Launch Images 下，從 Launch Screen File 下拉列表中選擇 Main.storyboard（圖1.29）。 現在將從 Main.storyboard 生成啟動圖片。

圖1.29設定啟動螢幕檔案

很難看到這種更改的結果，因為 啟動圖片 通常只在很短的時間內顯示。然而，儘管它的角色是如此的短暫，但它仍然是一個良好的實踐。

恭喜！ 你已經寫了你的第一個應用程式，甚至添加了一些細節來改進它。 您將在本書後再次用到該 Quiz 應用程式。 下一章將為你介紹一些 Swift 程式設計的基礎知識。