原文

歡迎回到 macOS 開發(fā)系列教程的第二部分！

在第一部分，你學(xué)了怎樣安裝 Xcode，怎樣創(chuàng)建一個(gè)新的 APP，添加 UI，連接 UI 和代碼，調(diào)試代碼和怎樣獲得幫助。如果你對(duì)這些還不太確定，回到第一部分再瀏覽一遍。
在這一部分，你將創(chuàng)建一個(gè)更復(fù)雜的 APP 的用戶接口。你將學(xué)到怎樣讓一個(gè)窗口可調(diào)整大小，已經(jīng)設(shè)計(jì)和導(dǎo)航到第二個(gè)窗口顯示 APP 的偏好設(shè)置。

準(zhǔn)備開始

打開 Xcode， 在歡迎窗口中點(diǎn)擊 Create a new Xcode project，或者選擇 File/New/Project…就像在第一部分一樣。選擇 macOS/Application/Cocoa Application，點(diǎn)擊下一步，將 APP 命名為 EggTimer，確保語(yǔ)言選擇 Swift， Use Storyboards 是選中的。點(diǎn)擊 Next 選擇項(xiàng)目保存的地方。

編譯運(yùn)行 APP，確保它工作正常。

EggTimer App

你即將創(chuàng)建的 APP 是 EggTimer App。它從選擇的時(shí)間開始倒數(shù)計(jì)數(shù)剩余的時(shí)間。有一幅圖片雞蛋熟的時(shí)候會(huì)改變，雞蛋準(zhǔn)備好的時(shí)候會(huì)播放音樂。第二個(gè)窗口將顯示 APP 的偏好。

image.png

從項(xiàng)目導(dǎo)航器打開 Main.storyboard。像在第一部分中看到的一樣，你已經(jīng)擁有了 3 個(gè)組件：

• Application Scene
• Window Controller Scene
• View Controller Scene

Application Scene 包含菜單欄和菜單，程序運(yùn)行時(shí)它會(huì)出現(xiàn)。Window Controller 定義了程序窗口的行為：它怎樣調(diào)整大小，新窗口怎么顯示，APP 是否保存窗口大小和位置等等。一個(gè)窗口控制器可以管理多個(gè)窗口，但是如果它們需要不同的屬性，你需要添加多個(gè) Window Controller。

View Controller 顯示窗口中的用戶接口——這是你布置 UI 的地方。

注意，有一個(gè)箭頭指向 Window Controller。這表明當(dāng) APP 啟動(dòng)時(shí)，它將控制最初的顯示。你可以通過選擇文檔大綱中的 Window Controller，然后查看 Attributes Inspector 來(lái)確認(rèn)這點(diǎn)。取消 Is Initial Controller選項(xiàng)箭頭就會(huì)消失。再次選中它，因?yàn)槟愦_實(shí)想讓它成為最初的控制器。

Window Controller

開始用戶接口之前確保選擇了 Main.storyboard。在 Window Controller 里點(diǎn)擊選擇窗口。在 Window Controller 可視化編輯器了顯示了 “View Controller”，因?yàn)樗前诳刂破骼锏摹?duì)于這個(gè) APP，你不想讓它縮小到 346 x 471以下。這也是這個(gè)窗口的初始大小。

image.png

到 Size Inspector 里將內(nèi)容寬度設(shè)置為 346，高度設(shè)置為 471。檢查 Minimum Content Size，確保最小寬度和高度與內(nèi)容大小一致?？梢暰庉嬈髦械? Window Controller 大小將改變。你可能會(huì)想移動(dòng)一下它，不讓它覆蓋其他對(duì)象。

雖然沒有嚴(yán)格的必要，如果你把 View Controller 的尺寸調(diào)整為跟包含它的 Window Controller 一樣，可視化界面看起來(lái)更容易。點(diǎn)擊 View Controller，確保在文檔大綱里視圖是選中的。在尺寸檢查器了將寬和高分別設(shè)置為 346 和 471。如果需要，從新定位所有對(duì)象。現(xiàn)在 WindowController 和 ViewController 在可視編輯器里顯示為相同大小了。選擇 WindowController 中的窗口，在屬性檢查器了將它的標(biāo)題改為 Egg Timer。將 Autosave 命名為 EggTimerMainWindow，這樣在啟動(dòng)時(shí)自動(dòng)保存窗口的大小和位置。

image.png

如果你是一個(gè) iOS 程序員，你還將處理各種不同的設(shè)備類型和旋轉(zhuǎn)。在 macOS 編程中，你必須處理無(wú)限的窗口大小和高寬比。這是為什么我把窗口的初始尺寸弄得有點(diǎn)怪異。幸運(yùn)的是 Auto Layout 為你負(fù)責(zé)了所有工作。

UI 布局——第一部分

基本的 UI 由兩個(gè) stack views 組成。第一個(gè)包含剩余時(shí)間文本和圖片。第二個(gè)沿著底部包含 3 個(gè)按鈕。從按鈕開始：

• 在對(duì)象庫(kù)里搜索 Button
• 拖一個(gè) Gradient button 到視圖里
• 使用屬性檢查器將它的圖片刪除，標(biāo)題改為 Start
• 字體改為 System 24

image.png

• 擴(kuò)展按鈕讓它顯示所有文本
• 選中 Start 按鈕，按兩下 Command-D 復(fù)制兩份
• 拖出兩個(gè)按鈕，讓你能看到他們
• 將新按鈕的標(biāo)題改為 Stop 和 Reset
• 選中 3 個(gè)按鈕，選擇 Editor/Embed In/Stack View

image.png

為了讓按鈕填充 Stack View，選擇 Stack View 作如下改變：

• Distribution: Fill Equally
• Spacing: 0

選擇可視編輯器下面的 Add New Constraints 按鈕，像下面一樣設(shè)置左、右、下、高度約束。選擇 Update Frames: Items of New Constraints 然后點(diǎn)擊 Apply 4 Constraints。

image.png

stack view 現(xiàn)在放置正確了，但是按鈕比 stack view 短。在文檔大綱里面，按著 CTRL 拖動(dòng) Start 按鈕到 Stack View，然后選擇 Equal Heights。其他兩個(gè)按鈕相同做法。

image.png

現(xiàn)在按鈕完全像你希望的那樣了。
編譯運(yùn)行 APP。嘗試改變窗口大?。喊粹o緊貼著窗口的底部，大小均勻的隨著窗口寬帶變化。

image.png

最后在視圖檢查器里面將 Stop 和 Reset 設(shè)置為無(wú)效。在計(jì)時(shí)器開始之前它們是有效的是沒有意義的。

UI 布局——第二部分

第二個(gè) stack view 包含剩余時(shí)間文本和圖片。拖動(dòng)一個(gè)標(biāo)簽到視圖里面，將標(biāo)題設(shè)置為 6:00，對(duì)齊方式設(shè)置為 center。當(dāng)前的系統(tǒng)實(shí)體 （San Francisco）使用等比例間距，對(duì)于數(shù)字這意味著如果你有一個(gè)計(jì)時(shí)器，數(shù)字發(fā)生改變時(shí)它似乎跳來(lái)跳去的。這真的很煩人。

將字體改為 Helvetica Neue 避免這種情況，字體大小設(shè)置為 100。這會(huì)使得文本太大，所有擴(kuò)展標(biāo)簽直到你能看到它。

image.png

在對(duì)象庫(kù)的過濾框里輸入 image，搜索并添加圖片控件。這會(huì)帶出幾個(gè)可能的結(jié)果，你想要的是 Image View。將它拖到視圖里，放在文本標(biāo)簽下面。

從這里下載資源。解壓文件，打開 Egg Images 文件夾。在 Xcode 里點(diǎn)擊項(xiàng)目導(dǎo)航器里的 Assets.xcassets。

拖動(dòng) 6 個(gè)圖片到資源庫(kù)中?，F(xiàn)在你的 APP 可以使用它們了。因?yàn)閳D片文件名中包含 “@2x”，它們已經(jīng)自動(dòng)分配到了每個(gè)圖片資源的 2x 部分。

image.png

回到 Main.storyboard，選擇你剛才添加的圖片視圖，在屬性檢查器里點(diǎn)擊 Image 彈出菜單。你能看到你剛才添加的圖片和內(nèi)置圖片。選擇 stopped。

制作第二個(gè) stack view：選擇剩余時(shí)間文本標(biāo)簽和圖片視圖。選擇 Editor/Embed In/Stack View。現(xiàn)在你需要配置 stack view 填滿空閑空間。在可視編輯器底部點(diǎn)擊 Add New Constraints 按鈕添加它們的約束。

image.png

stack view 按要求擴(kuò)展了，但是圖片仍然太小。選擇圖片視圖，將它的左右約束想下面顯示的一樣設(shè)置為 Standard Value。

image.png

在屬性檢查器里將 Scaling 設(shè)置為 Proportionally Up or Down。
編譯運(yùn)行 APP。改變窗口大小，查看所有 UI 元素是否像我們期望的一樣改變大小和位置。

image.png

連接 UI 和代碼

像在第一部分中學(xué)到的一樣，你需要設(shè)置 @IBOutlets 和 @IBActions 連接 UI 和代碼。對(duì)于這個(gè)窗口你需要為一下元素設(shè)置 @IBOutlets：

• 剩余時(shí)間標(biāo)簽
• Egg 圖片
• 3個(gè)按鈕

當(dāng)用戶點(diǎn)擊按鈕時(shí)，3 個(gè)按鈕還需要 @IBActions 來(lái)觸發(fā)函數(shù)。在項(xiàng)目導(dǎo)航中選擇 Main.storyboard。按著 Option 點(diǎn)擊 ViewController.swift，在輔助窗口中打開它。如果你的空間不夠，使用右上角的按鈕隱藏工具面板和導(dǎo)航面板。選擇 countdown timer label，就像在第一部分一樣，按著 CTRL 拖到 ViewController 類里。將標(biāo)簽名稱設(shè)為 timeLeftField。重復(fù) egg image view，名稱設(shè)為 eggImageView。為按鈕設(shè)置 outlets，名稱設(shè)為 startButton， stopButton 和 resetButton。

按鈕還需要 @IBActions。按著 CTRL 拖動(dòng) Start 按鈕，但是這次連接類型改為 Action。名稱設(shè)為 startButtonClicked。重復(fù)為另外兩個(gè)按鈕創(chuàng)建 Action，名稱為 stopButtonClicked 和 resetButtonClicked。如果你想我一樣，經(jīng)常忘記將連接類型改為 Action，你將得到兩個(gè) IBOutlets，而不是 @IBAction.。為了移除 IBOutlets，先刪除 ViewController 里面多余的代碼行，然后轉(zhuǎn)到連工具面板中的接檢測(cè)器。在 Referencing Outlets 下面你將看到兩個(gè)條目。點(diǎn)擊錯(cuò)誤條目旁邊的 X 刪除它。然后回去，這次記得改變連接菜單 @IBAction。

image.png

現(xiàn)在 ViewController 看起來(lái)應(yīng)該像這樣：

image.png

在本系列的第3部分，你將向這些函數(shù)里添加代碼，讓它們工作。關(guān)閉輔助編輯器，重新打開導(dǎo)航和工具面板，如果你關(guān)閉了它們。

菜單

在 Main.storyboard 里，點(diǎn)擊 menu bar 或者Application Scene 選擇它。APP 模板提供了一組默認(rèn)的菜單，但是，對(duì)這個(gè) APP 來(lái)說它們大部分是不需要的。探索這些菜單最容易的方法是使用 Document Outline。使用展開三角形顯示菜單視圖和它的內(nèi)如。

image.png

菜單的結(jié)構(gòu)是一系列的嵌套的菜單和菜單想。切換到工具面板的身份檢測(cè)器，這樣當(dāng)你點(diǎn)擊它們是能看到它們實(shí)際是什么。Main Menu 是一個(gè) NSMenu 類的實(shí)例。它包含一個(gè) NSMenuItems 數(shù)組：View 就是其中之一。視圖菜單條目包含一個(gè)子菜單 （NSMenu），這個(gè)子菜單包含自己的 NSMenuItems。注意 Separator 條目只是一個(gè)特殊化的 NSMenuItem。

第一件事是刪除這個(gè) APP 里不需要的菜單。在 Document Outline 里選擇 File 菜單，然后 按 Delete 刪除它。如果你在視圖編輯器里刪除它，你只能刪除 File 菜單條目里的菜單，因此會(huì)在菜單條里留下一個(gè)空白。如果發(fā)生這種情況，選擇空白，再次按 Delete 刪除它。
一直刪除直到只剩下 EggTimer, Window 和 Help。

image.png

現(xiàn)在你將添加一個(gè)新的菜單，用來(lái)模仿 3 個(gè)按鈕的操作。在對(duì)象庫(kù)里搜索 Menu。記住每個(gè)菜單都是從菜單項(xiàng)開始的，拖動(dòng)一個(gè) Menu Item 到菜單條中，放到 EggTimer 和 Window 之間。它將顯示為一個(gè)藍(lán)色盒子，那是因?yàn)樗€沒有一個(gè)帶標(biāo)題的菜單?，F(xiàn)在拖動(dòng)一個(gè) Menu 放到藍(lán)色盒子中。如果你覺得難以定位到藍(lán)色盒子，可以拖動(dòng)到文檔大綱，放到新的 Item 下。新菜單依然沒有標(biāo)題，但是現(xiàn)在它有 3 個(gè)條目了。

image.png

選中菜單的同時(shí)（不是菜單項(xiàng)），到屬性檢查器里將標(biāo)題改為 Timer。這將為你的新菜單分配一個(gè)名字。選擇 Item1 將它的標(biāo)題改為 Start ，可以通過雙擊修改它，或者在屬性檢查器里修改。

點(diǎn)擊屬性檢查器里的 Key Equivalent，按 Command-S 賦予它鍵盤快捷鍵。通常 Command-S 意思是保存，但是因?yàn)槟阋呀?jīng)刪除了 File 菜單，這不會(huì)造成沖突，盡管重用通用快捷鍵為其他目的不是一個(gè)好的實(shí)踐。用同樣的方法將第二個(gè)條目設(shè)置為 Stop，快捷鍵為 Command-X。第三個(gè)條目的標(biāo)題為 Reset，快捷鍵為 Command-R。

image.png

在可視化編輯器中，你可以在菜單條的頂部看到 3 個(gè)按鈕。切換到省份檢查器。依次點(diǎn)擊每一個(gè)按鈕，顯示它們連接到 Application、First Responder 和 AppDelegate。First Responder 通常是當(dāng)前最前面的 view controller，它能收到來(lái)自菜單項(xiàng)的動(dòng)作。
按著 Option 點(diǎn)擊 ViewController.swift，在按鈕的 @IBActions 代碼的下面添加以下代碼。

// MARK: - IBActions - menus

@IBAction func startTimerMenuItemSelected(_ sender: Any) {
  startButtonClicked(sender)
}

@IBAction func stopTimerMenuItemSelected(_ sender: Any) {
  stopButtonClicked(sender)
}

@IBAction func resetTimerMenuItemSelected(_ sender: Any) {
  resetButtonClicked(sender)
}

這些函數(shù)將通過菜單調(diào)用，它們?cè)僬{(diào)用按鈕動(dòng)作的函數(shù)。你可以直接讓菜單項(xiàng)調(diào)用按鈕的方法，但是我選擇這種方式使調(diào)試時(shí)一系列事件更明顯。保存文件，關(guān)閉輔助編輯器。

按著 CTRL 鍵將 Start 菜單拖到代表 First Responder 的橙色方塊。將彈出一個(gè)巨大的選項(xiàng)清單。輸入 “sta”快速滾動(dòng)到正確的部分，選擇 startTimerMenuItemSelected。

用同樣的方法將 Stop 菜單項(xiàng)連接到 stopTimerMenuItemSelected，Reset 菜單項(xiàng)連接到 resetTimerMenuItemSelected?，F(xiàn)在當(dāng) EggTimer 窗口出現(xiàn)在前面，選擇菜單項(xiàng)將會(huì)調(diào)用這些方法。

然而，3 個(gè)按鈕不會(huì)同時(shí)為有效狀態(tài)，菜單項(xiàng)需要反映這些按鈕的狀態(tài)。這不會(huì)在 ViewController 里發(fā)生，因?yàn)樗粫?huì)總是 First Responder，所以菜單項(xiàng)將被 AppDelegate 控制。

在打開 Main.storyboard 和 菜單可見的同時(shí)，按著 Option 點(diǎn)擊項(xiàng)目導(dǎo)航中的 AppDelegate.swift。按著 CTRL 將 Start 拖到 AppDelegate，賦予 outlet 名稱 startTimerMenuItem。其他菜單項(xiàng)同樣做法，名稱分別為 stopTimerMenuItem 和 resetTimerMenuItem。

image.png

在第3部分，你將編寫代碼來(lái)在需要的時(shí)候啟用和禁用菜單項(xiàng)，但現(xiàn)在，你需要關(guān)閉自動(dòng)的啟用和禁用。通常 APP 會(huì)檢查當(dāng)前的 First Responder 是否有一個(gè)菜單項(xiàng)對(duì)應(yīng)的方法，如果沒有禁用它。這個(gè) APP 你希望自己控制它。選擇 Timer 菜單取消屬性選擇器中的 Auto Enables Items。

偏好窗口

image.png

EggTimer 的主窗口現(xiàn)在看起來(lái)不錯(cuò)，但現(xiàn)在它需要一個(gè)偏好窗口讓用戶選擇他們需要將雞蛋煮得多好。
偏好窗口以一個(gè)單獨(dú)的窗口出現(xiàn)，擁有它自己的控制器。這是因?yàn)槠么翱趯⒂凶约旱哪J(rèn)尺寸，并且不能改變大小。同一個(gè)窗口控制器擁有多個(gè)視圖控制器是有可能的，但是那樣它們將共享那個(gè)窗口控制器的屬性。

打開 Main.storyboard，如果輔助編輯器是打開的關(guān)閉它，在對(duì)象庫(kù)中搜索 “window”。拖一個(gè) Window Controller 到可視編輯器。它將同時(shí)創(chuàng)建一個(gè) View Controller 來(lái)包含它的內(nèi)容。在窗口里面重新排列它們，讓新的窗口控制器靠近菜單條。

打開 EggTimer 菜單，按著 CTRL 從 Preferences… 拖到新的窗口控制器。在彈出菜單中選擇 Show。這將創(chuàng)建一個(gè) segue，這導(dǎo)致無(wú)論什么時(shí)候用戶點(diǎn)擊 EggTimer 菜單中的 Preferences… 窗口控制器將顯示新的視圖控制器。

image.png

新的偏好窗口將顯示一個(gè)新的 view controller，所以你需要為 view controller 設(shè)計(jì)一個(gè)類。在項(xiàng)目導(dǎo)航里面選擇已經(jīng)存在的 ViewController.swift 文件。這樣確保你新建的文件在項(xiàng)目導(dǎo)航中有一個(gè)邏輯位置。選擇 File/New/File…。

image.png

選擇 macOS/Cocoa Class 點(diǎn)擊下一步。選擇類名 PrefsViewController，為它創(chuàng)建一個(gè)子類 NSViewController。語(yǔ)言選擇 Swift，取消 Also create XIB file for user interface。點(diǎn)擊下一步創(chuàng)建并保存文件。

image.png

回到 Main.storyboard，選擇新的視圖控制器。確保你是選擇了 view controller 自己，而不是 view。在文檔大綱中選擇更容易。在身份檢查器里將類設(shè)置為 PrefsViewController。

image.png

選擇偏好窗口控制器里的窗口，使用屬性檢查器將它的標(biāo)題設(shè)置為 Preferences。不要設(shè)置 autosave 名稱，因?yàn)檫@個(gè)窗口每次都要顯示在屏幕的中心。取消 Minimize 和 Resize，讓窗口大小是固定的。

image.png

到尺寸檢查器里面將 Content Size 的寬設(shè)置為 416，高設(shè)置為 214。在初始位置下，從兩個(gè)下拉菜單里選擇 Center Horizontally 和 Center Vertically。

image.png

選擇 PrefsViewController 里的視圖，使用尺寸檢查器將它的寬設(shè)置為 416，高設(shè)置為 214。

PrefsViewController 將顯示一個(gè)用來(lái)選擇預(yù)置的時(shí)間下拉菜單，和一個(gè)選擇自定義時(shí)間的滑塊。每一個(gè)都有一個(gè)對(duì)應(yīng)的標(biāo)簽，還有兩個(gè)按鈕：Cancel 和 OK。這是一個(gè)動(dòng)態(tài)顯示已選擇時(shí)間的標(biāo)簽。

image.png

拖動(dòng)下面這些控件到視圖控制器，像圖中一樣排列它們：

• Label – 標(biāo)題設(shè)置為 “Preset Egg Timings:”
• Pop Up Button
• Label – 標(biāo)題設(shè)置為 “Custom Egg Timing:”
• Label – 標(biāo)題設(shè)置為 “6 minutes”
• Horizontal Slider
• Push Button – 標(biāo)題設(shè)置為 “Cancel”
• Push Button – 標(biāo)題設(shè)置為 “OK”

因?yàn)檫@個(gè)窗口大小不可變，所以不需要設(shè)置布局約束——對(duì)象總是像你安排的那樣出現(xiàn)。拖動(dòng)對(duì)象來(lái)定位它，使用藍(lán)色參考線來(lái)幫助你。擴(kuò)展 “6 minutes” 標(biāo)簽的寬度幾乎到窗口的右邊，因?yàn)樗赡馨芏辔谋?。雙擊 Pop Up Button 查看它最初的 3 個(gè)條目并設(shè)置它們的標(biāo)題：

• For runny soft-boiled eggs (barely set whites): 3 minutes （松軟的煮蛋，幾乎沒有凝成白色）
• For slightly runny soft-boiled eggs: 4 minutes （輕微松軟的煮蛋）
• For custardy yet firm soft-boiled eggs: 6 minutes （這是什么鳥蛋，像奶油凍的軟蛋？）

從對(duì)象庫(kù)中拖入倆個(gè) Menu Items，然后是一個(gè)分割菜單條，最后是另一個(gè)菜單項(xiàng)。如果有定位的問題，可以使用文檔大綱。
將剩余的菜單項(xiàng)的標(biāo)題設(shè)置為：

• For firm yet still creamy hard-boiled eggs: 10 minutes （堅(jiān)固但是有點(diǎn)乳脂狀的硬蛋）
• For very firm hard-boiled eggs: 15 minutes（非常硬的蛋）

• Custom（自定義）

  
  
  image.png

我不會(huì)假裝有很好的關(guān)于煮蛋的知識(shí)， 這些時(shí)間和描述來(lái)自 The Kitchn.

選擇彈出菜單，注意不是菜單項(xiàng)，將 Selected Item 設(shè)置為 6 分鐘那個(gè)選項(xiàng)。

現(xiàn)在你要做一個(gè)非常巧妙的技巧，讓 APP 準(zhǔn)確的知道選擇了幾分鐘。在視圖檢查器里將每一個(gè)彈出菜單項(xiàng)的 tag 設(shè)置為數(shù)字：3, 4, 6, 10, 15。Custom 菜單項(xiàng)保留為 0。

image.png

現(xiàn)在選擇滑塊，在屬性檢查器里將 Tick marks 設(shè)置為 25，Minimum Value 設(shè)置為 1，Maximum Value 設(shè)置為 25，Current Value 設(shè)置為 6，選中 Only stop on tick marks。你可能想要將滑塊向下移動(dòng)幾個(gè)像素。通過不選擇 Enabled 來(lái)禁用它——它只有在彈出菜單中 Custom 被選擇時(shí)才啟用。

image.png

連接偏好對(duì)象

按著 Option 點(diǎn)擊項(xiàng)目導(dǎo)航中的 PrefsViewController.swift，如果需要空間隱藏側(cè)邊的面板。你需要彈出菜單、滑塊和標(biāo)簽的 @IBOutlets。按著 CTRL 將它們拖到 PrefsViewController，將名稱設(shè)置如下：

• Popup: presetsPopup
• Slider: customSlider
• Label: customTextField

下一步，通過按著 CTRL 拖動(dòng)來(lái)創(chuàng)建 @IBActions，記得每次都在連接菜單中選擇 Action：

• Popup: popupValueChanged
• Slider: sliderValueChanged
• Cancel button: cancelButtonClicked
• OK button: okButtonClicked

你的代碼現(xiàn)在看起來(lái)應(yīng)該像這樣：

image.png

現(xiàn)在偏好窗口的布局完成了。編譯運(yùn)行 APP，從 EggTimer 菜單中選擇 Preferences 。看完偏好窗口后點(diǎn)擊標(biāo)題欄中的紅色按鈕關(guān)閉窗口。

image.png

App 的圖標(biāo)

現(xiàn)在 UI 設(shè)計(jì)只剩下最后一部分——為 APP 添加一個(gè)圖標(biāo)了。你已經(jīng)下載了一個(gè)資源文件夾，并安裝了一部分圖片到 Assets.xcassets 了。再次打開文件夾找到 egg-icon.png 文件。

在項(xiàng)目導(dǎo)航中選擇 Assests.xcassets。點(diǎn)擊 AppIcon。將 egg-icon.png 拖到 Mac 256pt 1x 盒子中。就像在第一部分中討論的一樣，對(duì)于一個(gè)產(chǎn)品 APP，你應(yīng)該提供 AppIcon 中顯示的所有尺寸，但是在這個(gè) APP 中單獨(dú)提供一個(gè)就足夠了。

image.png

編譯運(yùn)行 APP，確認(rèn)新的圖標(biāo)出現(xiàn)在 Dock 中。如果你仍然看見默認(rèn)圖標(biāo)，選擇 Product 菜單中的 Clean 再試試。

現(xiàn)在你已經(jīng)完全實(shí)現(xiàn)了 APP 的 UI，但是 APP 還沒有做任何事情。如果你在任何地方感到迷惑，可以從 the Xcode project 下載全部 UI 實(shí)現(xiàn)，為下一部分做準(zhǔn)備。

在這個(gè)系列的第3部分，你將添加代碼讓 APP 工作起來(lái)。