天天看點

iOS 程式圖示AppIcon和啟動頁面LaunchImage設定 —— HERO部落格

今天簡述一下iOS 程式圖示AppIcon和啟動頁面LaunchImage的設定。

在設定之前,先了解一下iOS螢幕尺寸:

iOS 程式圖示AppIcon和啟動頁面LaunchImage設定 —— HERO部落格
iOS 程式圖示AppIcon和啟動頁面LaunchImage設定 —— HERO部落格

為了适配不同尺寸的iPhone産品,我們的啟動圖示和啟動頁面也要有對應的尺寸。圖4-1中,我們看到1x、2x、3x,這可以了解為一個标記,在開發時可以為不同分辨率的裝置統一為一個尺寸。iPhone 4有一個新特性:在螢幕尺寸不變的情況下,分辨率提升一倍,由320*480(1x) -->  640*960(2x),也就是Retina屏。開發時圖檔用同一個名字,隻要在後面加上@2x、@3x,系統就會自動加載它需要的尺寸到裝置上。

設定APPIcon:

iOS 程式圖示AppIcon和啟動頁面LaunchImage設定 —— HERO部落格

如圖4-2,打開程式.xcassets檔案,看到AppIcon項,我們可以在右邊App Icon選項中選擇Apple産品和系統版本。

iOS 程式圖示AppIcon和啟動頁面LaunchImage設定 —— HERO部落格

例如圖4-3,選擇IPhone iOS 7.0 and Later,在AppIcon中會出現需要添加的Icon圖檔,并在下面附上詳細資訊,如第一項,iPhone Spotlight - iOS 5,6 / Settings - iOS 5-9 29pt, 在2x中需要 58*58的圖檔(29 × 2),3x中需要87*87的圖檔(29 × 3),把對應的Icon圖檔放到相應位置即可。

官方Icon and Image Sizes:Icon and Image Sizes

設定LaunchImage:

iOS 程式圖示AppIcon和啟動頁面LaunchImage設定 —— HERO部落格

如圖4-4,在.xcassets檔案中沒有LaunchImage選項,右擊App Icons & Launch Images --> New iOS Launch Image,建立好LaunchImage後同樣可以在右邊Launch Image選項中選擇Apple産品和系統版本。啟動圖檔的尺寸(豎屏):

2x                          640*960 px

Retina 4                 640*1136 px

Retina HD 4.7        750*1334 px

Retina HD 5.5       1242*2208 px

iPhone X / Xs        1125*2436 px

iPhone Xs Max      1242*2688 px

iPhone Xr                828*1792 px

iOS 程式圖示AppIcon和啟動頁面LaunchImage設定 —— HERO部落格

初次設定時需要修改工程相關設定,如圖4-5,點選工程 - TARGETS - General,找到App Icons and Launch Images,将Launch Screen File清空。

iOS 程式圖示AppIcon和啟動頁面LaunchImage設定 —— HERO部落格

完成上一步操作後,還需要找到LaunchScreen.storyboard檔案,将右側Use as Launch Screen選項去掉。如圖4-6。

簡述适配:

iOS 程式圖示AppIcon和啟動頁面LaunchImage設定 —— HERO部落格

因為上面提到了@2x、@3x的圖檔,最後簡單說一下相關适配,原理相同,同一個圖檔名字,上傳多套圖檔即可,系統會自動加載需要的尺寸。對于啟動動畫這種比較特殊的,如圖4-7,可以根據版本号、尺寸進行判斷,選擇需要的圖檔。

繼續閱讀