[譯] 零基礎 macOS 應用開發(二)

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

[譯] 零基礎 macOS 應用開發(二)

本文翻譯自 raywenderlich.com 的 macOS 開發經典入門教程,已諮詢對方網站,可至多翻譯 10 篇文章。
翻譯它只是因為宿舍太吵太熱,只有這樣才能一句一句看完,並作為自己的筆記,希望各位有英語閱讀能力的話,還是去閱讀英文原吧,畢竟無論是 Xcode,抑或是官方的文件,還是各種最前沿的資訊都只有英文版本。
綜上,此翻譯版本僅供參考,謝絕轉載

相關連結
零基礎 macOS 應用開發(一): 原文 / 譯文
零基礎 macOS 應用開發(二): 原文 / 譯文(本文)
零基礎 macOS 應用開發(三): 原文 / 譯文

歡迎回到我們的零基礎 macOS 應用開發教程的第二部分(共三部分)!
在第一部分,你瞭解瞭如何安裝 Xcode、如何建立一個新的 app、新增 UI、連線程式碼與 UI、執行 app、除錯 app,以及尋求幫助。如果你對上述內容還有任何不確定之處,再回去瀏覽一遍第一部分吧。
在這一部分,你將會建立一個介面更加複雜的 app。你將會學到如何應對可調整大小的視窗,以及設計第二個頁面——偏好設定頁面,並讓你的 app 能跳轉到這個新建立的頁面。

準備開始

和第一部分一樣,開啟 Xcode 並在歡迎頁面點選 Create a new Xcode project,或選擇 File 選單中的 New Project…。接下來在 macOS 下的 Application 標籤頁中選擇 Cocoa Application,並點選 Next,把你的 app 命名為 EggTimer,確保 Language 選項為 Swift 以及 Use Storyboards 被選中。點選 Next 然後找一個合適的地方儲存這個專案。
編譯並執行你的 app 來確保一切正常。

EggTimer App

你將會開發的 app 叫做 EggTimer,它能幫助使用者倒計時,並顯示剩餘的時間。App 的介面上會有一個雞蛋的圖示,隨著時間的臨近,雞蛋會被慢慢煮熟;當你的雞蛋煮熟時,還會有一個提示音。App 內還有一個頁面會顯示此 app 的偏好設定。

Project Navigator(專案導航器)中開啟 Main.storyboard,正如第一部分所說的,你已經擁有了三個場景:

  • Application Scene(應用場景)包含了只要 app 執行著就會顯示的選單欄。
  • Window Controller(視窗控制器)是定義了 app 視窗有怎樣行為(怎麼調整大小、視窗怎麼出現、app 是否會記住上次調整的大小和位置等等)的部分;其實一個 Window Controller 可以管理多個視窗,但如果它們的屬性不同,你就需要多個 Windows Controller 了。
  • View Controller 則顯示了視窗中的使用者介面——也就是你對 UI 進行佈局的地方。

你注意到了嗎?有一個箭頭指向了 Window Controller,這表明它是 app 啟動時的 initial display(初始頁面)。你可以在 Document Outline(文件大綱)中選擇 Window Controller,然後在 Attributes Inspector(屬性檢查器)中檢視這個設定。取消勾選 Is Initial Controller(用作首要控制器)後,箭頭就消失了。因為你需要它來作為首要的控制器,請把這個選項勾選上。

Window Controller(視窗控制器)

在你開始著手 UI 前,請確保你已經在 Project Navigator(專案導航器)中選擇了 Main.storyboard。點選來選擇其中的 window(視窗)。在視覺化編輯器中,Window Controller顯示了「View Controller」這行字,因為它包含著一個 View Controller(檢視控制器)。在這個 app 中,我們不希望使用者將視窗調整到 346 × 471 畫素以下,這兩個數值也將會是 app 啟動時視窗的預設大小。

Utilities(工具集)面板中前往 Size Inspector(尺寸檢查器),設定 Content Size Width(內容寬度)Content Size Height(內容高度)分別為 346;勾選 Minimum Content Size(最小內容尺寸)的核取方塊,並確保其數值與內容尺寸相同。現在,在視覺化編輯器裡的 Window Controller 的尺寸應該已經發生了變化,因此可能會蓋住其他元素,你可能需要重新排列一下它們。

雖然不是必須的,但當你把 View Controller 和承放它的 Window Controller 調整到一樣的大小後,後續操作會直觀很多。點選並選中 View Controller,在 Size Inspector(尺寸檢查器)中設定 Width 和 Height 分別為 346 和 471。如果需要的話,重新排列一下介面上的各個元素防止它們重疊。現在視覺化編輯器裡的 Window Controller 和 View Controller 都有著一樣的尺寸了。

選中 WindowController 裡的 Window,在 Attributes Inspector(屬性檢查器)中把它的名字更改為 Egg Timer,設定 Autosave nameEggTimerMainWindow,這樣使用者上次調整的視窗的尺寸和大小在 app 下次啟動時就都會被記住了。

如果你是一個 iOS 開發者,你應該已經處理過不同裝置、螢幕尺寸、螢幕旋轉方向下的適配問題了。在 macOS 開發過程中,你必須處理無限多種視窗尺寸和長寬比,因此我在這裡把視窗的預設尺寸調整成了這麼一個奇怪的數字。不過好訊息是,Auto Layout 幫助你解決了這個問題。

佈局 UI(一)

基本的 UI 包含了兩個 Stack View(堆疊檢視):第一部分包含顯示剩餘時間的 Label 和雞蛋的圖示。第二個則在底部包含三個按鈕,我們先來製作按鈕:

  • 在 Object Library(控制元件庫)中搜尋「Button」
  • 向 View Controller 中拖動一個 Gradient button
  • 使用 Attributes Inspector(屬性檢查器)刪除它的影象,並把它 Title 設定為 Start
  • 把字型改成 System 24

  • 把按鈕拖大一些讓文字能顯示完全
  • 選中 Start 按鈕,按下 Command⌘ D 兩次來複制兩份
  • 把新複製的按鈕向右拖動一些,並把他們的 Title 改成 Stop 和 Reset
  • 同時選中三個按鈕,然後點選選單欄上的 EditorEmbed InStack View

為了讓按鈕填滿整個 Stack View,選擇新建立的 Stack View,然後在 Attributes Inspector(屬性檢查器)裡做出如下更改:

  • Distribution(分配): Fill Equally(均分填滿)
  • Spacing(間距): 0

在視覺化編輯器的底部點選 Add New Constraints(新增新的約束條件),設定左邊、右邊、底部和高度如上圖所示。將 Update Frames 設定為 Items of New Constraints,然後點選 Apply 4 Constraints(應用四條約束)

Stack View 現在已經放置好了,但這些按鈕似乎比 Stack View 矮了一些,在 Document Outline(文件大綱) 中,按住 Control⌃ 鍵的同時拖動 Start 按鈕到 Stack View 上,並選擇 Equal Heights(高度等同)。對另外兩個按鈕進行同樣的操作。


現在,包含了按鈕的 Stack View 已經完全是我們想要的樣子了。

編譯並執行你的 app,嘗試著改變視窗的大小,這些按鈕會緊緊地貼在視窗的底部,並自動填滿整個視窗的寬度。


最後一步,在 Attributes Inspector(屬性檢查器)中取消選中 Enabled 來禁用 Stop 按鈕和 Reset 按鈕,在計時開始前,這兩個按鈕不應該被啟用。

佈局 UI(二)

第二個 Stack View 包含剩餘的時間以及雞蛋的圖片。向 View Controller 拖入一個 Label,把它的 Title(標題)設定為 6:00 並把 Alignment(對齊)設定為 center(居中)。預設的字型(San Francisco)會自動調整字元的間距——這意味著:隨著倒計時的時間的變化,數字會來回跳躍——這會很煩人。

把字型改成 Helvetica Neue 來避免這樣,然後把 Size(字型大小)設定為 100。這會使文字超出 Label 的範圍,所以調整 Label 的大小直到你可以看到完整的文字。

現在我們需要新增一張圖片,在 Object Library(控制元件庫)的搜尋框中輸入「image」,這會過濾出很多長得很像的控制元件,你需要的是 Image View,將它拖動到 View Controller 中剩餘時間 Label 的下方。

下載這個工程需要的資原始檔(一些圖片和一個聲音檔案),解壓碎並開啟 Egg Images 資料夾。回到 Xcode,在 Project Navigator(專案導航器)中點選 Assets.xcassets

把這六個圖片拖動到 Assets Library(資產庫)中,然後它們就可以在你的 app 中使用了。因為圖片的檔名中帶有「@2x」,它們會被自動分配到各個影象資產的 @2x 區域。

關於 @2x 請自行搜尋 Mac/iOS 的 HiDPI適應,譯者注

前往 Main.storyboard,選中你剛剛新增的 Image View,在 Attributes Inspector(屬性檢查器)中點選 Image(影象)下拉框,在這個下拉框中你可以看到很多內建的圖片以及你剛剛新增的圖片,選中 stopped

現在我們來製作第二個 Stack View:選中顯示剩餘時間的 Label 和剛剛調整好的 Image View,在選單欄上點選 EditorEmbed InStack View。然後我們來調整一下這個 Stack View,使它填滿剩餘的空間。點選視覺化編輯器底部的 Add New Constrains(新增新的約束),然後新增下圖所示的約束條件:

正我們所需要的,Stack View 填滿了剩下的空間,但這個 Image View 太小了,選中它,將它左右兩您的約束按照下圖設定為 User Standard Value(使用標準值)

Attributes Inspector(屬性檢查器)中,設定 Scaling(縮放)Proportionally Up or Down(等比放大或縮小)

編譯並執行 app,調整視窗的大小,看看 UI 元素是否如預期地自動地適應了視窗尺寸。

連線 UI 和程式碼

在第一部分中,你已經知道了你需要使用 @IBOutlets@IBActions 來連線你的 UI 和程式碼。在這個例子中,你需要為以下元素設定 @IBOutlets

  • 剩餘時間的 Label
  • 顯示雞蛋的 Image View
  • 三個按鈕
    此外,這三個按鈕還需要 @IBAction 來響應使用者的點選操作。在 Project Navigator(專案導航器)中,先選中 Main.storyboard,再按住 Option⌥,點選 ViewController.swift,這樣就可以在 Assistant Editor(輔助編輯器,即左右分欄)中開啟它了。如果你的螢幕空間不足,點選右上角的按鈕來隱藏 Utilities(工具集)Navigator(導航器) 面板。

和第一部分一樣,選中剩餘時間的 Label,按住 Control⌃ 鍵的同時拖動它到 ViewController 類中,將名稱設定為 timeLeftField,對雞蛋的 Image View 進行一樣的操作,它的名字設定為 eggImageView。然後是三個按鈕,他們的名字分別設定成 startButtonstopButtonresetButton

這三個按鈕還需要 @IBAction,按住 Control⌃ 並拖動 Start 按鈕到程式碼中,但這次在彈出視窗中將 Connection 設定為 Action,並把它的名字設定為 startButtonClicked,對另外兩個按鈕重複以上動作,為它們新增名為 stopButtonClickedresetButtonClicked 的 @IBAction。

如果你和我一樣也經常忘了把 Connection 修改為 Action 的話,你會得到 @IBOutlets 而不是 @IBAction,如果你要刪除這些多餘的 @IBOutlet,先把這一行程式碼刪除,再轉到 Utilities(工具集)裡的 Connections Inspector(連線檢查器),你會看到 Referencing Outlets 部分裡有兩個專案,點選錯誤連線旁的 × 來刪除它,然後重新連線你的 @IBAction(這一次別忘了修改 Action 哦?)。

ViewController 裡的程式碼現在看起來應該像這樣:

在第三部分中,你將會給這些動作新增程式碼,現在我們關閉 Assistant Editor(輔助編輯器),如果你剛剛隱藏了 Navigator(導航器)Utilities(工具集),重新開啟它們。

選單

Main.storyboard,在 Application Scene(應用場景) 中點選 menu bar(選單欄),Xcode 提供的模版已經內建了一些預設的按鈕,但是在這個 app 中,很多按鈕都派不上用場,最簡單的辦法來瀏覽選單裡的專案是使用 Document Outline(文件大綱),點選左側的小三角來顯示 View 選單和裡邊的內容。

選單欄的結構是由一些 Menus(選單)和 Menu Items(選單專案)組成的,切換到 Utilities(工具集)裡的 Identity Inspector(身份檢查器),這樣你就能看到,當你點選各個選單專案的時候,真正觸發的東西是什麼了。Main MenuNSMenu 的例項,它包含了 NSMenuItem 組成的陣列:View 選單就是這個陣列的一個成員。

View 選單包含一個子選單(NSMenu),裡面包含了它自己的 NSMenuItems,值得注意的是,Separator(分割線)是 NSMenuItem 的特殊形式。

我們要做的第一件事是刪除這個 app 裡不需要的選單項,在 Document Outline(文件大綱)中選中 File 選單,按下鍵盤上的 Delete⌫ 鍵把它刪掉。如果你是在 Visual Editor(視覺化編輯器)中選中它並刪除的話,你會把 File 選單裡的選單項都刪掉,然後只剩下一個空空如也的選單,如果你不小心這樣做了,選中那個空白然後再次按下 Delete⌫ 來移除它。

這段話的後半段沒有看太明白,望各位指正,原文是: If you select it in the Visual Editor and delete, you will only have deleted the menu inside the File menu item, so you will be left with a space in the menu bar. If this happens, select the space and press Delete again to remove it.

繼續刪除其他的 Menu,直到你只剩下了 EggTimer、Window 和 Help 選單。

現在你需要新增一個新的選單來模擬三個按鈕的操作,在 Object Library(控制元件庫) 中搜尋 「menu」,請注意,選單欄中的每一個專案(如 File、Help )都是 Menu Item,點選它之後開啟的才是 Menu,拖動一個 Menu Item 到選單欄中 Egg TimerWindow 之間的地方,它會顯示成一個藍色的方框,這是因為它內部還沒有一個帶有標題的 Menu。

現在想那個藍色的方框拖入一個 Menu,如果你覺得那個方框太小拖不準的話,你也可以拖到 Document Outline(文件大綱)裡我們剛剛建立的 Item 的下方。新的 Menu 還沒有標題,但他已經有了三個選單項。

選中 Menu(不是 item),切換到 Attributes Inspector(屬性檢查器)並把 Title(標題)設定為 Timer,選中 Item 1,雙擊它(或在屬性檢查器裡)把他的標題改為 Start

Attributes Inspector(屬性檢查器)中點選 Key Equivalent(快捷鍵),然後按下 Command⌘ S 來設定快捷鍵。通常情況下 Command⌘ S 是儲存的快捷鍵,但是你已經刪除了 File 選單,這樣的設定並不會有衝突,但在一般情況下我們還是不要複用常見快捷鍵的比較好。

用同樣的方法把第二、三個 item 的標題分別設定為設定為 StopReset,快捷鍵分別為 Command⌘ XCommand⌘ R

在視覺化編輯器中 Menu Bar 的上方,你能看到三個按鈕,切換到 Identity Inspector(身份檢查器),然後依次點選這三個按鈕,你可以看到,他們分別連線著 ApplicationFirst Responder、和 AppDelegate。First Responder 通常就是當前處於最前端的 View Controller,它可以從 Menu Item 那裡接收動作。

按住 Option⌥ 的同時點選 ViewController.swift,然後在你剛剛為按鈕們新增的 @IBAction 的下方新增以下程式碼:

// MARK: - IBActions - menus
@IBAction func startTimerMenuItemSelected(_ sender: Any) {_
startButtonClicked(sender)
}
@IBAction func stopTimerMenuItemSelected(_ sender: Any) {
stopButtonClicked(sender)
}
@IBAction func resetTimerMenuItemSelected(_ sender: Any) {
resetButtonClicked(sender)
}

這些方法會在選單項被點選時被呼叫,然後它們會去呼叫介面上那三個按鈕的 IBAction 方法。其實,你可以讓 Menu Item 直接呼叫按鈕的方法(即把 Menu Item 的 IBAction 也拖到之前定義的按鈕的 IBAction 上),但在這裡我選擇這種方式,因為這樣的話,除錯時這一系列事件會更加清晰明瞭。現在儲存檔案並退出 Assistant Editor(協助編輯器)。

按住 Control⌃ 鍵的同時,把 Start 選單項拖動到象徵著 First Responder 的橙色立方體上,一個包含了很多選項的視窗會彈出來,在鍵盤上輸入「sta」來快速滾動到我們所需要的 startTimerMenuItemSelected 並選擇它。

用同樣的方法把 Stop 選單項和 Reset 選單項分別連線至 stopTimerMenuItemSelectedresetTimerMenuItemSelected。現在當 EggTimer 視窗處於最前端時,點選選單上的按鈕將會呼叫這些方法。

但是還有一個問題:這三個按鈕在同一時刻並非同時都是可用的,而且選單欄上的按鈕需要體現出他們是否可用。這個功能無法在 ViewController 裡實現,因為它不會一直處於 First Responder 的狀態,所以我們需要轉戰 AppDelegate

開啟 Main.storyboard 並確保這幾個 Menu 都處於可見狀態,在 Project Navigator(專案導航器)中按住 Option⌥ 鍵的同時點選 AppDelegate.swift,按住 Control⌃ 鍵的同時把 Start 選單項拖動到 AppDelegate 中,建立一個名為 startTimerMenuItem 的 IBOutlet。

用同樣的方法為另外兩個選單項建立名為 stopTimerMenuItemresetTimerMenuItem IBOutlet。

在第三部分中你將瞭解到如何用程式碼來根據需要啟用和禁用這些選單項,但是現在你需要做的是關閉自動啟用與禁用,因為在一般情況下,app 會檢測當前的 First Responder 是否包含了 menu item 所連線的 action(一般就是 IBAction),如果沒有,就會將他們禁用。在這個 app 中,我們希望自己來控制這件事情,所以選中 Timer 選單項,在 Attributes Inspector(屬性檢查器) 中取消選中 Auto Enables Item(自動啟用專案)

偏好設定視窗

現在 EggTimer app 的主介面已經看起來很好了,但他還需要一個偏好設定視窗來讓使用者選擇他們想把雞蛋煮多熟。

偏好設定介面將會顯示在一個單獨的視窗中,且擁有它自己的 Window Controller。這是因為儘管在一個 Window Controller 中顯示多個 View Controller 是完全可行的,但它們會共享這個 Window Controller 的所有屬性,而偏好設定視窗的預設大小與主視窗不一樣,而且不可以調整大小。

開啟 Main.storyboard,如果 Assistant Editor(輔助編輯器)還處於開啟狀態,把它關閉。在 Objects Library(控制元件庫)中搜尋「window」,向 Visual Editor(視覺化編輯器)中拖入一個 Window Controller,Xcode 會自動為你建立一個 View Controller 來盛放需要現實的內容。重新排列一下視窗中的內容以便你能更清楚地看清所有內容,並讓你新建立的 Window Controller 更靠近選單欄。

開啟選單欄上的 EggTimer 選單,按住 Control⌃ 鍵的同時拖動 Preferences… 選單項到我們新建立的 Window Controller 上,這將會建立一個 Segue(轉場),也就是說使用者點選 Preferences… 時,這個 Window Controller 就會把我們新建立的 View Controller 給顯示出來。

偏好設定面板需要顯示一個新的 View Controller,所以你需要為它建立一個新的 View Controller 類。在 Project Navigator(專案導航器)中,選中已經存在了的 ViewController.swift 檔案,這會確保新建的檔案儲存在與之相同的組中(Xcode 用 Group 來管理檔案),然後在 Xcode 的選單上點選 FileNewFile…

選擇 macOSCocoa Class 然後點選 Next,設定類名為 PrefsViewController,父類為 NSViewController,語言選擇 Swift,不要勾選 Also create XIB file for user interface(同時為 UI 建立 XIB 檔案),然後點選 NextCreate 來儲存檔案。

回到 Main.storyboard,選中我們新建立的 View Controller,請確保你選擇的是 View Controller 而不是它的 View,在 Document Outline(文件大綱)裡選擇會更容易些。在 Identity Inspector(身份檢查器)中,把它的 Class 設定為 PrefsViewController

選擇偏好設定視窗裡的 Window Controller,前往 Attributes Inspector(屬性檢查器)把它的標題設定為  Preferences。Autosave Name 保持留空,這樣每次視窗出現的時候都會出現在桌面的中央。取消選中 MinimizeResize 核取方塊,這樣視窗的大小就是固定的了。

前往 Size Inspector(屬性檢查器),把 Content Size 設定為寬 416 高 214。在 Initial Position(預設位置) 下方的兩個下拉框中分別選擇 Center HorizontallyCenter Vertically

選中 View 中的 PrefsViewController,在 Size Inspector(尺寸檢查器)中把它的寬和高分別設定為 416 和 214。

PrefsViewController 需要顯示一個用來選擇時間的下拉框和一個用來選擇時間的滑塊,它們都包含各自的 Label 用於顯示標題,還有兩個按鈕:Cancel 和 OK,以及一個用於顯示當前選擇時間的 Label。

拖動以下控制元件到 View Controller 中並按下表設定它們的屬性:

新控制元件其他屬性設定
Label設定 title 為「Preset Egg Timings:」
Pop Up Button
Label設定 title 為「Custom Egg Timing:」
Label設定 title 為 「6 minutes」
Horizontal Slider
Push Button設定 title 為 「Cancel」
Push Button設定 title 為「OK」

因為這個視窗不能調整大小,控制元件們會按照你的佈局進行顯示,所以我們不需要給它設定 Auto-layout 約束條件。把介面上的元素排列好,Xcode 自動會用藍色的參考線來幫助你進行對齊。將顯示「6 minutes」的 Label 的右邊拖動到幾乎與邊界持平,因為它可能需要顯示更多內容。雙擊 Pop Up Button,你會看到三個子項,把他們的標題分別設定為:

  • 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

再從  Objects Library(控制元件庫)中拖動兩個 Menu Item、一個 Separator Menu Item 和另一個 Menu Item 到下拉框中,如果你覺得直接拖動它們到介面上有點難度的話,也可以拖動到 Document Outline(文件大綱)的相應位置。

給剛剛拖入的三個子項分別設定標題:

  • For firm yet still creamy hard-boiled eggs: 10 minutes
  • For very firm hard-boiled eggs: 15 minutes
  • Custom

我其實一點都不知道怎麼煮雞蛋,所以我從 The Kitchn 找到了以上的時間和描述。

選中下拉框本體(而不是那幾個子項),把它的 Selected Item(已選中專案)設定為那個「6 minute」的選項。

現在你需要讓你的 app 知道使用者在下拉框中到底選擇了哪個子項,依次選中下拉選單中的每一個自子項,在 Attributes Inspector(屬性檢查器)中設定它們的 Tag 分別為對應的分鐘數:3、4、6、10、15(Custom 子項設定為 0)。

現在選擇 Slider,在 Attributes Inspector(屬性檢查器)中將 Tick marks(刻度數) 設定為 25,Minimum Valve 設定為 1,Maximum Valve 設定為 25,並勾選 Only stop on tick marks(只能選擇刻度),你需要將滑塊向下移動一些來適應新出現的刻度。因為只有當使用者在下拉框種選擇了 Custom 的時候才會啟用,所以我們還需要取消選擇 Enabled

連線偏好設定裡的元素和程式碼

Project Navigator(專案導航器)中按住 Option⌥ 鍵的同時點選 PrefsViewController,如果你需要更多空間的話隱藏掉側邊面板。你需要為下拉框、滑動條和顯示“6 minutes”的 Label 新增 @IBOutlet。把它們依次拖動到 PrefsViewController.swift 中,並給這些 IBOutlet 分別起名:

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

接下來,按住 Control⌃ 鍵的同時拖動以下專案來建立 @IBAction(別忘了把 Connection 改成 Action 哦~):

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

現在你的程式碼看起來應該像這樣:

至此,偏好設定面板視窗的佈局就已經完成了,編譯並執行你的 app 並在 EggTimer 選單中選擇 Preferences 選單,檢查一下開啟的偏好設定視窗,然後點選紅色的關閉按鈕來關閉這個視窗。

App 圖示

UI 部分還剩一步:為你的 app 新增圖示。你之前已經下載了一個包含了這個 app 所需要的所有檔案的資產資料夾,而且已經新增了一些圖片到 Assets.xcassets 中,現在我們需要開啟這個資料夾並找到 egg-icon.png 檔案。

Project Navigator(專案導航器)中選擇 Assests.xcassets,點選 AppIcon 並拖動 egg-icon.pngMac 256pt 1x 的方框中。正如第一部分所說的,在真正的產品中你需要提供所有尺寸的圖示,但在這個 app 中,一個圖示就足夠了。

編譯並執行你的 app,看看新的圖示有沒有出現在 Dock 中,如果沒有,你可能需要在 Xcode 的 Product 選單中點選 Clean,然後再試一次。


下一趴:零基礎 macOS 應用開發(三)?

相關文章

IOS開發 最新文章