SF Symbol 四種客製顏色的 rendering mode(配色模式）
從 iOS 15 的 SF Symbol 3(搭配 Xcode 13)開始，SF Symbol 顯示的顏色有更多客製的選項。除了原本的 Monochrome(單色) & Multicolor，新增了 Hierarchical(分層) & Palette(調色)。接下來讓我們玩玩比較它們的差異吧。
ps: 還不熟 SF Symbol 的朋友可先從以下連結認識她。
下載 & 啟動 SF Symbols App
SF Symbols App 是 Apple 提供方便我們查詢 SF Symbol 的軟體，待會我們將利用它比較四種客製顏色的方法。
下載 SF Symbols App。
啟動 SF Symbols App。
查詢 Symbol 支援的 rendering mode & 版本
每個 symbol 支援不同的 rendering mode & 版本，點選 symbol 後，我們可從右邊的 Info Sidebar 查詢。
比方下圖的 square.and.arrow.up 有 Monochrome，Hierarchical & Palette 三種顯示模式，而 Monochrome 版本是 1.0，因此 iOS 13 可使用，而 Hierarchical & Palette 是 3.0，所以要 iOS 15 才支援。
接著讓我們再多看幾個例子。
square.and.arrow.up.fill 只有 Monochrome，版本是 1.0，因此 iOS 13 可使用。
square.and.arrow.up.trianglebadge.exclamationmark 超棒的，Monochrome，Multicolor，Hierarchical & Palette 四種都支援。值得注意的，它的版本都是 3.0，表示它是 SF Symbol 3 才推出的新 icon，只有 iOS 15 以上可享用。
從 Color Sidebar 配色
我們可以從 Color Sidebar 客製 symbol，搭配自己喜歡的顏色。以下我們將以 square.and.arrow.up.trianglebadge.exclamationmark 為例說明。
點選 symbol 後，從右邊切換到 Color Sidebar 頁面。
從 Rendering 欄位選擇配色模式。
除了從上圖的選單選擇，我們也可以從下圖的 4 個 icon 選擇配色模式。
Monochrome(單色）
只有一種顏色，從 Color 欄位選擇顏色。旁邊的數字控制透明度，範圍 0 ~ 100，100 是不透明，0 是透明。
Hierarchical(分層)
從 Color 欄位選擇顏色，顯示時圖案將被拆解成多層，每層使用此顏色時會搭配不同的透明度，呈現豐富的層次感，
Palette(調色)
顯示時圖案將被拆解成多層，我們可指定每層使用的顏色。如下圖所示，通常設定前兩種顏色。(ps: 也可以設定第三種顏色)顏色由上而下的順序跟重要性有關，因此第一個顏色代表主要顏色，會用在 icon 的重點區塊。
Multicolor(多色)
只有少數的 icon 支援 Multicolor，通常它會有某部份的顏色是固定的，採用使用者習慣的顏色，我們可客製其餘區塊的顏色。
如下圖所示，三角形的顏色固定是黃色，因為使用者熟悉警告的圖案以黃色顯示，我們可客製線條的顏色。
使用 SF Symbol
以下分別說明 SwiftUI，Interface Builder，UIKit 程式三種範例。
SwiftUI
struct ContentView: View {
var body: some View {
VStack {
//monochrome
Image(systemName: "square.and.arrow.up.trianglebadge.exclamationmark")
.symbolRenderingMode(.monochrome)
.resizable()
.scaledToFit()
.frame(width: 100, height: 100)
.foregroundStyle(.teal)
//multicolor
Image(systemName: "square.and.arrow.up.trianglebadge.exclamationmark")
.symbolRenderingMode(.multicolor)
.resizable()
.scaledToFit()
.frame(width: 100, height: 100)
.foregroundStyle(.teal)
//hierarchical
Image(systemName: "square.and.arrow.up.trianglebadge.exclamationmark")
.symbolRenderingMode(.hierarchical)
.resizable()
.scaledToFit()
.frame(width: 100, height: 100)
.foregroundStyle(.teal)
//palette
Image(systemName: "square.and.arrow.up.trianglebadge.exclamationmark")
.symbolRenderingMode(.palette)
.resizable()
.scaledToFit()
.frame(width: 100, height: 100)
.foregroundStyle(.teal, .blue)
}
}
}呼叫 symbolRenderingMode 設定配色模式，呼叫 foregroundStyle 設定顏色。
值得注意的，symbolRenderingMode & foregroundStyle 要 iOS 15 才支援，舊版只能用 renderingMode ＆foregroundColor 設定 Monochrome & Multicolor，不支援 Hierarchical & Palette。
舊版寫法:
struct ContentView: View {
var body: some View {
VStack {
// Monochrome
Image(systemName: "square.and.arrow.up.trianglebadge.exclamationmark")
.resizable()
.renderingMode(.template)
.scaledToFit()
.frame(width: 100, height: 100)
.foregroundColor(.teal)
// Multicolor
Image(systemName: "square.and.arrow.up.trianglebadge.exclamationmark")
.resizable()
.renderingMode(.original)
.scaledToFit()
.frame(width: 100, height: 100)
.foregroundColor(.teal)
}
}
}
Interface Builder
從 Render Mode 選擇配色模式。
- Monochrome & Multicolor
從 Tint 設定顏色。
- Hierarchical
從 Primary 設定顏色。
- Palette
有三種顏色可設定，有 Primary，Secondary，Tertiary 三個設定顏色的欄位。
UIKit 程式
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
let monoImage = UIImage(systemName: "square.and.arrow.up.trianglebadge.exclamationmark")
let monoImageView = UIImageView(image: monoImage)
monoImageView.tintColor = .systemTeal
monoImageView.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
view.addSubview(monoImageView)
let multicolorConfiguration = UIImage.SymbolConfiguration.preferringMulticolor()
let multicolorImage = UIImage(systemName: "square.and.arrow.up.trianglebadge.exclamationmark", withConfiguration: multicolorConfiguration)
let multicolorImageView = UIImageView(image: multicolorImage)
multicolorImageView.tintColor = .systemTeal
multicolorImageView.frame = CGRect(x: 100, y: 210, width: 100, height: 100)
view.addSubview(multicolorImageView)
let hierarchicalConfiguration = UIImage.SymbolConfiguration(hierarchicalColor: .systemTeal)
let hierarchicalImage = UIImage(systemName: "square.and.arrow.up.trianglebadge.exclamationmark", withConfiguration: hierarchicalConfiguration)
let hierarchicalImageView = UIImageView(image: hierarchicalImage)
hierarchicalImageView.frame = CGRect(x: 100, y: 320, width: 100, height: 100)
view.addSubview(hierarchicalImageView)
let paletteConfiguration = UIImage.SymbolConfiguration(paletteColors: [.systemTeal, .systemBlue])
let paletteImage = UIImage(systemName: "square.and.arrow.up.trianglebadge.exclamationmark", withConfiguration: paletteConfiguration)
let paletteImageView = UIImageView(image: paletteImage)
paletteImageView.frame = CGRect(x: 100, y: 430, width: 100, height: 100)
view.addSubview(paletteImageView)
}
}- Monochrome
從 image view 的 tintColor 設定顏色。
- Multicolor
利用 UIImage.SymbolConfiguration 設定 Multicolor，從 image view 的 tintColor 設定顏色。
- Hierarchical & Palette
利用 UIImage.SymbolConfiguration 設定配色模式和搭配的顏色。
