建立第一個 SwiftUI App:Day 3 – 設定 App Icon

Photo by Tim Gouw on Unsplash
Photo by Tim Gouw on Unsplash
本章我們會介紹如何在 Xcode 設定 App Icon。App Icon 是代表 App 整個形象,也是使用者在 App Store 看到 App 的第一個印象。

本章我們會介紹如何在 Xcode 設定 App Icon。App Icon 是代表 App 整個形象,也是使用者在 App Store 看到 App 的第一個印象。讓我們馬上開始吧!

Coffee Shop 的完整程式碼可以在 下載。

下載 App Icon

我們已經準備好一組 App Icon,請先下載。這個圖示是在 freepix 下載的。這網站提供很多免費的圖片和圖示。你可以在上面試著找你喜歡的圖示。

在 Xcode 設定 App Icon

在 Xcode 左邊檔案列表,選擇 Assets.xcassets -> AppIcon,你會看到很多的尺寸,這是因為 iPhone 有不同的解析度。為了要在所有的 iPhone 上有最佳的顯示,就必須要提供不同解析度的圖示。

左上角第一個框框的下方顯示 20pt,就是指 20 x 20 pixel 的圖示。打開剛剛下載的 App Icon,可以找到 Icon-20.png。所以檔案名稱已經標明它是哪個大小。然後如下圖的方式,將 Icon-20.png 設定給左上角第一個圖示。

Set App Icon
設定 App Icon

根據尺寸的要求,設定給對應的圖示。最後你會像下圖一樣。

Xcode App Icons
Xcode App Icons

在模擬器上跑一下專案。你會看到模擬器桌面上的 CoffeeShop 的 App Icon 已經設定好了!

App Icon on Screen

iOS App Icon 尺寸規則

你可以在 App Icon 找到 iOS App Icon 的尺寸列表。尺寸很多,自己做的話是很麻煩。好在網路上有很多網站可以幫你產生所有的尺寸的。剛剛下載的 App Icon,就是用 Icon Cutter 產生的。

結語

雖然設定 App Icon 很簡單,但是製作和決定好圖示倒是很困難。使用者第一眼看到 App 的就是 App Icon,所以它的重要性是不可忽視的。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

You May Also Like
Photo by Alex Alvarez on Unsplash
Read More

Dispatch Queue 教學

GCD 提供有效率的並行處理,讓我們不需要直接管理多執行緒。它的 Dispatch Queues 可以循序地(serially)或是並行地(concurrently)執行任務。我們只需要將要並行的程式當作任務提交到 dispatch queues 就可以了。
Read More
Photo by Florinel Gorgan on Unsplash
Read More

如何製作一個 XCFramework

XCFramework 讓你可以將 iPhone、iPhone 模擬器等多的不同平台的二進位碼打包到一個可發佈的 .xcframework 檔。你只需要為你的 Framework 產生出一個 .xcframework 檔,就可以支援多種平台。
Read More
Photo by Fabian Gieske on Unsplash
Read More

SwiftUI @State & @Binding 教學

SwiftUI 推出了兩個 Property Wrapper – @State and @Binding。利用它們可以達到變數的 Two-way Binding 功能。也就是當變數的值改變時,它會重新被顯示。本章藉由製作一個 Custom View 來展示如何使用 @State 和 @Binding。
Read More