包含常用 App icon 的 SF Symbol
從 iOS 13 開始,Apple 提供幫助我們開發 iOS App 的 SF Symbol。(SF 是 San Francisco 的縮寫,是舊金山的意思)
SF Symbol 包含五花八門的圖案, iOS App 時常使用的圖案它都幫我們設計好了,比方垃圾桶,鈴鐺,郵件,月曆,頭像等。有了這些 Apple 精心設計的 icon,我們再也沒有做不出精美 App 的藉口,接下來就讓我們一步步認識和使用 SF Symbol 吧。
下載 SF Symbols App
iOS 內建 SF Symbols,因此不一定要安裝 SF Symbols App。不過為了方便查詢有哪些可用的 SF Symbol,建議先從以下網站下載 & 安裝 Mac 版的 SF Symbols 6 App。
執行 SF Symbols App
查詢 SF Symbols 玲琅滿目的圖案。
從上方的三個按鈕可切換 symbol 清單的顯示方式,有 grid,list & gallery 三種。
從 Symbol Library 加入 SF Symbol
設定 SF Symbol 的樣式
以下分別說明 SwiftUI & interface builder 兩種範例。
- SwiftUI 範例
建立 Image 時,搭配參數 systemName,利用 foregroundStyle 控制顏色。
struct ContentView: View {
var body: some View {
Image(systemName: "paperplane")
.resizable()
.scaledToFit()
.frame(width: 100, height: 100)
.foregroundStyle(.purple)
}
}
- interface builder 範例
從 Image 欄位選擇圖片名稱。
利用 Tint 控制顏色。
調整 button SF Symbol 圖片的大小
調整粗細
以下分別說明 SwiftUI & interface builder 兩種範例。
- SwiftUI 範例
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "paperplane")
.font(.system(size: 100, weight: .ultraLight))
Image(systemName: "paperplane")
.font(.system(size: 100, weight: .black))
}
.foregroundStyle(.purple)
}
}
- interface builder 範例
設定 Symbol Configuration 下的 Weight。
超級細的 Ultra Light & 超級粗的 Black。
SF Symbol 3 四種客製顏色的 rendering mode(配色模式)
從 iOS 15 的 SF Symbol 3 開始,SF Symbol 提供了 Monochrome(單色) ,Multicolor,Hierarchical(分層) & Palette(調色) 四種配色的方法,有興趣的朋友可參考以下連結。