SwiftUI 框架

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

利用 Xcode 12 在 Swift 專案中添加啟動畫面 Launch Screen
利用 Xcode 12 在 Swift 專案中添加啟動畫面 Launch Screen
In: SwiftUI 框架

啟動畫面 (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

作者
Simon Ng
軟體工程師,AppCoda 創辦人。著有《iOS 17 App 程式設計實戰心法》、《iOS 17 App程式設計進階攻略》以及《精通SwiftUI》。曾任職於HSBC, FedEx等跨國企業,專責軟體開發、系統設計。2012年創立AppCoda技術部落格,定期發表iOS程式教學文章。現時專注發展AppCoda業務,致力於iOS程式教學、產品設計及開發。你可以到推特與我聯絡。
評論
更多來自 AppCoda 中文版
如何使用 Swift 整合 Google Gemini AI
SwiftUI 框架

如何使用 Swift 整合 Google Gemini AI

在即將到來的 WWDC,Apple 預計將會發佈一個本地端的大型語言模型 (LLM)。 接下來的 iOS SDK 版本將讓開發者更輕易地整合 AI 功能至他們的應用程式中。然而,當我們正在等待 Apple 推出自家的生成 AI 模型時,其他公司(如 OpenAI
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。