本文翻譯自 raywenderlich.com 的 macOS 開發經典入門教程,已諮詢對方網站,可至多翻譯 10 篇文章。
翻譯它只是由於宿舍太吵太熱,只有這樣才能一句一句看完,並做爲本身的筆記,但願各位有英語閱讀能力的話,仍是去閱讀英文原吧,畢竟不管是 Xcode,抑或是官方的文檔,仍是各類最前沿的資訊都只有英文版本。macos相關連接
零基礎 macOS 應用開發(一):原文 / 譯文(本文)
零基礎 macOS 應用開發(二):原文 / 譯文
零基礎 macOS 應用開發(三):原文 / 譯文編程
你想要學習開發你本身的 macOS app 嗎?
有一個好消息要告訴你!在這個教程中你將會發現,Apple 讓開發 macOS app 這件事變得無比簡單。你將會學習到如何去建立你的第一個 macOS app——即便你是一個徹底的小白。swift
因此你還在等什麼呢?桌面級 app 的世界正在等着你!segmentfault
注意:關於如何開始學習這個系列,這裏有一些提示:app
- 若是你從未學習過 Swift,這個系列涉及了一些 Swift 知識,因此請先看看咱們的 Swift 教程。
- 若是你已經有過 iOS 的開發經驗,第一部分的內容則能夠看做一個複習。保險起見,請快速地瀏覽一下這些內容,而後直接跳轉到下一個部分。
- 這個課程是爲徹底的小白而準備的——你不須要擁有任何 iOS 或 macOS 開發經驗!
要成爲一個 macOS 開發者,你須要兩個東西:編程語言
當你完成 app 的開發,但願將它上傳至 App Store 進行銷售時,你須要一個 Apple 的開發者帳戶。但直到你已經準備好讓你的 app 飛向整片世界的藍天,這都不是一個硬性要求。甚至你已經決定發佈你的 app,也只有在你準備經過 Mac App Store 進行銷售時纔會須要一個開發者帳戶。若是你已是一個 iOS 開發者,那你已經搞定了一切——Apple 已經將各類開發者帳戶融合爲一個,所以你只須要一個帳戶就能夠爲各類 Apple 設備分發 app。編輯器
不一樣於有些其餘平臺,爲 macOS 開發 app 只須要一個工具:Xcode。Xcode 這個 IDE 包含了建立 macOS、iOS、watchOS 和 tvOS app 時所須要的一切。
若是你尚未安裝好 Xcode,點擊你 Mac 左上角的 Apple 圖標,並選擇 App Store 來打開 App Store。即使 Xcode 是免費的,你仍須要一個 App Store 的帳戶來下載 Xcode。ide
如今請搜索 Xcode,而後點擊獲取按鈕來開始下載。當它下載並安裝好(這可能得花點時間,它不是個小軟件)以後,你能夠在 應用程序文件夾中打開它。函數
遵循長久以來學習一門新編程語言或平臺的傳統,你將會學習如何爲 macOS 開發一個「Hello World!」app。工具
若是 Xcode 如今還沒打開,請打開它。你會看到一個「Welcome to Xcode」的窗口。若是你沒有看到這個窗口。點擊 Window 菜單中的 Welcome to Xcode。
點擊 Create a new Xcode project 並在接下來的對話框中,在頂部的標籤中選擇 macOS,而後在 Application 部分中選擇 Cocoa Application,並點擊 Next。
給你的 app你取個名字——Hello World,並確保 Language 設置爲 Swift,以及 Use Storyboards 被勾選。其餘選項所有取消勾選。
點擊 Next 和 Create 來保存你的新項目。
Xcode 已經爲你的 app 應用了一個基礎的模版,並添加了其運行所須要的全部文件。所以,什麼都不用作而直接運行它其實還挺有趣的。
點擊工具欄上的 播放按鈕▶️ 或使用鍵盤快捷鍵 ⌘R 來運行你的 app。Xcode 如今會將全部的代碼編譯成機器語言,將 app 運行所須要的全部資源文件打包,而後運行它。
注意:當你第一次在 Xcode 中運行一個 app 的時候,你可能會被詢問是否要 Enable Developer Mode on this Mac(在這臺 Mac 上啓用開發者模式),請放心地點擊 Enable,這可能會要求你輸入 Mac 的開機密碼。開發者模式容許 Xcode 附加調試器到你的 app 的進程——這對於開發一個 app 來講極其有用!
你如今應該能看到一個空白的窗口了,但請不要灰心——你如今已經能作到這些了:
可是如今是時候來把這個空空的屏幕變得更有趣了,因此請退出這個 app 並返回到 Xcode。
Xcode 將許多功能融合在同一個窗口中,所以許多東西並不能同時顯示出來。要想成爲一個 Xcode 高手,你須要知道你須要的功能在哪裏,以及如何打開它們。
當你在 Xcode 裏打開一個新的工程,你已經擁有了一個帶有工具欄和三個主要面板的窗口。
左邊的窗口是 Navigator(導航器),在這個面板的頂部有八個標籤將它分紅了八個部分。你所最經常使用到的是第一個——Project(項目)——它列出了項目中全部的文件,你能夠點擊這些文件來編輯它們。
中間的面板是 Editor(編輯器),這裏會顯示你在 Project Navigator(項目導航器)裏選擇的文件。
右側的面板是 Utilities(工具集)面板,這裏顯示的內容會會隨着你在 Editor 裏進行的操做而變化。
你可使用 Storyboard 來設計 app 的 UI(用戶交互界面)。你的 app 已經有了一個 storyboard,因此在 Project Navigator(工程導航器) 中點擊 Main.stroyboard 來將之顯示在編輯器中。
你的屏幕自動切換了,是否是很神奇!在編輯器中,你如今能夠看到文檔的線框圖,以及可視化的 UI 編輯器。
看一看你可視化編輯器中的東西。這兒有三個主要的區域,每個都有着一個文本佔位符:
在 Utilities 面板裏,你將會看見上半部分有八個標籤頁,而下半部分有四個標籤頁
下半部分的區域呈現了你能夠插入到你的項目裏的東西。如今你須要插入 UI 控件,因此點擊第三個圖標 Object Library。
在底部的過濾器(輸入框)中,輸入「text」,而後找到並拖動一個 Text Field 到你的 View Controller Scene。
如今搜索「button」並拖動一個 Push Button 到 View Controller Scene 中。最後,再添加一個 Label。
如今,點擊播放按鈕▶️或按下 ⌘R 來編譯並運行你的 app,你就能看到這三個 UI 元素了。試着在輸入框中打些字——它如今已經支持全部標準的鍵盤快捷鍵了:複製、粘貼、剪切、撤銷、重作…可是界面上的按鈕仍是什麼都作不了,文本也只顯示了一個「Label」,因此如今咱們該把它們鏈接起來。
返回 Main.storyboard 並點擊界面上的 Button,在右側的 Utilities 面板中,點擊第四個標籤頁 Attributes Inspector。
把按鈕的標題改成「Say Hello」,此時的按鈕可能不夠寬,因此請點擊菜單欄上的 Editor,而後點擊 Size to Fit Content。(若是 Size to Fit Content 選項不可用,先點擊空白處取消選中這個按鈕,再從新選擇它,而後再試一次)。
如今點擊並選中 Text Field。在這個 app 中,用戶將在這裏輸入他們的名字,當他們點擊按鈕時,app 會顯示「Hello」+他們的名字。爲了提示用戶,咱們在 Attributes Inspector 中爲輸入框中添加一個佔位符。
把輸入框稍微拖大一些,以便能放下一些較長的名字,而後把按鈕拖動到它的右邊。當你在 View Controller Scene 中拖動元素時,會出現一些藍色的虛線來幫助你根據 Apple’s Human Interface Guidelines(Apple 人機交互指南)對齊並放置元素。
把 Label 放置在輸入框的下方。由於這個 Label 十分重要,咱們把它的字體改大一些,選中這個 Label,在 Attributes Inspector 中把 Font 更改成 System Regular 30。
不如來些更刺激的吧!把文字的顏色改爲紅色。
你不知道用戶的名字會有多長,因此咱們須要從新調整輸入框的大小,以適應字體的高度,並把寬度調整爲和窗口的寬度差很少。
編譯並運行你的 app 來檢查一下你的 UI 設置是否生效了。一旦你以爲 Label 中的文字效果令你滿意,把 Label 的 Title 刪除,這樣一來就清空了 Label 裏的文字。
你的 app 如今沒法按照你預期的那樣工做,你仍須要添加代碼來讓你的代碼能與 UI 通信。爲了創建這種聯繫,你須要使用 Xcode 的 Assistant Editor,先在導航器中選中 Main.storyboard,按住 Option⌥ 鍵的同時點擊 ViewController.swift,這個操做將會在不關閉以前打開的文件的狀況下,爲 ViewController.swift 打開第二個編輯器面板。
先在屏幕上的東西可能看起來有些擁擠(固然這也取決於你的顯示器尺寸),因此點擊工具欄最右上方的按鈕來隱藏 Utilities 面板。若是你的顯示器空間仍是不夠,把 Navigator 面板也一併隱藏了。
選中輸入框,按住 Control⌃ 鍵的同時把文本框拖動到 class ViewController : NSViewController {
和 override func viewDidLoad() {
之間的那一行,鬆開鼠標時會彈出一個小窗口,在「name」中輸入 nameField
,而後點擊 Connect。
對 Label 作一樣的事情,並把它命名爲 helloLabel
。
看一看 Xcode 自動生成的代碼,你將會看見它們都以 @IBOutlet
開頭,這是「Interface Builder Outlet」的縮寫,也就是告訴 Storyboard 編輯器這些對象的名稱是如何與視覺元素關聯起來的。
對於那個按鈕,代碼中不須要給它起名字,但它須要知道用戶什麼時候點擊了這個按鈕。與 @IBAction
不一樣,這種鏈接叫作 @IBAction
。
和先前同樣,選中按鈕,按住 Control⌃ 鍵的同時把文本框拖動到 ViewController.swift 中。這一次把 Connection 選項設置爲 Action,並把 name 設置爲 sayButtonClicked
。這將會建立一個按鈕被電擊時會調用的一個函數。
如今萬事俱備,只差代碼了!點擊右側編輯器面板右上角的「×」關閉 Assistant Editor,回到 ViewController.swift。若是你隱藏了 Navigator,點擊右上角的按鈕或按下 ⌘1 來直接跳轉到 Project Navigator。
把以下代碼輸入到 sayButtonClicked
函數中:
var name = nameField.stringValue if name.isEmpty { name = "World" } let greeting = "Hello \(name)!" helloLabel.stringValue = greeting
在刪除了頂部自動生成的版權信息後,完成了的 ViewController.swift 中的代碼看起來應該像下邊截圖中的同樣。行號左邊的小氣泡代表這是一個 Stroyboard 與接口的鏈接點。
如今編譯並運行你的 app。
什麼也不輸入並點擊 Say Hello 按鈕,你將會看到「Hello World!」;而輸入了你的名字以後再點擊就能看到你專屬的問候語了。
有時,咱們開發者會犯錯——相信我,真的會的。當咱們犯了錯,就須要調試咱們的代碼。Xcode 容許咱們在代碼的任何一點暫停,而後一行一行地運行代碼,讓你檢查每一行運行後各個變量的值,以此來找到錯誤。
在 ViewController.swift 中找到 sayButtonClicked
,點擊 var name =
左邊的行號,一個藍色的小旗子將會出現,這是一個激活了的斷點,當你點擊你 app 界面上的按鈕時,調試器會讓程序在這裏暫停。再次點擊它,它會變成淺淺的藍色,這是一個未激活的斷點,它將不會暫停代碼,也不會啓動調試器。要完全移除一個斷點,把它從行號那一條中拖出去便可。
再次添加一個斷點並運行你的 app,點擊 Say Hello 按鈕,Xcode 會移動到最頂層,並把有斷點的那一行高亮顯示。在 Editor 面板的最底部,將會有兩個部分:Variables(變量)和 Console(控制檯)。Variables 部分展現了此函數中用到的全部變量以及 self
(也就是 View Controller)和 sender
(也就是按鈕)。
在 Variables 部分的上方有幾個控制調試器的按鈕。請把鼠標挨個放在這些按鈕上,根據彈出的工具提示看看他們是作什麼的。點擊 Step Over 按鈕來運行下一行代碼。
在 Variables 部分中,你能夠看到 name
是一個空的字符串,因此再連續點擊 Step Over 按鈕兩次,調試器會移動到 if
語句中,並把 name
變量設置爲「World」。
在 Variables 部分中選中 Name
變量,點擊下方的 Quick Look 按鈕來查看具體的內容,電擊 Print Description 按能夠把它的信息輸出到 Console 部分中。若是「World」沒有被正確地設置,你應該能在這裏看到,並想出對應的對策。
當你檢查完全部的變量內容後,點擊 Continue program execution 按鈕來中止調試,並讓程序繼續運行。你可使用界面右上角的按鈕來隱藏調試器。
除了代碼和 UI,你的 app 還須要一些圖像。根據屏幕的不一樣(Retina 顯示屏和非 Retina 顯示屏),你常常須要爲一套資產提供多個版本。爲了簡化這個流程,Xcode 使用 Asset Libraries 來存儲和管理這些 app 須要的資產。
在 Project Navigator 中點擊 Assets.xcassets,到目前爲止裏邊只有一個 AppIcon,它包含了不一樣分辨率下的 app 的圖標。點擊 AppIcon,你會看到它須要 10 個不一樣的圖片來照顧全部的狀況,但若是你只提供了一個,那麼 Xcode 會盡可能讓它發揮最大功效,但這並非一個正確的作法——你須要盡力爲你的 app 提供全部尺寸的圖標,但在這個教程中,咱們只准備了一個圖標。
下載 512×512 像素的示例圖標,把它拖動到 Mac 512pt 1x 的方框中。
編譯並運行你的 app,查看 Dock 欄中的圖標,若是你看到的仍是默認圖標,請在 Product 菜單中選擇 Clean,而後再次運行。
除了一個編輯器,Xcode 還包含了你編寫 macOS app 所須要的全部文檔。
在 Help 菜單中選擇 Documentation and API Reference。搜索 NSButton,請確保當前選中的語言是 Swift,只需點擊頂部的搜索結果,就能夠找到全部關於按鈕的信息了。
還有一種方法,能夠在你的代碼中直接查看相關的文檔,返回 ViewController.swift,找到 sayButtonClicked
所在的行,按住 Option⌥ 鍵的同時點擊 stringValue
,一個快速的查詢面板將會彈出,在底部還有一個 Property Reference 的連接,點擊它就能夠在文檔中查看更多信息。
Option⌥ +鼠標點擊是一個特別好的學習方式,你甚至能夠爲你本身編寫的函數添加本身編寫的文檔,以便從此快速查閱。
Help 菜單中還包括了 Xcode Help,在這裏你能夠了解到更多的 Xcode 信息。