利用 Xcode 12 在 Swift 專案中添加啟動畫面 Launch Screen


啟動畫面 (Launch Screen) 是 App 啟動時,你向使用者展示的第一個畫面。如果你是使用 UIKit 創建新專案,Xcode 會自動產生一個名為 LaunchScreen.storyboard 的 Storyboard 檔案,讓開發者設計 App 的啟動畫面。但是,如果你是使用 SwiftUI 框架開發 App,就不會有啟動畫面的檔案。那麼,我們如何在 SwiftUI 專案中設計啟動畫面呢?

Xcode 12 就有一個新的方式,讓我們可以在 SwiftUI 中實作啟動畫面,一起在這篇教學中看看是如何操作吧。

編者備註:如果你想學習 SwiftUI,可以參閱我們的《精通 SwiftUI》一書。

準備啟動畫面的圖像及 Color Set

以下就是我們即將要構建的啟動畫面,畫面非常簡單,就是在視圖的中央顯示了一個圖像。啟動畫面也會按裝置設定的淺色模式 (Light mode) 和黑暗模式 (Dark Mode),而切換不同的背景顏色。

Launch Screen Demo for SwiftUI

要實作以上的啟動畫面,我們首先要準備圖像,並將其匯入 Asset Catalog。

Launch Screen - Prepare Image

由於 App 同時支援淺色和深色模式,因此我們需要為背景顏色創建新的 Color Asset。

Creating a color set in asset catalog of Xcode

把 Color Set 命名為 LaunchScreenBackground,並如此分別設定色碼 (Color code):

  • Any appearance:#EEEEEE
  • Dark appearance:#111111

添加啟動畫面

SwiftUI 專案在預設情況下不會產生啟動畫面,因此我們需要在 Info.plist 檔案中手動添加啟動畫面。打開檔案後,你會看到一個名為 Launch Screen 的條目,點擊左側的箭頭來打開條目,然後點擊 + 按鈕添加一個新條目。

當中有許多選項供選擇。要配置背景顏色,你可以將 Key 設置為 Background color,然後將數值設置為 LaunchScreenBackground。這就是我們在上一部分創建的 Color Set。

Setting the launch screen option in Info.plist

接下來,讓我們把圖像包含在啟動畫面中。點擊 + 按鈕來添加另一個 Key,並命名為 Image Name,而數值則設置為我們匯入的圖像的名稱 ramen

如果我們想確保圖像停留在 Safe Area 內,可以添加 Image respects safe area insets Key,並將其數值設置為 YES。其他選項是用來配置 navigation bar、tab bar、和 toolbar.的外觀,你可以按需要來決定是否啟用。

完成配置後,你可以點擊 Play 按鈕以在模擬器上運行 App。啟動 App 後,它就會顯示啟動畫面,而背景顏色就按會界面樣式自動設置。

如果你的模擬器無法顯示啟動畫面,可以到模擬器選單點擊 Device > Restart 來清除快取 (Cache)。

使用 LaunchScreen.storyboard

你可能會問:那我們還可以使用舊方法在 SwiftUI 專案中創建啟動畫面嗎?答案是可以的,Xcode 12 仍然允許開發者這樣做。但是,Xcode 不會再自動產生 LaunchScreen.storyboard 檔案,我們需要利用 Launch Screen 模板創建新檔案,來手動添加它。

Adding Launch Screen template

然後,你就可以在專案配置中設置啟動畫面。

Launch Screen - Setting the project option

譯者簡介:Kelly Chan-AppCoda 編輯小姐。
原文Adding a Launch Screen in Swift Projects


軟件工程師,AppCoda 創辦人。著有《iOS 13 App 程式設計實力超進化實戰攻略》、《iOS 13 App 程式設計實力超進化實戰攻略》以及《精通 SwiftUI》。曾任職於HSBC, FedEx等公司,專責軟體開發、系統設計。2012年創立AppCoda技術部落格,定期發表iOS程式教學文章。現時專注發展AppCoda,致力於iOS程式教學,產品設計及開發。

blog comments powered by Disqus
Shares
Share This