【Swift】iOS15から使えるSF Symbolsに複数のカラーを設定する方法

リルオッサ

2022.01.17

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

先日記事で紹介した登壇記事の中にもあった内容ですが、改めてiOS15から使えるSF Symbolsに複数のカラーを設定する方法の箇所を切り取ってお伝えしたいと思います。登壇記事はこちら

「SF Symbolsの楽しみ方」というタイトルで登壇しました

環境

Xcode 13.2.1
SF Symbols 3.2

SF Symbolsを使う

まずはUIImageViewのimageにSF Symbolsのシンボルイメージを使ってみましょう。

Storyboardで使う

Storyboardで使用する場合は、ViewControllerにUIImageViewを追加して、imageのフォームに文字を打ち込むと、systemのヘッダーと共にシンボルが出てきます。
お好きなシンボルを選択しましょう。

お気に入りのシンボルは、SF Symbolsアプリで見つけるのが簡単かと思います。ダウンロードはこちらから

お気に入りのシンボルを見つけると、右クリックで名前をコピーできるので、その名前をimageのフォームに入力するとシンボルがimageにセットされます。

コードで使う

let image = UIImage(sysytemImage: "対象のシンボル名")

systemImageに対象のシンボルの名前を入力すると、imageにセットされます

注意点

SF SymbolsはOS依存しているものがあります。storyboard上でセットする場合は、Xcodeが警告を出してくれますが、コードから使用する場合にはエラーを吐いてくれないので注意が必要です。

SF Symbolsに色を設定する

tintColorを設定する

let image = UIImage(systemName: "face.smiling.fill")
imageView.image = image

設定しない場合はデフォルトカラーになります。

tintColorを設定する場合は、

imageView.tintColor = .tintColor

iOS15より前までは1色だけしか設定できませんでした。

iOS15から使えるSF Symbosに複数のカラーを設定する方法

階層カラーを設定する

iOS15から使用できるUIImage.SymbolConfiguration.init(hierarchicalColor:)でSymbolConfigurationを生成して設定することで指定した基本色の強度を下げた色の値を他の階層のレイヤーの割り当てます。

let image = UIImage(systemName: "trash.slash")
let configuration = 
    UIImage.SymbolConfiguration(hierarchicalColor: .systemMint)

imageView.preferredSymbolConfiguration = configuration
imageView.image = image

出力結果はこのようになります。

スラッシュの色と、その後ろにあるゴミ箱のレイヤーの色の強度が違うのが分かると思います。

パレットカラーを設定する

iOS15から使用できるUIImage.SymbolConfiguration.init(paletteColors:)でSymbolConfigurationを生成して設定することでシンボルのイメージに複数のカラーを割り当てることが出来ます

let image = UIImage(systemName: "face.smiling.fill")
let configuration = UIImage.SymbolConfiguration(paletteColors:
 [.black, .systemYellow])

imageView.image = image
imageView.preferredSymbolConfiguration = configuration

出力結果はこのようになります。

smileのimageに黒と黄色のカラーが設定されているのが分かると思います。

マルチカラーを設定する

iOS15から使用できるUIImage.SymbolConfiguration.preferringMulticolorメソッドを使用すると、シンボルがマルチカラーバリアントを持っている場合はそのカラーが割り当てられます。

let image = UIImage(systemName: "ladybug.fill")
imageView.preferredSymbolConfiguration =                                    
    UIImage.SymbolConfiguration.preferringMulticolor()

imageView.tintColor = .brown
imageView.image = image

出力結果はこのようになります。