WWDC

搶先預覽 Xcode 10 的全新功能

搶先預覽 Xcode 10 的全新功能
搶先預覽 Xcode 10 的全新功能
In: WWDC, Xcode

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 下載。

download Xcode 10

不用擔心你沒有付 Apple $99 美金的開發年費,只要用免費的 Apple ID 登入即可下載。

接著,就讓我們啟動 Xcode 10,瞧瞧它的全新功能 !

xcode

保護眼睛的暗黑系 (Dark Mode) Xcode

dark-mode-1

如上圖所示,貼心的 Xcode 10 多了暗黑風格,讓我們寫程式寫到半夜三點也不會近視。不過此風格其實是 macOS 10.14 Mojave 的新功能,所以 macOS 必須升級到 10.14,才能見到暗黑的 Xcode 10。如果你的 macOS 是 10.13,那麼很遺憾的,你的 Xcode 10 只能以原來的白色風格見人。

dark-mode-2

在 macOS 10.14,我們可從設定 App 的 General 頁面的 Appearance 欄位選擇一般模式或暗黑模式。當調成暗黑模式時,支援暗黑風格的 App 將可顯示暗黑風格,但不支援的還是會維持原本的樣子。

dark-mode-3

微改版的 Interface Builder

浮動視窗的 Library

在 Storyboard 或 Xib 設計畫面時,想將元件加到畫面上,必須從 Objects Library 將元件取出。但在 Xcode 10,右邊變成只有 Inspectors,原本在下半部的 Library 區塊不見了。

Interface-Builder-1

看來 Apple 要逼我們從程式製作 App 畫面了 !

別擔心,Xcode 沒那麼狠心,我們還是可以從 Interface Builder 製作畫面。如下圖所示,點選紅色圓圈圈起的按鈕(在 Standard Editor 按鈕左邊),即可再次看到 Objects Library。(或是按快速鍵 cmd + shift + L)

Interface-Builder-2

更 Cool 的是,它將以浮動視窗的方式出現,我們可隨自己喜好調整它的寬度和位置。

Interface-Builder-3

當我們將元件拖曳到畫面上後,Objects Library 的浮動視窗將消失。如果不想它消失,可以按住 option 鍵再做拖曳。

若想顯示 Media Library 也可以,只要按住剛剛的按鈕,即可從下拉清單選擇 Show Media Library。

Interface-Builder-3

也許有人想到,除了 Objects Library 和 Media Library,不是還有跟程式有關的 Snippets Library 嗎 ?

別擔心,它並沒有消失,只是現在 Xcode 更聰明了。當我們編輯程式碼時,原本顯示 Object Library 的按鈕會自動變成顯示 Snippets Library。(按鈕的圖案變成 { })

Interface-Builder-4

多功能的 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 的對象。

Interface-Builder-5

其中比較特別的是 View 和 View Without Inset。

Interface-Builder-6

選擇 View 的話將如下圖所示,容納 Image View 的 View 將比 Image View 還大,因為多了上下左右的 Inset。

Interface-Builder-7

選擇 View Without Inset 的話將如下圖所示,容納 Image View 的 View 將剛好等於 Image View 的大小。

Interface-Builder-8

選擇字體(Font)時的即時預覽

iOS 內建豐富的字型,不過從前我們要指定字型後,才能看到它呈現的樣子。在 Xcode 10,我們在選擇字體時即可預覽它的模樣。

Interface-Builder-9

Interface-Builder-10

從 Interface Builder 跳到 Assets

點選 Image 欄位的箭頭,跳到 Assets 裡的圖片。

Interface-Builder-11

Interface-Builder-12

除了圖片,顏色欄位也可以點選箭頭切換到 Assets 裡的顏色。

Interface-Builder-13

Interface-Builder-14

更進步的程式編輯

一次輸入多行文字的 Multiple Cursors

Multiple Cursors 讓我們可以在多個游標後輸入文字,實現一次輸入多行文字的編輯效果。接下來就讓我們用實際的例子親眼見證 Multiple Cursors 的威力吧。

我們想在型別 Baby 裡宣告兩個常數,體重和身高。由於它們的型別都是 Double,所以利用 Multiple Cursors,我們只需要輸入一次 : Double。

  1. 在 weight 後點擊,讓第一個游標落在到時候冒號輸入的位置。
  2. Multiple-Cursors-1

  3. 利用 ctrl + shift + 點擊,新增其它游標。
  4. Multiple-Cursors-2

    Multiple-Cursors-3

  5. 輸入文字 : Double,此時因為有兩個游標,兩行 : Double 將神奇地同時出現。
  6. Multiple-Cursors-4

剛剛的例子,我們也可以搭配其它的方法實現 Multiple Cursors。比方利用 ctrl + shift + 向上或向下的按鍵,也可在上一行或下一行生出新的游標。

Multiple-Cursors-5

剛剛我們不小心把體重和身高宣告成常數,正常情況下,它們應該是變數才對,就好像彼得潘現在 20 歲卻還繼續長高一樣。利用 Multiple Cursors 搭配選取文字的快速鍵,我們可以更快地將 let 變成 var。

  1. 利用 Multiple Cursors,讓游標出現在 let 之前。
  2. Multiple-Cursors-6

  3. 按住 option + shift + 向右箭頭選取 let。
  4. Multiple-Cursors-7

    Multiple-Cursors-8

  5. 輸入 var。
  6. Multiple-Cursors-9

前面提到的 option + shift + 向右箭頭是 Xcode 選取東西的快速鍵,利用它我們可快速選取某個變數或 function 名字。Xcode 其實還有滿多選取的方法,比方以下兩個方法:

  • 一次選一個字母:按住 shift 鍵後,再依選取的文字長度按下多次向右鍵,因此剛剛的 let 變成要按 3 次向右鍵。
  • Multiple-Cursors-10

  • Column Select:按住 option 讓游標變成 + 的符號後,即可拖曳選取同一個位置的多行文字。
  • Multiple-Cursors-11

    Multiple-Cursors-12

結合選取多行文字的技巧,再進一步搭配 Copy & Paste 和 Multiple Cursors,還可以方便地在多個游標貼上複製的多行文字呢。

展開 / 收起程式的 Code folding ribbon

我們常常不知不覺寫出長長的一大串程式,不過沒關係,Xcode 的 Code folding 功能可以幫我們將整段程式收起(折疊),等想念它的時候再將它展開。

使用 Code folding 功能有很多方法,接下來我們將介紹 Code folding ribbon,利用 Xcode 左邊的長條 ribbon(帶),快速收起 / 展開 { } 裡的程式,甚至連注解也可以收起。

  1. 請先打開 Xcode 的 Preferences 視窗,切換到 Text Editing 頁面,勾選 Code folding ribbon。
  2. code-folding-ribbon-1

  3. 現在 Xcode 左邊除了行數,還多了一些長條 ribbon。

只要可以收起的程式(比方 { } 的區塊或是好幾行的注解),左手邊就會出現 ribbon,點選 ribbon 即可收起 / 展開程式。

code-folding-ribbon-2

點選 function 旁的 ribbon 會將 function { } 裡的程式收起。再次點選 ribbon 或是 { } 裡的 ··· 即可展開。

code-folding-ribbon-3

有 { } 的程式都可以收起,比方 if 的 { }。

code-folding-ribbon-4

沒 { } 的注解也可以收起。

code-folding-ribbon-5

code-folding-ribbon-6

讓最後一行程式碼顯示在畫面中間的 Over-scroll

在舊版的 Xcode,程式碼的最後幾行會變得較難編輯跟閱讀,因為如下圖所示,它們的位置將落在檔案的底部。

Over-scroll-1

在 Xcode 10,有了 Over-scroll 功能,既使已經是最後一行,我們依然能繼續捲動,讓最後一行出現在螢幕的中間。

Over-scroll-2

從右鍵選單 Create Code Snippet

在 Xcode 10 要建立 Code Snippet 也變得更容易了。只要將程式碼選取,從右鍵選單選擇 Create Code Snippet 即可。

Create-code-snippet

版本管理的新功能

支援 Bitbucket、GitLab & GitHub

GitHub 被微軟買下了 ! 我們的寶貝心血 iOS App 的 Swift 程式,該繼續放在 GitHub 嗎 ?

要放在 GitHub 也可以,不想放的話,沒關係,Xcode 10 現在除了原本的 GitHub,還支援 Bitbucket 和 GitLab 呢。

依照以下步驟,即可設定專案對應的 git 帳號。

  1. 在 Source Control Navigator 點選第一個藍色 icon 後,從右鍵選單選擇 Create xxx Remote。
  2. git-1

  3. 在 Account 欄位點選 Add an account 新增帳號。
  4. git-2

  5. 選擇帳號的平台。
  6. git-3

    git-4

顯示程式版本狀態的 Source Control Change Bar

當專案設定版本管裡後,Xcode 的左邊將長出顯示版本狀態的 source control change bar。

如下圖所示,當我們輸入 print(“viewDidLoad”) 後,16 行的旁邊將顯示藍色的 change bar,表示此行程式尚未 commit (Uncommitted)。

source-control-change-bar-1

點選 change bar 還可進行額外操作,比方下圖的 Discard Change。

source-control-change-bar-2

不同顏色的 change bar 代表不同的狀態。比方當我們將剛剛的修改 commit 後,change bar 將變成灰色,表示我們尚未 push (Unpushed)。

source-control-change-bar-3

此時點選 change bar 將顯示相關的 commit 資訊。

source-control-change-bar-4

接著讓我們看看一個更厲害的功能,我們還能在 pull 前看到別人已經上傳的修改。此時 change bar 將變成空心狀,稱為 Upstream 的 change bar。不過此功能預設關閉,所以我們必須另外在 Preferences 的 Source Control 分頁,勾選 Include upstream changes 才能看到。

source-control-change-bar-5

如下圖所示,在另外一台 Mac 開發的朋友,尚未 pull 我們剛剛 push 的程式,因此如下圖所示,他將看到 viewDidLoad 的旁邊出現空心的 change bar,表示已經有人 push 新的版本,對 viewDidLoad 做了一些修改。

source-control-change-bar-6

點選 change bar 即可顯示相關的 commit 資訊。

source-control-change-bar-7

點選 Show commit 還可比較目前本機端和 commit 版本的差異。

source-control-change-bar-8

不過 Xcode 是定時抓取遠端的程式,所以我們不一定能立即看到別人 push 的修改。如果想要求 Xcode 立即更新,可點選 Source Control > Fetch and Refresh Status。

source-control-change-bar-9

勾選 Include upstream changes 還能提醒我們程式衝突。倘若不幸本機端的修改和別人 push 的程式產生衝突,此時我們將看到紅色的 change bar (Conflict)。

終於可以 push tag 了

在舊版的 Xcode,我們已經可以設定 tag,然而當我們 push 時,tag 卻不會一併上傳。

push-tag-1

push-tag-2

此問題在 Xcode 10 終於解決了,當我們 push 時,可勾選 Include tags 上傳 tag。

push-tag-3

建立和上傳 SSH Key

Xcode 現在也可以幫我們建立和上傳 SSH Key,步驟如下。

  1. 在 Preferences 的 Accounts 分頁,點選某個 git 帳號後,點選 SSH Key 右下方的 create 建立 SSH Key。
  2. SSH-Key-1

  3. 輸入 SSH key 的密碼 (passphrase)。
  4. SSH-Key-2

  5. 點選 Upload 上傳 SSH key。
  6. SSH-Key-3

SSH key 順利地建立,存在本機端的 Mac 和遠端的 GitHub 上。

SSH-Key-4

SSH-Key-5

一步步執行的 Playground (step by step)

Xcode 10 的 Playground 多了一步步執行的新功能。什麼意思呢 ? 從前的 Playground 只會傻傻地從第一行執行到最後一行,現在我們可指定 Playground 執行到某一行就好。

如下圖所示,現在 Playground 的左邊多了一條藍色 bar 和三角形。當我們點擊第 4 行的三角形時,程式將從第 1 行執行到第 4 行,因此只會印出第 3 和第 4 行的文字,第 5 和第 6 行尚未執行。

step-by-step-1

step-by-step-2

此時藍色 bar 變成從第 5 行開始,藍色 bar 的範圍是還未執行的行數,因此我們可點擊其中的三角形,讓它繼續往下執行。

至於已經執行過的地方,就像犀利人妻說的,回不去了,將如下圖所示,變成無法點擊的灰色三角形。

step-by-step-3

遇到像是 for、if、function 等程式區塊時,{ } 裡的程式也會是灰色三角形,代表我們無法指定程式執行到 { } 裡的某一行。

step-by-step-4

我們只能指定它跑完整個 { } 裡的程式,因此 } 的旁邊可看到可點擊的藍色三角形。如下圖的 for 例子,我們可點擊第 7 行的三角形,讓它印出十句「那為我對抗世界的決定那陪我淋的雨」。

step-by-step-5

如果真的想要重頭開始執行,其實是可以的,只要你願意放棄目前執行的結果,點擊下方停止執行 (Stop Playground) 的正方形按鈕。

step-by-step-6

此時下方的按鈕將變回三角形,藍色 bar 再度從第一行延伸到最後一行,代表目前尚未開始執行,等著我們點擊三角形執行到某一行。

step-by-step-7

不過大部分的時候,其實不用這麼麻煩,比方我們已經執行到第 5 行,然後我們修改了第 4 行的程式,改成「原來我們和 Swift 曾經靠得那麼近」。 Xcode 很聰明,它知道我們修改後會想重頭執行,所以此時藍色 bar 將自動從第一行延伸到最後一行。

step-by-step-8

當我們新增了一行程式,想讓它執行到剛新增的程式時,除了點擊藍色三角形,還有個更快的方法,輸入完後不要按 enter,要按 shift + enter 鍵。

step-by-step-9

如以下例子,輸入完第 5 行的「原來我們和 Kotlin 曾經靠得那麼遠」後,按下 shift + enter 鍵,即可讓它從頭執行到第 5 行。

step-by-step-10

了解如何讓 Playground 一步步執行後,最後我們來聊聊它有什麼好。它主要有以下幾個優點:

  1. 執行的速度更快

    因為我們可以執行到某一行就好,不一定要執行全部的程式。不過請記得,我們只能要求它從第 1 行執行到某一行,無法讓它只執行某段程式,比方跳過前 9 行,只執行第 10 行到第 20 行。

  2. 幫助學習研究 API 和理解別人的程式

    Apple 每年推出新的 SDK,讓我們有永遠學不完的 API 和新功能。有了一步步執行的功能,我們可歡察程式一步步執行的結果,更容易地學習研究 API 和理解別人的程式。

  3. 更方便地調整程式和觀察結果

    我們可以方便地調整程式的流程或改變資料和參數,觀察它造成的影響,比方運用在 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

雖然只是 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 開發的相關技術,大家若有任何問題,可在這裡留言。也歡迎大家隨時聯絡 彼得潘,當彼得潘回答大家的問題時,其實也在找答案的過程中精進學習,增長了自己的功力,和大家交了朋友,獲得再多錢也買不到的回報和收獲。

作者
彼得潘
彼得潘,正職作家,副業講師,深愛 Apple 相關的所有人事物。精通 Swift iOS 程式設計,平日的興趣為桌球,情歌和寫作。除了一天一顆蘋果強身,也努力保持一天研究一項 iOS SDK 技術的習慣。著作: Swift程式設計入門,App 程式設計入門-iPhone,iPad 課程。Line ID: deeplovepeterpan
評論
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。