【SwiftUI】SFシンボルの活用方法

2024.01.20
SwiftUI
SFシンボル

本記事では、SwiftUIで使用可能なSFシンボルと呼ばれるアイコン画像を表示する方法と色付けを行う方法について解説していきます。

アプリ内のボタンのデザインや文章の合間のアイコンなど、画像やイラストを入れるまでもない部分に挿入するするなどの活用方法が考えられます。

1. SFシンボルの表示
2. SFシンボルを色付けする
3. 最後に

SFシンボルの表示

SFシンボルは、Imageオブジェクトやlabelオブジェクトなどを活用して表示することが可能で、エディター右上の「＋」ボタンからツールパレットを開いてそこから好きなシンボルを選択することも可能です。

ツールパレットの上部の一番右側の星のマークを選択することでシンボルの一覧を確認できます。

今回は、Imageオブジェクトを使用してSFシンボルを画面表示していきます。基本的なシンボルの表示方法は以下のとおりです。

SFシンボルを色付けする

SFシンボルの色を表示する方法は多岐にわたります。SFシンボルを表示する方法を主に4つに分類され、モノクロレンダリングモード、階層レンダリングモード、パレットレンダリングモード、マルチカラーレンダリングモードがございます。

レンダリングのモードを切り替えるには、symbolRenderringMode()を使用し、括弧内にどのモードを設定するかを指定していきます。

それぞれの特徴、使い方について解説していきます。

今回は例として2つのSFシンボルを表示します。SFシンボルはサイズが小さいため、確認しやすいように画像サイズを大きめに変更しています。

var body: some View {
        VStack {
            Image(systemName: "circle.hexagongrid.fill")
                .font(.system(size: 200))
                
            Image(systemName: "thermometer.sun.fill")
                .font(.system(size: 200))
                
        }
        .padding()
    }

モノクロ

モノクロレンダリングモードはその名の通り、白と黒の2色の色を用いたモノクロの表現方法です。

symbolRenderringMode()に対して、.monochromeを指定することでSFシンボルをモノクロで表示させることができます。

また、SFシンボルに対してsymbolRenderringMode()を設定しない場合にはデフォルトでモノクロ表示されます。

var body: some View {
        VStack {
            Image(systemName: "circle.hexagongrid.fill")
                .font(.system(size: 200))
                .symbolRenderingMode(.monochrome)
                
            Image(systemName: "thermometer.sun.fill")
                .font(.system(size: 200))
                .symbolRenderingMode(.monochrome)
                
        }
        .padding()
    }

階層

階層レンダリングモードは、SFシンボルを複数レイヤー(階層)で塗り分けて表示することができます。任意の単色を指定してシンボルの色を変更することができます。色の指定には、foregroundStyleやforegroundColorを使用します。

指定には、symbolRenderringMode()へhierarchicalを指定ます。色の指定を省略した場合には黒が適用されます。また、色の階層が存在しないシンボルではレイヤーのない単色が適用されます。

VStack {
            Image(systemName: "circle.hexagongrid.fill")
                .font(.system(size: 200))
                .symbolRenderingMode(.hierarchical)
                .foregroundColor(.red)
                
            Image(systemName: "thermometer.sun.fill")
                .font(.system(size: 200))
                .symbolRenderingMode(.hierarchical)
                .foregroundColor(.blue)
                
        }
        .padding()
    }

パレット

パレットレンダリングモードは、シンボルを複数レイヤーで塗り分けることができ、自由に複数の色を指定することができます。symbolRenderingModal(.palette)を指定します。

色の指定は、foregroundStyle()に任意の色をカンマで区切って記述します。

var body: some View {
        VStack {
            Image(systemName: "circle.hexagongrid.fill")
                .font(.system(size: 200))
                .symbolRenderingMode(.palette)
                .foregroundStyle(.blue, .red, .yellow)
                
            Image(systemName: "thermometer.sun.fill")
                .font(.system(size: 200))
                .symbolRenderingMode(.palette)
                .foregroundStyle(.blue, .red, .yellow)
                
        }
        .padding()
    }

1つ目に表示しているcircle.hexagongrid.fillシンボルはパレットレンダリングモードの指定では、多色に対応していないため、一番最初に指定している青が適用されます。

マルチカラー

マルチカラーレンダリングモードはあらかじめそれぞれのSFシンボルに設定されている色で表現されます。

symbolRenderingModal(.multicolor)を指定し、パレットや階層と違い色を指定する必要がございません。

var body: some View {
        VStack {
            Image(systemName: "circle.hexagongrid.fill")
                .font(.system(size: 200))
                .symbolRenderingMode(.multicolor)
                
            Image(systemName: "thermometer.sun.fill")
                .font(.system(size: 200))
                .symbolRenderingMode(.multicolor)
                
        }
        .padding()
    }