iOS 啟動圖片 (Launch Images)

Launch Images

什麼是啟動圖片? 在 Apple 的 iOS Human Interface Guidelines 中有說明，為了提升使用者在開啟 App 時的使用者體驗，必須提供至少一張的圖片當做開啟 App 時的預設顯示圖片。當使用者開啟 App 時，會先顯示這張圖片，接著在 App 的 UI 被描繪完成後便會覆蓋這張啟動圖片。

在 iPhone 裝置還是很單純的單一解析度的時候，只要設計一張圖片即可。但是漸漸的 iPhone 開始細胞分裂了，首先是解析度提高一倍成為 Retina 螢幕，接著在 iPhone 5 進化成 4 吋螢幕，所以原本只要 1 張的預設啟動圖片，現在要有 3 張。

手冊中還有提到，若是 iPhone App ，只要有 1 張直式方向 ( portrait orientation ) 的圖片即可；但 iPad App 就必須提供 2 張圖片，1 張是直式方向，1 張是橫式方向 ( landscape orientation ) 的圖片。

圖片尺寸

首先要知道的是，有 3 種尺寸的 iPhone：

3.5-inch iPhone
3.5-inch iPhone with Retina display
4-inch iPhone with Retina display (iPhone 5)

它們分別對應 3 個解析度尺寸：

320 x 480
640 x 960
640 x 1136

圖片命名

預設的啟動圖片名稱：Default.png
要更改預設的啟動圖片名稱可以在 PROJECT_NAME-info.plist 檔案中修改。

圖片放置的位置：在專案的根目錄，即 PROJECT_NAME.xcodeproj 同一位置。
圖片規格：必須是使用「非交錯式」的 PNG 圖檔。
命名規則：

<basename><usage_specific_modifiers><scale_modifier><device_modifier>.png

basename 就是圖片的名稱，預設為 Default 。
usage 的部份可以指定直式或橫式。
scale 用來表示支援 Retina 用的 2 倍大圖片。
device 則是用來指定它是 iPhone 5，要用「-568h」。
568h 應該是指高度以 568 x 2 = 1136 。那個橫線是用來接修飾字的。

如果是設計 iPad 的圖片，就會用 -Landscape 之類的修飾字去指定方向。更詳細的資料請看參考資料的部份。

對應前面提到的 3 種圖片尺寸，我們要有以下 3 種名稱的圖片：

Default.png
Default@2x.png
Default-568h@2x.png

當你把這些圖片加入專案中，在 TARGETS 的 Summary 頁籤中可以看到 Launch Images 的項目中會自動去抓到對應的圖片(Xcode 4.5.1)。

後記

在我的專案中，還沒加入符合 iPhone 5 解析度的圖片時，模擬器以 Retina 4-inch (iPhone 5)來顯示 App ，看到的結果是，App 會以上下留黑邊的方式呈現原本的 App；當我把 Default-568h@2x.png 加入後，App 就神奇的長高符合 iPhone 5 的顯示尺寸了，而因為之前寫 Android 時就習慣用相對定位的方式來設計 UI ，所以整個 App 的界面幾乎(其實還是有幾個頁面啦～)都不用修改或調整，就完全符合 iPhone 5 的解析度了。