在本章中,您將要編寫一個名為 Quiz
的 iOS應用程序。 此應用程序將顯示一個問題,然后在用戶點擊按鈕時顯示答案。 點擊另一個按鈕將向用戶顯示一個新問題(圖1.1)。
圖1.1您的第一個應用程序:Quiz
當您編寫iOS應用程序時,您必須想到兩個基本問題:
- 如何正確創(chuàng)建和配置對象? (例如:“我想要一個
Next Question
按鈕”。) - 如何使我的應用程序響應用戶交互? (例如:當用戶點擊按鈕時,我希望這段代碼被執(zhí)行。“)
這本書大部分都是為了回答這些問題。
創(chuàng)建一個Xcode項目
打開 Xcode
,然后從 File
菜單中選擇 New
→ Project....
(如果 Xcode
自動打開到歡迎界面,請直接選擇 Create a new Xcode project
。
將出現(xiàn)一個新的工作區(qū)窗口,工作表將從工具欄向下滑動。 在頂部,找到 iOS
部分,然后找到 Application
區(qū)域(圖1.2)。 被有好幾個應用模板供您選擇。 選擇 Single View Application
。
圖1.2創(chuàng)建項目
這本書是為 Xcode 8.1
創(chuàng)建的。 這些模板的名稱可能隨著新的 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
以創(chuàng)建 Quiz
項目。
您的新項目將在Xcode工作區(qū)窗口中打開(圖1.4)。
圖1.4 Xcode工作區(qū)窗口
工作區(qū)窗口的左側是 導航區(qū)域(navigator area)
。 該區(qū)域顯示不同的導航器 - 顯示項目不同部分的工具。 您可以通過選擇導航器選擇器中的一個圖標來打開導航器,導航器選擇器是導航器區(qū)域上方的欄。
當前打開的導航器是項目導航器。 項目導航器顯示構成項目的文件(圖1.5)。 您可以選擇其中一個文件,以在導航區(qū)域右側的編輯器區(qū)域中打開它們。
項目導航器中的文件可以分組到文件夾中,以幫助您組織項目。 模板為您創(chuàng)建了幾個組。如果需要,您可以重命名它們,或者添加新組。 這些組只是用于組織文件,并且不以任何方式與文件系統(tǒng)相關。
圖1.5項目導航器中的Quiz應用程序文件
模型 - 視圖 - 控制器
在開始應用程序之前,讓我們來討論應用程序架構中的一個關鍵概念: Model-View-Controller
或 MVC
。 MVC
是iOS開發(fā)中使用的一種設計模式。 在 MVC
中,每個實例都屬于模型層,視圖層或控制器層。 (這里的層簡單地指一個或多個符合相同規(guī)則的對象。)
-
模型層(model layer)
保存數(shù)據(jù),不了解用戶界面或 UI。 在Quiz
中,模型將由兩個有序的字符串列表組成:一個用于提問,另一個用于解答。通常,模型層中的實例代表用戶世界中的真實事物。 例如,當您為保險公司編寫應用程序時,您的模型幾乎肯定會包含一個名為 InsurancePolicy 的自定義類型。 -
視圖層(view layer)
包含對用戶可見的對象。按鈕,文本字段和滑塊就是視圖對象或視圖的示例。 ?視圖對象(view objects) 組成應用程序的UI。 在 Quiz 中,顯示問題和答案的標簽及其下的按鈕都是視圖對象。 -
控制器層(controller layer)
是應用程序管理的地方。 控制器對象或控制器是應用程序的管理器。 控制器配置用戶看到的視圖,并確保視圖和模型對象保持同步。 一般來說,控制器通常處理“然后呢?”問題。 例如,當用戶從列表中選擇一個項目時,控制器確定用戶接下來看到什么。
圖1.6顯示了響應于用戶輸入的應用程序中的控制流程,例如用戶點擊按鈕。
圖1.6 MVC模式
請注意,模型和視圖不直接相互交流; 控制器正好位于它們的中間,接收消息和調度指令。
設計Quiz程序
您將使用MVC模式編寫 Quiz
應用程序。 以下是您將要創(chuàng)建和使用的實例的清單:
- 模型層將由 [String] 的兩個實例組成。
- 視圖層將由 UILabel 的兩個實例和 UIButton 的兩個實例組成。
- 控制器層將由 ViewController 的一個實例組成。
圖1.7Quiz對象圖
圖1.7是 Quiz
應用程序如何工作的大圖。 例如,當點擊 Next Question
按鈕時,它將觸發(fā) ViewController 中的一個方法。 一個方法就是一個函數(shù)——要執(zhí)行的指令列表。 該方法將從問題陣列中檢索一個新問題,并要求頂部標簽顯示該問題。
這圖表在這章結整前看起來沒多大意義,這并不影響后面的學習。 在構建應用程序的時候,請返回這參考這張圖來查看應用程序的流程。
您將逐步構建 Quiz
程序,先從應用程序的可視化界面開始。
界面生成器
您正在使用 Single View Application
模板,因為它是 Xcode
提供的最簡單的模板。 不過,這個模板有很大的魔力,因為已經(jīng)為您設置了一些關鍵組件。 現(xiàn)在,您只需使用這些組件,而不用深入了解它們的工作原理。 本書的其余部分將會關注這些細節(jié)。
在項目導航器中,單擊一次 Main.storyboard 文件。 Xcode
將打開其稱為 Interface Builder
的圖形樣式編輯器。
Interface Builder
將編輯器區(qū)域分為兩部分:左側的 文檔概覽(document outline) 和右側的 畫布(canvas)。
如圖1.8所示。 如果您在編輯區(qū)域看到的內容與圖形不符,可能需要單擊 Show Document Outline
按鈕。 (如果您有其他區(qū)域顯示,請不用擔心。)您還可能需要單擊文檔輪廓中的倒三角以顯示內容。
圖1.8顯示Main.storyboard的Interface Builder
您在 Interface Builder
畫布中看到的矩形稱為 scene
,并表示目前唯一的“屏幕”或視圖(請注意,創(chuàng)建此項目時你使用的是 Single View Application 模板)。
在下一節(jié)中,您將了解如何使用 Interface Builder
為應用程序創(chuàng)建UI。Interface Builder
允許您將庫中的對象拖動到畫布上以創(chuàng)建實例,還可以在這些對象和代碼之間建立連接。 這些連接可以轉換成代碼被用戶交互調用。
Interface Builder
的一個關鍵特性是它在其它文件上并沒有生成代碼。 Interface Builder
是一個對象編輯器,可以創(chuàng)建對象的實例并操縱其屬性。 完成編輯界面后,它不會生成與您所做的工作相對應的代碼。 在必要時 .storyboard 文件會加載到內存中的對象實例的歸檔。
構建界面
讓我們開始你的界面。 您已經(jīng)選擇 Main.storyboard
在畫布中顯示的單個 scene(圖1.9)。
圖1.9 Main.storyboard中的場景
要開始,請確保您的場景的尺寸適用于 iPhone 7。在畫布底部,找到 View as
按鈕。 它可能會像這樣:View as: iPhone 7 (wC hR)
。 (wC hR現(xiàn)在來說沒有意義,我們將在第17章中解釋。)如果iPhone 7 已經(jīng)顯示,那么表明已經(jīng)設置好了。 如果沒有,請單擊 View as
按鈕,然后從左側選擇第四個對應于 iPhone 7 的設備(圖1.10)。
圖1.10查看 iPhone 7 的 scene
現(xiàn)在是將視圖對象添加到該空白畫板的時候了。
創(chuàng)建視圖對象
確保 Xcode
窗口中的實用程序區(qū)域可見。 您可能需要單擊窗口右上角
inspector
) 和 庫( library
)。 頂部是檢查器,它顯示在編輯器區(qū)域中選擇的文件或對象的設置。 底部是庫,它列出可以添加到文件或項目的項。
在實用程序區(qū)域的每個部分的頂部是各種檢查器和庫的選擇器(圖1.11)。
圖1.11 Xcode實用程序區(qū)
選項卡來查看對象庫,如圖1.11所示。
對象庫包含可以添加到故事板文件中以組成界面的對象。 通過向下滾動列表或使用庫底部的搜索欄來查找 Label
對象。 在庫中選擇此對象并將其拖動到畫布上的視圖對象上。 將標簽拖到畫布上并注意當標簽靠近畫布中心時出現(xiàn)的虛藍色線條(圖1.12)。 這些輔助線將幫助您部署您的界面。
圖1.12將標簽(label)添加到畫布
根據(jù)輔助線的指引,將標簽放置在視圖的水平中心,靠近頂部,如圖1.12所示。 最終,此標簽將向用戶顯示問題。 將第二個標簽拖到視圖上并將其放置在水平中心,靠近中間。 此標簽將顯示答案。
接下來,在對象庫中找到 Button
并將兩個按鈕拖到視圖上。 在每個標簽下方放置一個。
您現(xiàn)在已將四個視圖對象添加到 ViewController 的UI中。 請注意,它們也出現(xiàn)在文檔大綱中。 您的界面應如圖1.13所示。
圖1.13構建Quiz界面
配置視圖對象
現(xiàn)在您已經(jīng)創(chuàng)建了視圖對象,可以配置其屬性了。 視圖的某些屬性(如大小,位置和文本)可以直接在畫布上更改。 例如,您可以通過在畫布或文檔輪廓中選擇對象,然后在畫布中拖動其角落和邊緣來調整對象的大小。
首先重命名標簽和按鈕。 雙擊每個標簽并用 ???
替換文本。 然后雙擊上方的按鈕并將其名稱更改為 Next Question
。 重命名下面的按鈕為 Show Answer
。 結果如圖1.14所示。
圖1.14重命名標簽和按鈕
您可能已經(jīng)注意到,因為您更改了標簽和按鈕中的文本,因此它們的寬度已經(jīng)不再整齊地居中在 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 方案將是您的模擬器默認設置。
單擊工具欄中的三角形播放按鈕。 這將構建(編譯)然后運行應用程序。 你會經(jīng)常做這個,鍵盤快捷方式為 Command-R。
模擬器啟動后,您將看到界面具有您添加的所有視圖,與你在 Interface Builder
中看到的一樣。
現(xiàn)在回到當前的方案彈出菜單,選擇 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
按鈕。 該約束能保證在任何尺寸的屏幕上,以任何方向,標簽將水平居中。
現(xiàn)在,您需要添加更多的約束來使下面的標簽和按鈕相對于頂部標簽居中,并鎖定它們之間的間距。 通過按住 Command 鍵單擊選中這四個視圖對象,然后單擊圖標
Add New Constraints
菜單,如圖1.20所示。
圖1.20 添加約束以居中并修復視圖之間的間距
點擊菜單頂部附近的紅色垂直虛線段。 當您點擊該段時,它將變?yōu)閷嵭募t色(如圖1.20所示),表示每個視圖的距離固定在最近的頂層鄰居處。 另外,檢查 Align
框,然后從彈出菜單中選擇 Horizontal Centers
。 對于 Update Frames
,請確保已選擇 Items of New Constraints
。 最后點擊菜單底部的 Add 7 Constraints
按鈕。
如果您在添加約束時發(fā)生任何錯誤,您可能會在畫布上看到紅色或橙色的約束和邊框,而不是正確的藍線。 如果是這種情況,您將需要清除現(xiàn)有的約束,然后再次執(zhí)行上述步驟。 要清除約束,首先選擇背景(容器)視圖。 然后單擊該圖標
Resolve Auto Layout Issues
菜單。 在 All Views in View Controller
部分下選擇 Clear Constraints
部分(圖1.21)。 這將清除您添加的任何限制,并讓您重新添加約束。
圖1.21清除約束
自動布局可能是一個難以掌握的工具,這就是為什么您在本書第一章開始使用它。 越早開始接觸使用它,你將有更多的機會使用它,并習慣它。 另外,在應用程序變得復雜之前處理自動布局將有助于你更容易地去調試布局問題。
要確認您的界面正確展示,請在 iPhone 7 Plus 模擬器上構建并運行應用程序。 確認界面看起來正確后,在iPhone 7 模擬器上構建并運行應用程序。 標簽和按鈕在兩者皆居中。
創(chuàng)建連接
連接(connection) 允許一個對象知道另一個對象在內存中的位置,以便兩個對象可以進行通信。 您可以在 Interface Builder
中進行兩種連接:outlet
和 action
。 outlet
是對象的引用。action
是一種方法,由用戶通過按鈕或滑塊或選擇器觸發(fā)。
我們先來創(chuàng)建引用 UILabel 實例的 outlet。 是時候離開 Interface Builder
去編寫一些代碼了。
聲明 outlet
在項目導航器中,找到并選中名為 ViewController.swift
的文件。 編輯器區(qū)域將從 Interface Builder
更改為 Xcode
的代碼編輯器。
在 ViewController.swift
中,首先刪除模板在 class ViewController :UIViewController {
和 }
之間自動生成的代碼,使該文件如下所示:
import UIKit
class ViewController: UIViewController {
}
(為了簡方使起見,我們不會再顯示該文件的 import UIKit
這一行 。)
接下來,添加聲明兩個屬性的代碼。 (在本書中,您將添加的新代碼將以粗體顯示,您將刪除的代碼將被刪除線顯示。)不用擔心現(xiàn)在就要了解代碼或屬性; 這才剛剛開始
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
拖動到場景中的頂部標簽。 當標簽突出顯示時,松開鼠標和鍵盤; 將出現(xiàn)黑色面板。 選擇 questionLabel
來設置 outlet
,如圖1.22所示。
圖1.22設置questionLabel
(如果在連接面板中沒有看到 questionLabel
,請仔細檢查您的 ViewController.swift
文件以進行修改)。
現(xiàn)在,當加載了故事板文件時,ViewController 的 questionLabel
outlet 將自動引用屏幕頂部的 UILabel 實例,這將允許 ViewController 告訴標簽顯示什么問題。
以相同的方式設置 answerLabel
outlet: 右鍵從 ViewController
拖動到底部的 UILabel 并選擇 answerLabel
(圖1.23)。
圖1.23設置answerLabel
請注意,是從要設置的 outlet 的對象拖動到要將該 outlet 指向的對象。
您的 outlet 全部設置好后,您需要的下一個連接涉及到兩個按鈕。
定義動作方法
當 UIButton 被點擊時,它會調用另一個對象的方法。 該對象稱為 目標(target
)。 觸發(fā)的方法稱為動作(action
)。 該動作是該方法的名稱,該方法包含要在按鈕被點擊時執(zhí)行的代碼。
在您的應用程序中,這兩個按鈕的目標將是 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(_ :)。
要設置一個對象的目標,請右鍵從該對象拖動到它的目標。 當您釋放鼠標時,目標將被設置,并出現(xiàn)一個彈出菜單,讓您選擇一個動作。
在畫布中選擇 Next Question
按鈕,然后拖動到在文檔大綱的 View Controller
。 當 View Controller
突出顯示時,釋放鼠標按鈕并在彈出菜單中的 Sent Events
下選擇 showNextQuestion:如圖1.24所示。
圖1.24設置 Next Question 目標/動作
現(xiàn)在輪到 Show Answer
按鈕。 選擇按鈕,然后從按鈕控制拖動到 View Controller
。 從彈出菜單中選擇 showAnswer:
連接摘要
ViewController 和視圖對象之間現(xiàn)在有五個連接。 您已設置屬性 answerLabel
和 questionLabel
來引用標簽對象——這是其中兩個。 ViewController 是兩個按鈕的目標——這是另外兩個。 項目的模板創(chuàng)建了一個附加連接: ViewController 的 view
屬性連接到表示應用程序背景的 View 對象。 這就是所有的五個連接。
您可以在連接檢查器中檢查這些連接。 在文檔大綱中選擇 View Controller。 然后,在公用程序區(qū)域中,單擊選項卡
圖1.25檢查連接檢查器中的連接
您的故事板文件已完成。 視圖對象已創(chuàng)建和配置,并已對控制器對象進行了所有必要的連接。 我們繼續(xù)創(chuàng)建和連接你的模型對象。
創(chuàng)建模型層
視圖對象組成UI,因此開發(fā)人員通常使用 Interface Builder
創(chuàng)建,配置和連接視圖對象。 另一方面,模型層的部分通常以代碼形式設置。
在項目導航器中,選擇 ViewController.swift
。 添加以下代碼,聲明兩個字符串數(shù)組和一個整數(shù)。
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
...
}
數(shù)組是包含問題和答案的有序列表。 整數(shù)用于跟蹤用戶當前的問題。
請注意,使用 let
關鍵字聲明數(shù)組,而使用 var
關鍵字聲明整數(shù)。 常數(shù)用 let 關鍵字表示; 其值不能改變。 問題和答案數(shù)組是常數(shù)。 本程序中的問題和答案不會改變,實際上只是不能從初始值改變。
另一方面,變量由 var
關鍵字表示; 它的值被允許改變。 你將 currentQuestionIndex
屬性變成一個變量,因為它的值必須能夠隨著用戶循環(huán)的問題和答案而改變。
實現(xiàn)動作方法
現(xiàn)在你有問題和答案,你可以來實現(xiàn)它們的動作方法。 在 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
}.
..
加載第一個問題
應用程序啟動后,您將要從數(shù)組中加載第一個問題,并使用它來替換 ???
問題標簽中的占位符。 一個很好的方法是重寫 ViewController 的 viewDidLoad() 方法。 (“覆蓋”表示您正在為方法提供自定義實現(xiàn)。)將方法添加到 ViewController.swift
。
class ViewController: UIViewController {
??...
??override func viewDidLoad() {
??super.viewDidLoad()
????questionLabel.text = questions[currentQuestionIndex]
??}
}
您的應用程序的所有代碼現(xiàn)在已經(jīng)完成!
構建應用程序
如前所述,在 iPhone 7 模擬器上構建并運行應用程序。
如果構建出現(xiàn)任何錯誤,您可以通過選擇導航器區(qū)域中的選項卡,在問題導航器中查看它們(圖1.26)。
圖1.26帶有示例錯誤和警告的問題導航器
單擊問題導航器中的任何錯誤或警告將被帶到文件和發(fā)生問題的代碼行。 通過將代碼與本章中的代碼進行比較,找出并解決任何問題(即代碼拼寫錯誤!)。 然后再次嘗試運行應用程序。 重復此過程直到您的應用程序編譯成功。
在您的應用程序編譯完成后,它將在iOS模擬器中啟動。 測試 Quiz
應用程序。 您應該能夠點擊 Next Question
按鈕,并在頂部標簽中看到一個新問題; 點擊 Show Answer*
應該顯示正確的答案。 如果您的應用程序無法正常工作,請檢查 Main.storyboard
中的連接。
你已經(jīng)建立了一個可運行的iOS應用程序,花點時間享受你的成果。
好的,享受夠了。你的應用程序可以運行,但它需要一些美化和改進。
應用圖標
運行 Quiz
時,從模擬器菜單中選擇 Hardware
→ Home
。 你會看到 Quiz
圖標是一個無聊的默認磁貼。 讓我們給 Quiz
一個更好的圖標。
應用程序圖標是表示iOS主屏幕上的應用程序的簡單圖像。 不同的設備需要不同大小的圖標,其中一些顯示在表1.1中。
表1.1不同設備的應用程序圖標
我們已經(jīng)為 Quiz
應用準備了一個圖標圖像文件(大小為120x120)。 您可以從 www.bignerdranch.com/solutions/iOSProgramming6ed.zip
下載此圖標(以及其他章節(jié)的資源)。 解壓縮iOSProgramming6ed.zip并在解壓縮的文件夾的 0- Resources/Project App Icons
目錄中找到 Quiz-120.png
文件。
您將將此圖標作為資源添加到應用程序包中。 一般來說,應用程序中有兩種文件:代碼和資源。 代碼(如 ViewController.swift
)用于創(chuàng)建應用程序本身。 資源是應用程序在運行時使用的圖像和聲音。
在項目導航器中,找到 Assets.xcassets
。 選擇此文件打開它,然后從左側的資源列表中選擇 AppIcon
(圖1.27)。
圖1.27顯示Asset目錄
此面板是 Asset
目錄,您可以在其中管理應用程序所需的所有圖像。
將 Quiz-120.png
文件從 Finder
拖到 iPhone App
部分的 2x
插槽上(圖1.28)。 這將將文件復制到文件系統(tǒng)中的項目目錄中,并在 Asset 目錄中添加對該文件的引用。 (您可以按住 Control 鍵并單擊 Asset 目錄中的文件,然后選擇在 Show in Finder
以確認此選項。)
圖1.28將應用圖標添加到 Asset 目錄中
再次構建并運行應用程序。 通過單擊 Hardware
→ Home
,像之前一樣,或使用鍵盤快捷鍵 Command-Shift-H 切換到模擬器的主屏幕(在虛擬機中 Command 鍵即 Win 鍵)。 你應該看到新的圖標。
(如果沒有看到圖標,請關閉應用程序,然后重新構建并重新運行)。為此,最簡單的選項是通過單擊 Simulator
→ Reset Content and Settings...
這將刪除所有應用程序并將模擬器重置為默認設置,您應該在下次運行應用程序時看到應用程序圖標。)
啟動屏幕
現(xiàn)在該為項目設置 啟動圖片(launch image)
了,它在應用程序加載時顯示。 launch image 在iOS中具有特定的作用:它表示應用程序正在啟動,并描述了用戶在應用程序加載后將進行交互的UI。 因此,良好的 launch image 是應用程序的無內容屏幕截圖。 例如,Clock
應用程序的 launch image 顯示底部的四個選項卡,全部處于未選擇的狀態(tài)。 一旦應用程序加載,將選擇正確的選項卡,內容變得可見。 (請注意,啟動圖片在應用程序啟動后被替換;它不會成為應用程序的背景圖像。)
完成此操作的一個簡單方法是允許 Xcode
使用 launch screen file
為您生成可能的 啟動屏幕圖像。
通過單擊項目導航器中的最頂部的 Quiz 來打開項目設置。 在 App Icons and Launch Images
下,從 Launch Screen File
下拉列表中選擇 Main.storyboard
(圖1.29)。 現(xiàn)在將從 Main.storyboard
生成啟動圖片。
圖1.29設置啟動屏幕文件
很難看到這種更改的結果,因為 啟動圖片 通常只在很短的時間內顯示。然而,盡管它的角色是如此的短暫,但它仍然是一個良好的實踐。
恭喜! 你已經(jīng)寫了你的第一個應用程序,甚至添加了一些細節(jié)來改進它。 您將在本書后再次用到該 Quiz 應用程序。 下一章將為你介紹一些 Swift 編程的基礎知識。