一個APP給人的第一印象,決定這位使用者想要使用它的程度!所以有必要好好設計App Icon和Launch Image~那我這篇要講的是如何設定App Icon和Launch Image。Xcode每次改版,就讓開發者要重學一次設定方法,不過好在過程都還滿簡單,只要鼓起勇氣去「踹」,失敗了大不了git checkout呀~
我在App icon size和Launch image size已提到,製作App Icon和Launch Image的尺寸為何,甚至有現成的線上工具可以使用,只要將影像上傳,馬上就可以拿到精美的App Icon!
接下來其實很簡單,我幾個圖示就能很清楚表達⋯⋯當然要先開啟Xcode,然後點擊專案檔~
可以見到App Icons有分三種設置:App、Spotlight、Settings,當然我們iPhone螢幕有不同的大小,而作業系統也有不同的版本,此外還要考慮視網膜螢幕,林林種種加起來其實還算滿多的!過去我一直以為,我只要準備最大的就好了,猜想程式軟體會自動幫我縮圖呀~但實際上它只負責「顯示」,不處裡「縮放」,大概是因為要效能好,寧願花點空間放圖檔。
而Launch Images同樣需要考慮iPhone螢幕有不同的大小,而作業系統也有不同的版本,此外還要考慮視網膜螢幕⋯⋯
把圖檔拖曳到小資料夾匯入完之後,我們點擊Use Asset Catalog後進入更視覺化的設定頁面~
App Icons的詳細資料完全顯現在眼前!
同樣Launch Images也是~
接著查看專案底下的資料夾Images.xcassets,存放著圖檔群和.json檔。
App Icons的Content.json檔內容如下:
{ "images" : [ { "size" : "57x57", "idiom" : "iphone", "filename" : "icon57.png", "scale" : "1x" }, { "size" : "57x57", "idiom" : "iphone", "filename" : "icon114.png", "scale" : "2x" }, { "size" : "60x60", "idiom" : "iphone", "filename" : "icon120.png", "scale" : "2x" }, { "size" : "29x29", "idiom" : "iphone", "filename" : "icon29.png", "scale" : "1x" }, { "size" : "29x29", "idiom" : "iphone", "filename" : "icon58.png", "scale" : "2x" }, { "size" : "40x40", "idiom" : "iphone", "filename" : "icon80.png", "scale" : "2x" } ], "info" : { "version" : 1, "author" : "xcode" } }
Launch Images的Content.json檔內容如下:
{ "images" : [ { "orientation" : "portrait", "idiom" : "iphone", "filename" : "Default~iphone.png", "minimum-system-version" : "7.0", "scale" : "2x" }, { "orientation" : "portrait", "idiom" : "iphone", "filename" : "Default-568h@2x.png", "minimum-system-version" : "7.0", "subtype" : "retina4", "scale" : "2x" }, { "orientation" : "portrait", "idiom" : "iphone", "filename" : "Default.png", "scale" : "1x" }, { "orientation" : "portrait", "idiom" : "iphone", "filename" : "Default~iphone.png", "scale" : "2x" }, { "orientation" : "portrait", "idiom" : "iphone", "filename" : "Default-568h@2x.png", "subtype" : "retina4", "scale" : "2x" } ], "info" : { "version" : 1, "author" : "xcode" } }
總算知道它怎麼記錄這些圖檔相關聯性的資料啦:)~
參考:Icon Slayer – Generates all the icon sizes you need for iOS and Android apps.。
Comments on: "[iOS] 設定App Icon和Launch Image" (2)
您好,想請教一下,如果在app執行中想更換icon,像iPhone的行事曆一樣不用更新就會更換日期,這是可行的嗎?
讚讚
目前只有內建的App才能做到,除非Apple開放SDK給開發者,那就有機會能實現這功能喔!
觀察Google日曆App,它並沒有隨著日期更換icon,因此猜測它雖然想做,但SDK卻還沒支援。
讚讚