• 2022/10/27
• 3分

【Swift UIKit】SF Symbolsのサイズやカラーのカスタマイズ方法！UIImage

＼ アプリをリリースしました ／

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

posted withアプリーチ

SwiftのUIKitを使用している場合のSF Symbolsアイコンのカスタマイズ方法をまとめていきます。「SF Symbolsとは？」や「Swift UIでの使い方」については以下記事を参考にしてください。

UIKit：SF Symbolsの実装方法

公式リファレンス：UIImage

UIKitフレームワークではSF Symbolsのアイコンを表示する際はUIImage(systemName:)形式のイニシャライザを使用します。

let img = UIImage(systemName: "swift")

画面にビューとして追加したい場合はUIImageView型に変換してaddSubviewメソッドを使って表示させることができます。

let img = UIImage(systemName: "swift")

let imageView = UIImageView(image: img)
imageView.center = .init(x: 100, y: 100)
view.addSubview(imageView)

SF Symbolsのカスタマイズ方法

インスタンス化したSF SymbolsアイコンのUIImageをカスタマイズするには init(systemName:withConfiguration:)形式のイニシャライザを使用します。

init?(
    systemName name: String,
    withConfiguration configuration: UIImage.Configuration?
)

引数withConfigurationにはUIImage.SymbolConfiguration型でカスタマイズしたい要素を指定します。

UIImage.SymbolConfiguration

公式リファレンス：UIImage.SymbolConfiguration

UIImage.SymbolConfigurationはUIImage.Configurationクラスを継承したシンボル画像をカスタマイズするための設定指定するクラスです。

様々なイニシャライザを使用することでサイズやフォント、スケールなどの値を変更することができます。

システムサイズを変更する

サイズはinit(textStyle:)で変更できます。値にはUIFont.TextStyle型のcaption1やlargeTitleなどシステム指定のものを指定できます。

let img = UIImage(systemName: "swift", withConfiguration: UIImage.SymbolConfiguration(textStyle: .title1))

カスタムサイズに変更する

サイズをカスタムに変更するにははinit(font: )を使用します。.systemFont(ofSize: 40)とすることで任意の値にサイズを変更することができます。

 let img = UIImage(systemName: "swift", withConfiguration: UIImage.SymbolConfiguration(font: .systemFont(ofSize: 40)))

init(pointSize:)でもサイズをカスタムに変更することが可能です。

 let img = UIImage(systemName: "swift", withConfiguration: UIImage.SymbolConfiguration(pointSize:40))

withTintColorでカラーを変更する

カラーを変更するにはinit(systemName:withConfiguration:)ではなくwithTintColorメソッドを使用します。

let img = UIImage(systemName: "swift")?.withTintColor(.orange)

反転させる

アイコンを反転させた場合はUIImage(cgImage: CGImage, scale: CGFloat, orientation: UIImage.Orientation)を使用することで反転させることができます。詳細な実装方法は以下の記事を参考にしてください。

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

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