WayneApp Launch Screen（啟動頁）是打開 App 時使用者會看到的第一個畫面。它個是很簡單的畫面，通常是單一顏色的畫面，中間再放入 Logo。它也是很容易就可以實現的功能。另外，Launch Screen 也常常被稱為 Splash Screen。本章就讓我們來為 Coffee Shop App 加入 Launch Screen 吧！
SwiftUI Coffee Shop
WayneLaunch Screen
為何需要 Launch Screen 呢？它的畫面簡單又沒有功能。那為何每個 App 都會有它呢？
Launch Screen 的功能是讓 App 有時間做初始化。換句話說，當 App 啟動時，Launch Screen 會先顯示，一直到 App 初始化完成後，才會進入到 App 內容的第一個畫面。
如果不設定 Launch Screen 會怎麼樣呢？當 App 啟動時，你就會看到一個白屏。所以合格的 App 必須要有 Lauch Screen。
在 Assets.xcassets 新增 Image Set
這邊已經準備好一份用來做 Launch Screen 的圖片，請先下載來。這張圖片是從 freepix 上下載的，它提供很多免費的圖片。
我們要將圖片加入到 CoffeeShop 專案中，這樣等等才可以使用。選擇 Xcode 左邊列表的 Assets.xcassets，然後新增一個 Image Set，並將它命名為 Splash。
你可以看到 Splash Image Set 有三個框框。1x 是指原始大小的圖片；2x 是 1x 兩倍大的圖；3x 是 1x 三倍大的圖。也就是說，每個 Image Set 都會要求三種尺寸的圖，這也是為了可以在不同的 iPhone 裝置上，有最佳的顯示效果。
打開剛剛下載的圖，然後根據尺寸，將圖片設定給 Splash Image Set。
三個尺寸都設定好後，會像是這樣。
在 Storyboard 上新增 UIImageView
目前設定 Launch Screen 還是用 UIKit 的 Storyboard 方式。藉這個機會，你可以學一下如何在 Storyboard 上新增一個 UIImageView。
選擇 LaunchScreen.storyboard，新增一個 UIImageView 到 Storyboard 上。
然後點選畫面中的 UIImageView。再到 Xcode 右邊的 Attributes Inspector 中，設定 UIImageView 的 Image 為剛剛加入的 Splash。並將 Content Mode 設為 Scale To Fill。
設定 ImageView 的 Constraints
現在我們要讓 UIImageView 可以填滿畫面。透過新增 iOS Auto Layout Guide 的 Constraints 來要告訴 App 如何顯示 UIImageView。
點選剛剛的 UIImageView，然後在右下方點選 Add New Constraints。將四周的邊界 (margins) 都設為 0，然後點擊 Add 4 Constrains。
現在我們的 Launch Screen Image 變成正常大小了。不過畫面的上下方都有留白，這是因為 iPhone 11 有上方瀏海和下方橫條的設計。而這兩個留白區域就稱為 Safe Area。讓我們試著將 Launch Screen Image 撐滿整個畫面吧。
點選 UIImageView 的 Size Inspector，可以看到我們剛剛新增的 4 個 Constraints。我們先來讓 Image 可以撐過下方的 Safe Area。點選 Align Bottom to: Safe Area。
將 First Item 設定成 Superview，且 Constant 設為 0。
然後對 Align Top to: Safe Area 做相同的設定。調整好後，Launch Screen Image 就會是滿版的。
跑一下專案，新增 Launch Screen 的效果。
Image 大小與解析度 (Resolution)
每張圖片都要提供三種大小，這是為了讓圖片可以在不同的 iPhone 裝置上有最佳的顯示效果。Apple 的 Image Size and Resolution 文件有詳細的列表。
但當我們在設計的時候，我們看到的尺寸大小都是 1x 的。iOS 會根據不同的 iPhone 裝置，自動幫我們選擇相對應的圖片尺寸。
手動替每張圖片都產出三種尺寸真的很麻煩。網路上有很多網站可以幫你產生三張一組的圖片，你只要提供 3x 大小的圖片即可。本章就是利用 Icon Cutter 產生一組 Launch Screen Image。
結語
本章我們不但講解如何加入 Launch Screen，也講解了如何使用 UIKit 的 UIImageView。也許之後可以用 SwiftUI 直接設定 Launch Screen。不過了解一下UIKit 也是不錯的！
SwiftUI Coffee Shop
