WWDC18 帶來許多令人興奮的好消息,iOS 12、Swift 4.2 和 Xcode 10 ,每個都有許多有趣的新功能。但對 App 開發者來說,馬上可以派上用場的莫過於 Xcode,畢竟我們開發的 App 未必需要 iOS 12 的 Siri Shortcuts 和 ARKit 2,程式碼也不見得會用到 Swift 4.2 的新功能。因此,接下來的時間,我們就把時間交給 Xcode 10,看它大顯神威吧。
下載 Xcode 10 beta
連到 Xcode 10 beta 的下載頁面,點選 Download 下載。
不用擔心你沒有付 Apple $99 美金的開發年費,只要用免費的 Apple ID 登入即可下載。
接著,就讓我們啟動 Xcode 10,瞧瞧它的全新功能 !
保護眼睛的暗黑系 (Dark Mode) Xcode
如上圖所示,貼心的 Xcode 10 多了暗黑風格,讓我們寫程式寫到半夜三點也不會近視。不過此風格其實是 macOS 10.14 Mojave 的新功能,所以 macOS 必須升級到 10.14,才能見到暗黑的 Xcode 10。如果你的 macOS 是 10.13,那麼很遺憾的,你的 Xcode 10 只能以原來的白色風格見人。
在 macOS 10.14,我們可從設定 App 的 General 頁面的 Appearance 欄位選擇一般模式或暗黑模式。當調成暗黑模式時,支援暗黑風格的 App 將可顯示暗黑風格,但不支援的還是會維持原本的樣子。
微改版的 Interface Builder
浮動視窗的 Library
在 Storyboard 或 Xib 設計畫面時,想將元件加到畫面上,必須從 Objects Library 將元件取出。但在 Xcode 10,右邊變成只有 Inspectors,原本在下半部的 Library 區塊不見了。
看來 Apple 要逼我們從程式製作 App 畫面了 !
別擔心,Xcode 沒那麼狠心,我們還是可以從 Interface Builder 製作畫面。如下圖所示,點選紅色圓圈圈起的按鈕(在 Standard Editor 按鈕左邊),即可再次看到 Objects Library。(或是按快速鍵 cmd + shift + L)
更 Cool 的是,它將以浮動視窗的方式出現,我們可隨自己喜好調整它的寬度和位置。
當我們將元件拖曳到畫面上後,Objects Library 的浮動視窗將消失。如果不想它消失,可以按住 option 鍵再做拖曳。
若想顯示 Media Library 也可以,只要按住剛剛的按鈕,即可從下拉清單選擇 Show Media Library。
也許有人想到,除了 Objects Library 和 Media Library,不是還有跟程式有關的 Snippets Library 嗎 ?
別擔心,它並沒有消失,只是現在 Xcode 更聰明了。當我們編輯程式碼時,原本顯示 Object Library 的按鈕會自動變成顯示 Snippets Library。(按鈕的圖案變成 { })
多功能的 Embed in 按鈕
設計 iOS App 畫面時,我們時常會用到 Embed In,想把 View Embed In 到另一個 View,Scroll View、Stack View,或是把 Controller Embed In 到 Navigation Controller、Tab Bar Controller。
在 Xcode 10,Embed In 變得更容易了。只要點選下方向下箭頭的按鈕 ,即可選擇 Embed In 的對象。
其中比較特別的是 View 和 View Without Inset。
選擇 View 的話將如下圖所示,容納 Image View 的 View 將比 Image View 還大,因為多了上下左右的 Inset。
選擇 View Without Inset 的話將如下圖所示,容納 Image View 的 View 將剛好等於 Image View 的大小。
選擇字體(Font)時的即時預覽
iOS 內建豐富的字型,不過從前我們要指定字型後,才能看到它呈現的樣子。在 Xcode 10,我們在選擇字體時即可預覽它的模樣。
從 Interface Builder 跳到 Assets
點選 Image 欄位的箭頭,跳到 Assets 裡的圖片。
除了圖片,顏色欄位也可以點選箭頭切換到 Assets 裡的顏色。
更進步的程式編輯
一次輸入多行文字的 Multiple Cursors
Multiple Cursors 讓我們可以在多個游標後輸入文字,實現一次輸入多行文字的編輯效果。接下來就讓我們用實際的例子親眼見證 Multiple Cursors 的威力吧。
我們想在型別 Baby 裡宣告兩個常數,體重和身高。由於它們的型別都是 Double,所以利用 Multiple Cursors,我們只需要輸入一次 : Double。
- 在 weight 後點擊,讓第一個游標落在到時候冒號輸入的位置。
- 利用 ctrl + shift + 點擊,新增其它游標。
- 輸入文字 : Double,此時因為有兩個游標,兩行 : Double 將神奇地同時出現。
剛剛的例子,我們也可以搭配其它的方法實現 Multiple Cursors。比方利用 ctrl + shift + 向上或向下的按鍵,也可在上一行或下一行生出新的游標。
剛剛我們不小心把體重和身高宣告成常數,正常情況下,它們應該是變數才對,就好像彼得潘現在 20 歲卻還繼續長高一樣。利用 Multiple Cursors 搭配選取文字的快速鍵,我們可以更快地將 let 變成 var。
- 利用 Multiple Cursors,讓游標出現在 let 之前。
- 按住 option + shift + 向右箭頭選取 let。
- 輸入 var。
前面提到的 option + shift + 向右箭頭是 Xcode 選取東西的快速鍵,利用它我們可快速選取某個變數或 function 名字。Xcode 其實還有滿多選取的方法,比方以下兩個方法:
- 一次選一個字母:按住 shift 鍵後,再依選取的文字長度按下多次向右鍵,因此剛剛的 let 變成要按 3 次向右鍵。
- Column Select:按住 option 讓游標變成 + 的符號後,即可拖曳選取同一個位置的多行文字。
結合選取多行文字的技巧,再進一步搭配 Copy & Paste 和 Multiple Cursors,還可以方便地在多個游標貼上複製的多行文字呢。
展開 / 收起程式的 Code folding ribbon
我們常常不知不覺寫出長長的一大串程式,不過沒關係,Xcode 的 Code folding 功能可以幫我們將整段程式收起(折疊),等想念它的時候再將它展開。
使用 Code folding 功能有很多方法,接下來我們將介紹 Code folding ribbon,利用 Xcode 左邊的長條 ribbon(帶),快速收起 / 展開 { } 裡的程式,甚至連注解也可以收起。
- 請先打開 Xcode 的 Preferences 視窗,切換到 Text Editing 頁面,勾選 Code folding ribbon。
- 現在 Xcode 左邊除了行數,還多了一些長條 ribbon。
只要可以收起的程式(比方 { } 的區塊或是好幾行的注解),左手邊就會出現 ribbon,點選 ribbon 即可收起 / 展開程式。
點選 function 旁的 ribbon 會將 function { } 裡的程式收起。再次點選 ribbon 或是 { } 裡的 ··· 即可展開。
有 { } 的程式都可以收起,比方 if 的 { }。
沒 { } 的注解也可以收起。
讓最後一行程式碼顯示在畫面中間的 Over-scroll
在舊版的 Xcode,程式碼的最後幾行會變得較難編輯跟閱讀,因為如下圖所示,它們的位置將落在檔案的底部。
在 Xcode 10,有了 Over-scroll 功能,既使已經是最後一行,我們依然能繼續捲動,讓最後一行出現在螢幕的中間。
從右鍵選單 Create Code Snippet
在 Xcode 10 要建立 Code Snippet 也變得更容易了。只要將程式碼選取,從右鍵選單選擇 Create Code Snippet 即可。
版本管理的新功能
支援 Bitbucket、GitLab & GitHub
GitHub 被微軟買下了 ! 我們的寶貝心血 iOS App 的 Swift 程式,該繼續放在 GitHub 嗎 ?
要放在 GitHub 也可以,不想放的話,沒關係,Xcode 10 現在除了原本的 GitHub,還支援 Bitbucket 和 GitLab 呢。
依照以下步驟,即可設定專案對應的 git 帳號。
- 在 Source Control Navigator 點選第一個藍色 icon 後,從右鍵選單選擇 Create xxx Remote。
- 在 Account 欄位點選 Add an account 新增帳號。
- 選擇帳號的平台。
顯示程式版本狀態的 Source Control Change Bar
當專案設定版本管裡後,Xcode 的左邊將長出顯示版本狀態的 source control change bar。
如下圖所示,當我們輸入 print(“viewDidLoad”) 後,16 行的旁邊將顯示藍色的 change bar,表示此行程式尚未 commit (Uncommitted)。
點選 change bar 還可進行額外操作,比方下圖的 Discard Change。
不同顏色的 change bar 代表不同的狀態。比方當我們將剛剛的修改 commit 後,change bar 將變成灰色,表示我們尚未 push (Unpushed)。
此時點選 change bar 將顯示相關的 commit 資訊。
接著讓我們看看一個更厲害的功能,我們還能在 pull 前看到別人已經上傳的修改。此時 change bar 將變成空心狀,稱為 Upstream 的 change bar。不過此功能預設關閉,所以我們必須另外在 Preferences 的 Source Control 分頁,勾選 Include upstream changes 才能看到。
如下圖所示,在另外一台 Mac 開發的朋友,尚未 pull 我們剛剛 push 的程式,因此如下圖所示,他將看到 viewDidLoad 的旁邊出現空心的 change bar,表示已經有人 push 新的版本,對 viewDidLoad 做了一些修改。
點選 change bar 即可顯示相關的 commit 資訊。
點選 Show commit 還可比較目前本機端和 commit 版本的差異。
不過 Xcode 是定時抓取遠端的程式,所以我們不一定能立即看到別人 push 的修改。如果想要求 Xcode 立即更新,可點選 Source Control > Fetch and Refresh Status。
勾選 Include upstream changes 還能提醒我們程式衝突。倘若不幸本機端的修改和別人 push 的程式產生衝突,此時我們將看到紅色的 change bar (Conflict)。
終於可以 push tag 了
在舊版的 Xcode,我們已經可以設定 tag,然而當我們 push 時,tag 卻不會一併上傳。
此問題在 Xcode 10 終於解決了,當我們 push 時,可勾選 Include tags 上傳 tag。
建立和上傳 SSH Key
Xcode 現在也可以幫我們建立和上傳 SSH Key,步驟如下。
- 在 Preferences 的 Accounts 分頁,點選某個 git 帳號後,點選 SSH Key 右下方的 create 建立 SSH Key。
- 輸入 SSH key 的密碼 (passphrase)。
- 點選 Upload 上傳 SSH key。
SSH key 順利地建立,存在本機端的 Mac 和遠端的 GitHub 上。
一步步執行的 Playground (step by step)
Xcode 10 的 Playground 多了一步步執行的新功能。什麼意思呢 ? 從前的 Playground 只會傻傻地從第一行執行到最後一行,現在我們可指定 Playground 執行到某一行就好。
如下圖所示,現在 Playground 的左邊多了一條藍色 bar 和三角形。當我們點擊第 4 行的三角形時,程式將從第 1 行執行到第 4 行,因此只會印出第 3 和第 4 行的文字,第 5 和第 6 行尚未執行。
此時藍色 bar 變成從第 5 行開始,藍色 bar 的範圍是還未執行的行數,因此我們可點擊其中的三角形,讓它繼續往下執行。
至於已經執行過的地方,就像犀利人妻說的,回不去了,將如下圖所示,變成無法點擊的灰色三角形。
遇到像是 for、if、function 等程式區塊時,{ } 裡的程式也會是灰色三角形,代表我們無法指定程式執行到 { } 裡的某一行。
我們只能指定它跑完整個 { } 裡的程式,因此 } 的旁邊可看到可點擊的藍色三角形。如下圖的 for 例子,我們可點擊第 7 行的三角形,讓它印出十句「那為我對抗世界的決定那陪我淋的雨」。
如果真的想要重頭開始執行,其實是可以的,只要你願意放棄目前執行的結果,點擊下方停止執行 (Stop Playground) 的正方形按鈕。
此時下方的按鈕將變回三角形,藍色 bar 再度從第一行延伸到最後一行,代表目前尚未開始執行,等著我們點擊三角形執行到某一行。
不過大部分的時候,其實不用這麼麻煩,比方我們已經執行到第 5 行,然後我們修改了第 4 行的程式,改成「原來我們和 Swift 曾經靠得那麼近」。 Xcode 很聰明,它知道我們修改後會想重頭執行,所以此時藍色 bar 將自動從第一行延伸到最後一行。
當我們新增了一行程式,想讓它執行到剛新增的程式時,除了點擊藍色三角形,還有個更快的方法,輸入完後不要按 enter,要按 shift + enter 鍵。
如以下例子,輸入完第 5 行的「原來我們和 Kotlin 曾經靠得那麼遠」後,按下 shift + enter 鍵,即可讓它從頭執行到第 5 行。
了解如何讓 Playground 一步步執行後,最後我們來聊聊它有什麼好。它主要有以下幾個優點:
- 執行的速度更快
因為我們可以執行到某一行就好,不一定要執行全部的程式。不過請記得,我們只能要求它從第 1 行執行到某一行,無法讓它只執行某段程式,比方跳過前 9 行,只執行第 10 行到第 20 行。
- 幫助學習研究 API 和理解別人的程式
Apple 每年推出新的 SDK,讓我們有永遠學不完的 API 和新功能。有了一步步執行的功能,我們可歡察程式一步步執行的結果,更容易地學習研究 API 和理解別人的程式。
- 更方便地調整程式和觀察結果
我們可以方便地調整程式的流程或改變資料和參數,觀察它造成的影響,比方運用在 UI 和動畫的微調。
搭配最新的 Swift 4.2
等等,去年 Xcode 9 搭配 Swift 4,今年 Xcode 10 不是應該搭配 Swift 5 嗎? 因為 Apple 預計在 2019 才會推出 Swift 5,所以目前 Xcode 10 搭配的是 Swift 4.2。關於 Swift 版本的推出時程,有興趣的朋友可參考網頁 Swift Programming Language Evolution 的說明。
雖然只是 Swift 4.2,不過它還是多了不少新功能,比方讓 array 可以亂數,讓 enum 可以變 array,讓 true 變 false,false 變 true 的 toggle function 等。有興趣的朋友可參考 Ole Begemann 的 What’s new in Swift 4.2 的說明。
總結
以上介紹的,只是 Xcode 10 一些比較特別、比較常用的新功能,其實還有許多沒提到的新功能值得我們去發掘研究,比方讓測試更有效率的 parallel test,在 Playground 使用 Create ML framework,設計 Dark mode 的 Mac App。想了解更多關於 Xcode 10 的介紹,可參考以下 Apple 的官方網頁 What’s New in Xcode。
關於 Xcode 10 或 Swift iOS App 開發的相關技術,大家若有任何問題,可在這裡留言。也歡迎大家隨時聯絡 彼得潘,當彼得潘回答大家的問題時,其實也在找答案的過程中精進學習,增長了自己的功力,和大家交了朋友,獲得再多錢也買不到的回報和收獲。