【Swift 】SF-Symbolsのマルチカラー設定方法!

この記事からわかること

  • Swiftで使えるSF-Symbolsマルチカラー表示させる方法
  • UIKitpreferringMulticolorメソッドの使い方
  • Swift UIsymbolRenderingMode(_:)メソッド使い方

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

SwiftでSF-Symbolsを使ってマルチカラーに対応しているアイコンを実装する方法をまとめていきます。SF-Symbolsの導入方法や使い方に関しては以下記事を参考にしてください。

マルチカラーに対応しているSF-Symbolsアイコン

SF-Symbolsのアイコンの中にはマルチカラーに対応しているアイコンがあります。基本的にはアイコンに対して1色しか指定できませんがマルチカラー対応のものはレイヤーごとに色を変更することができます。

マルチカラーのデフォルトの配色は「シンボル一覧」を取得後、右側メニューの「ブラシ」を選択後にカラーを「マルチカラー」に変更することで確認できます。

【Swift 】SF-Symbolsのマルチカラー設定方法!

UIKit:preferringMulticolorメソッド

公式リファレンス:preferringMulticolorメソッド

UIKitフレームワーク使用時にマルチカラーを設定するにはUIImage.SymbolConfigurationが持つpreferringMulticolorメソッドを使用します。

UIImage(systemName: "cloud.sun.fill", withConfiguration: UIImage.SymbolConfiguration.preferringMulticolor())

これでAppleからデフォルトで設定されている配色になったSF-Symbolsアイコンが表示されます。withConfigurationSymbolConfigurationクラスについては下記記事を参考にしてください。

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)

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index