EP 19: Custom App Icon for Android and iOS

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