【Swift 】SF-Symbolsのマルチカラー設定方法！
この記事からわかること
- Swiftで使えるSF-Symbolsをマルチカラーで表示させる方法
- UIKit：preferringMulticolorメソッドの使い方
- Swift UI：symbolRenderingMode(_:)メソッドの使い方
index
[open]
＼ アプリをリリースしました ／
SwiftでSF-Symbolsを使ってマルチカラーに対応しているアイコンを実装する方法をまとめていきます。SF-Symbolsの導入方法や使い方に関しては以下記事を参考にしてください。
マルチカラーに対応しているSF-Symbolsアイコン
SF-Symbolsのアイコンの中にはマルチカラーに対応しているアイコンがあります。基本的にはアイコンに対して1色しか指定できませんがマルチカラー対応のものはレイヤーごとに色を変更することができます。
マルチカラーのデフォルトの配色は「シンボル一覧」を取得後、右側メニューの「ブラシ」を選択後にカラーを「マルチカラー」に変更することで確認できます。
UIKit：preferringMulticolorメソッド
公式リファレンス：preferringMulticolorメソッド
UIKitフレームワーク使用時にマルチカラーを設定するにはUIImage.SymbolConfigurationが持つpreferringMulticolorメソッドを使用します。
UIImage(systemName: "cloud.sun.fill", withConfiguration: UIImage.SymbolConfiguration.preferringMulticolor())これでAppleからデフォルトで設定されている配色になったSF-Symbolsアイコンが表示されます。withConfigurationやSymbolConfigurationクラスについては下記記事を参考にしてください。
Swift UI：symbolRenderingModeメソッド
公式リファレンス：symbolRenderingModeメソッド
SwiftUIを使用している場合はsymbolRenderingModeメソッドを使用し引数にmulticolorを指定します。
Image(systemName: "cloud.sun.fill")
.font(.title)
.symbolRenderingMode(.multicolor)マルチカラーのレイヤー色をカスタマイズする
各レイヤーごとの配色をデフォルトのものではなく任意の色に変更することも可能です。
UIKit
UIImage(systemName: "cloud.sun.fill", withConfiguration: UIImage.SymbolConfiguration(paletteColors:[.red,.blue]))Swift UI
Image(systemName: "cloud.sun.fill")
.font(.title)
.symbolRenderingMode(.palette)
.foregroundStyle(.red,.blue)まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。
