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

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

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

環境

• Xcode 13.2.1
• SF Symbols 3.2

SF Symbolsを使う

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

Storyboardで使う

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

お気に入りのシンボルは、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

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

実際にコード上ではimageView.tintColor = .brownと茶色を設定していますが、このシンボルはマルチカラーバリアントを持っているので、てんとう虫のようなカラーが生成時に割り当てられています。

事前に見栄えを確認する

iOS15から色を複数設定する方法が分かったところで、実際どんな見栄えになるのか事前に確認したいと思います。

階層カラー

SF Symbolsアプリの右上、ペイントマークを選択して、レンダリングの項目を階層に切り替えます。

選択されたカラーの階層カラーがレイヤーに割り当てられているのが確認出来ます。

パレットカラー

レンダリングの項目をパレットに切り替えます。

選択できる色が3色に増え、設定した色によりシンボルのカラーが変更されるのが確認出来ます。

マルチカラー

レンダリングの項目をマルチカラーに切り替えます。

マルチカラーに対応したシンボルは、カテゴリーマルチカラーに切り替えると対応しているものが確認出来ます。

カラーはブラックに設定していますが、指定したカラー以外の色が割り当てられているものがあると思います。これがマルチカラーバリアントになります。

おわりに

これでますますSF Symbolsの恩恵を受けれるようになりました。これからもSF Symbolsに感謝を伝えながら開発していきたいと思います。

引き続き、SF Symbolsのことをどうかよろしくお願い致します。

参考

• SF Symbols 3
• SF Symbols: The benefits and how to use them guide
• init(hierarchicalColor:)
• init(paletteColors:)
• preferringMulticolor()