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 的解析度了。

參考資料

本文網址:http://blog.tonycube.com/2012/10/ioslaunch-images.html
Tony Blog 撰寫,轉載時請註明出處及文章連結,謝謝 😀

我要留言

留言小提醒:
1.回覆時間通常在晚上,如果太忙可能要等幾天。
2.請先瀏覽一下其他人的留言,也許有人問過同樣的問題。
3.程式碼請先將它編碼後再貼上。(線上編碼:http://bit.ly/1DL6yog)
4.文字請加上標點符號及斷行,難以閱讀者恕難回覆。
5.感謝您的留言,您的問題也可能幫助到其他有相同問題的人。