EP 19: Custom App Icon for Android and iOS

2021 iThome 鐵人賽

DAY 19

Mobile Development

Re: 從零開始用 Xamarin 技術來復刻過去開發的一個 App : TopStore系列第 19 篇

13th鐵人賽 xamarin xamarin.forms maui visual studio

James Tsai

2021-09-27 22:36:25

1721 瀏覽

分享至

Hello, 各位 iT邦幫忙 的粉絲們大家好~~~

本篇是 Re: 從零開始用 Xamarin 技術來複刻過去開發的一個 App: TopStore 系列文的 EP19。

本篇是來介紹一下如何設定 App 的 Icon 圖示的唷!

過往 App 的 Icon 圖示其實比較單純，但後來裝置型號越出越多，設定的方式也越來越複雜，中間又歷經雙平台開發的改版問題...真是，哀~~~

不過，後來逐漸地又有比較正規化的規範，目前在大體上只要按照 Apple 跟 Google 出的開發指引，理論上應該都沒太多問題了(請注意: "目前" 不能保證以後會有異動)。

所以...開始囉~~~

首先，就先列出前言中提到的 Apple 推出的 iOS 跟 Google 推出的 Android 兩個平台，所制定的 App 設計指引當中有關於 App 使用 Icon (圖示)設定的部分:

iOS:
https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/

Android:
https://material.io/design/platform-guidance/android-icons.html

好...看完以後還是很頭大。

所以，或許有人會問是否能只給一張圖就解決這件事情，答案是 "目前是可以" 的。但注意前提是 "目前"，以後繼續發新版 OS 時會不會有什麼異動或改變，在這邊真的無法保證。

先撇開設計原則、美醜、風格等問題，理論上只要跟美術設計師跪求得一張 1024px x 1024px 大小的 App Icon(圖示)，再透過適合的線上服務就可以得到 iOS、Android 平台針對各種裝置所需的像素密度值(DPI)應有的對應像素解析度(PX)圖檔。

請注意: 要在 iOS 上架的 App 的圖檔不可以含有去背效果，包含一個像素的去背都不行，各位想挑戰 Apple 的話也是可以呦^_<

在這邊利用 App Icon Generator 這個線上服務來介紹。
https://appicon.co/

App Icon Generator

首先，先選擇想要使用的平台，在這邊勾選 iPhone、iPad 跟 Android。
App Icon Generator 使用 1

所以當 App 的圖檔有了以後，就直接拖進去。
App Icon Generator 使用 2

接著點選 Generate 後，靜待一段時間。
App Icon Generator 使用 3

該服務就會拋出可供下載的壓縮檔。
App Icon Generator 使用 4

下載完成後，就解壓縮來看看。
App Icon Generator Unzip

會看到其中有 android、Aessts.xcassets 兩個資料夾跟兩張 png 圖檔，前兩個資料夾是給 App 設定用的；後兩張圖檔是給上架 Store 時用的。

進一步的打開 android 資料夾，對照 Visual Studio 方案總管當中的 Android 專案底下的 Resources 資料夾。
android 資料夾內容比對

進一步的打開 Aessts.xcassets 資料夾，對照 Visual Studio 方案總管當中的 iOS 專案底下的資產目錄資料夾。
Aessts.xcassets 資料夾內容比對

所以大致上看的出來，得到了 App 需要的 Icon(圖示) 檔案。

接著若沒什麼特別順手慣用的工具，直接透過 Windows 的檔案總管來做處理吧!

iOS 平台:

瀏覽到 TopStoreApp 開發方案當中的 iOS 的專案資料夾底下，並直接進到 "Assets.xcassets\AppIcon.appiconset"，把前面解壓縮後的 AppIcons 資料夾底下的 "Assets.xcassets\AppIcon.appiconset" 底下的圖檔複製過去。
iOS 底下的 Aessts.xcassets 圖檔替換 1