聊聊如何自定義 SwiftUI 中符號圖像的外觀
前言
符號圖像是來自 Apple的SF Symbols 庫的矢量圖標，設計用于在 Apple 平臺上使用。這些可縮放的圖像適應不同的大小和重量，確保在我們的應用程序中具有一致的高質量圖標。在 SwiftUI 中使用符號圖像非常簡單，只需使用 Image 視圖和所需符號的系統名稱。下面是一個快速示例：
import SwiftUI
struct ContentView: View {
var body: some View {
Image(systemName: "star")
}
}
圖片
大小
盡管符號被放置在Image視圖中，但它應被視為文本。要調整符號的大小，我們可以應用 font() 修飾符，就像在Text視圖中一樣。這使我們能夠將符號的大小與不同的文本樣式對齊，確保UI的視覺一致性。
HStack {
Image(systemName: "star")
.font(.title)
Image(systemName: "star")
.font(.body)
Image(systemName: "star")
.font(.caption)
}
圖片
我們可以使用 fontWeight() 修飾符來調整符號的重量。這個修飾符改變符號筆畫的粗細，使我們能夠將符號與周圍的文本匹配或對比。
HStack {
Image(systemName: "star")
.fontWeight(.light)
Image(systemName: "star")
.fontWeight(.bold)
Image(systemName: "star")
.fontWeight(.black)
}
圖片
要根據字體大小相對縮放圖像，我們應該使用 imageScale() 修飾符。有三個選項：小、中、大，它們根據字體大小按比例縮放符號。如果沒有明確設置字體，符號將從當前環境中繼承字體。
HStack {
Image(systemName: "star")
.imageScale(.small)
Image(systemName: "star")
.imageScale(.medium)
Image(systemName: "star")
.imageScale(.large)
}
.font(.headline)
圖片
不建議通過應用resizable()修飾符并設置框架來調整符號圖像的大小，因為這樣做會使圖像停止作為符號圖像，從而影響其與文本的布局和對齊。
顏色
使用SwiftUI中的foregroundStyle()視圖修飾符，可以輕松自定義符號圖像的顏色。這個修飾符允許我們直接設置符號圖像的顏色。
Image(systemName: "star")
.foregroundStyle(.orange)
圖片
foregroundStyle() 修飾符可以采用任何 ShapeStyle，包括漸變，這為我們的符號圖像提供了廣泛的自定義可能性。在這個例子中，星形符號使用了從黃色到紅色的線性漸變，從頂部到底部過渡。
Image(systemName: "star")
.foregroundStyle(
LinearGradient(
colors: [.yellow, .red],
startPoint: .top,
endPoint: .bottom
)
)
圖片
渲染模式
我們可以通過使用不同的渲染模式進一步自定義符號圖像的外觀。SF Symbols有四種不同的渲染模式，這些模式會改變符號的顏色和外觀。一些渲染模式使整個圖標保持相同顏色，而其他模式則允許多種顏色。
要在SwiftUI中設置符號圖像的首選渲染模式，我們使用 symbolRenderingMode() 修飾符。
單色
單色是默認的渲染模式。在這種模式下，符號的每一層都是相同的顏色。
Image(systemName: "thermometer.snowflake")
.symbolRenderingMode(.monochrome)
分層
分層模式將符號渲染為多個層，每層應用不同的不透明度。層次結構和不透明度在每個符號中是預定義的，但我們仍然可以使用 foregroundStyle() 修飾符自定義顏色。
HStack {
Image(systemName: "thermometer.snowflake")
Image(systemName: "thermometer.snowflake")
.foregroundStyle(.indigo)
}
.symbolRenderingMode(.hierarchical)symbolRenderingMode() 修飾符既可以直接應用于圖像視圖，也可以通過將其應用于包含多個符號圖像的父視圖來在環境中設置。這樣，父元素內的所有符號圖像都會受到影響。
圖片
調色板
調色板模式允許符號以多層呈現，每層具有不同的顏色。這種模式非常適合創建色彩豐富的多層圖標。
Image(systemName: "thermometer.snowflake")
.symbolRenderingMode(.palette)
.foregroundStyle(.blue, .teal, .gray)我們不需要顯式地指定調色板呈現模式。如果我們在 foregroundStyle() 修飾符中應用多個樣式，則調色板模式將自動激活。
Image(systemName: "thermometer.snowflake")
.foregroundStyle(.blue, .teal, .gray)
圖片
如果我們為一個定義了三個層次結構的符號指定兩種顏色，那么第二層和第三層將使用相同的顏色。
Image(systemName: "thermometer.snowflake")
.foregroundStyle(.blue, .gray)
圖片
多色
多色模式使用由 Apple 定義的一組固定顏色渲染符號。在使用多色渲染時，我們無法自定義符號的顏色，它將使用預定義的顏色。
HStack {
Image(systemName: "thermometer.snowflake")
Image(systemName: "thermometer.sun.fill")
}
.symbolRenderingMode(.multicolor)
圖片
值得注意的是，由于這些顏色是固定的，它們不適應明暗模式。例如，我們的溫度計符號具有白色輪廓，在白色背景上是不可見的。
并非所有符號都支持每種呈現模式。圖層較少的符號在不同模式下看起來可能相同，分層和調色板模式看起來類似于單色。
可變值
在 SwiftUI 中顯示符號圖像時，我們可以提供一個 0.0 到 1.0 之間的可選值，渲染的圖像可以使用它來自定義外觀。如果符號不支持可變值，此參數無效。我們應該在 SF Symbols 應用程序中檢查哪些符號支持可變值。
HStack {
Image(systemName: "speaker.wave.3", variableValue: 0)
Image(systemName: "speaker.wave.3", variableValue: 0.3)
Image(systemName: "speaker.wave.3", variableValue: 0.6)
Image(systemName: "speaker.wave.3", variableValue: 0.9)
}
圖片
可變值可以表示一個隨著時間變化的特性，例如容量或強度。這使得符號的外觀可以根據應用程序的狀態動態變化。
struct ContentView: View {
@State private var value = 0.5
var body: some View {
VStack {
Image(
systemName: "speaker.wave.3",
variableValue: value
)
Slider(value: $value, in: 0...1)
.padding()
}
.padding()
}
}在這個例子中，符號 speaker.wave.3 根據 Slider 提供的值改變其外觀。
圖片
我們應該使用可變值來傳達狀態的變化，例如音量、電池電量或信號強度，為用戶提供動態狀態的清晰視覺表示。為了傳達深度和視覺層次，我們應該使用分層渲染模式，它可以提升某些圖層，并區分符號內的前景和背景元素。
設計變體
符號可以有不同的設計變體，例如填充和斜杠，以幫助傳達特定的狀態和操作。斜杠變體可以表示項目或操作不可用，而填充變體可以表示選擇。
在 SwiftUI 中，我們可以使用 symbolVariant() 修飾符來應用這些變體。
HStack {
Image(systemName: "heart")
Image(systemName: "heart")
.symbolVariant(.slash)
Image(systemName: "heart")
.symbolVariant(.fill)
}不同的符號變體用于各種設計目的。輪廓變體在工具欄、導航欄和列表中非常有效，而填充變體則用于強調選擇的狀態。
HStack {
Image(systemName: "heart")
.symbolVariant(.circle)
Image(systemName: "heart")
.symbolVariant(.square)
Image(systemName: "heart")
.symbolVariant(.rectangle)
}不同的符號變體具有不同的設計用途。輪廓變體在工具欄、導航欄和列表中非常有效，因為這些地方通常會與文本一起顯示符號。將符號封裝在圓形或方形等形狀中可以增強其可讀性，特別是在較小尺寸下。填充變體由于其實心區域，使符號更具視覺強調性，非常適合用于 iOS 標簽欄、滑動操作以及指示選擇的強調顏色場景。
在許多情況下，顯示符號的視圖會自動選擇合適的變體。例如，iOS 標簽欄通常使用填充變體，而導航欄則偏好輪廓變體。這種自動選擇確保符號在不同上下文中有效使用，而無需明確指定。
示例代碼
import SwiftUI
struct ContentView: View {
@State private var value = 0.5
var body: some View {
VStack {
Image(
systemName: "speaker.wave.3",
variableValue: value
)
.symbolRenderingMode(.hierarchical)
.foregroundStyle(.blue)
Slider(value: $value, in: 0...1)
.padding()
}
.padding()
}
}運行 Demo
- 打開Xcode并創建一個新的 SwiftUI 項目。
- 將上述代碼粘貼到 ContentView.swift 文件中。
- 運行項目，查看效果。
結論
在SwiftUI中增強符號圖像可以顯著改善應用程序的外觀和感覺。通過調整大小、顏色、渲染模式、可變值和設計變體，我們可以創建使應用程序更直觀和視覺吸引力的圖標。SwiftUI使這些調整變得簡單易行，使我們能夠輕松實現和改進這些自定義以提供更好的用戶體驗。
