SwiftUIにおけるSF Symbols

SF SymbolsをSwiftUI Appに組み込む方法を紹介します。シンボルの表示、サイズのカスタマイズ、さまざまなバリエーションを表示するための基本的なテクニックを探ります。また、シンボルの色付けに関する最新のアップデートについても説明し、Appのニーズに合ったツールを選択できるようにします。

リソース

関連ビデオ

WWDC21

ダウンロード

♪♪ どうもジェイコブです “SwiftUIにおけるSF Symbols”へようこそこのセッションではいくつかトピックを紹介しますまずSF SymbolsをSwiftUIで― 使用するための基本事項次にシンボルのバリエーションを使用する方法最後に新しいレンダリングモードについてこれらＡＰＩについてですがこのセッションの内容は全てのAppleプラットフォームで― 利用可能です今年のリリースでも何か― 新しいものが見つかることでしょうまず基本的な部分から SwiftUIで SF Symbolsをすでに使用している場合この部分は簡単です

まずシンボルの表示

画像の“ハート”のようにシステムが提供する― シンボルを使ってみましょうラベルビューはシンボルを表示するもう1つの主な方法ですラベルはタイトルとアイコンの組み合わせでほとんどはシンボルですラベルの優れたところはこのペアリングの一般的な説明でありコンテキストに動作を適応させられることたとえば多くのコンポーネントではラベルはシンボルとタイトルとともに表示され別のレイアウトではシンボルまたはタイトルのみの― 場合もあります SwiftUIはこうした変更を組み込みのビューで自動的に行います独自のビューでラベルスタイルに応じて変更することもできます使用するイニシャライザの変更だけで画像とラベルの両方にカスタムシンボルを表示できますこれは各構成要素の表示例ですが重要なのは表示だけではありません各ビューはこのようにデフォルトで VoiceOverに表示されますラベルを使用すればアクセシビリティサポートを自動提供しますタイトルはコンテンツのテキストによる― 説明だからです画像のみの場合を見てみましょう可能な限りSwiftUIはシステムシンボルの― コンテンツに基づいてラベルを提供しますハートを“いいね”ボタンに― 使う場合は"ハート"で十分ですが一部のシンボルには標準的な意味がなくデフォルトの― アクセシビリティの説明では有用性が低くなります Appがシンボルをどのように使用しているか情報を追加したい場合いつでも accessibilityLabelでその情報を提供できますカスタムシンボルで理想的な― アクセシビリティの記述がないケースにも対応できます改善案としては画像の名前のローカライゼーションを Localizable.stringsファイルで提供します SwiftUIは自動的にアクセシビリティラベルとしてローカライズした文字列を使用します

最後にテキストの中でシンボルを使用することも可能です文字列の置き換えにより一連のテキスト内にシンボルを埋め込めますこれはシェブロンのようにテキストと一緒にシンボルをリフローさせたい場合に最適です

ハートのラベルに戻りシンボルのカスタマイズに適用できる修飾子のいくつかを見てみますまずforegroundStyleによりシンボルの色を変更テキスト色はライトモード― ダークモードで黒か白です foregroundStyleを赤などの特定の色― あるいは別スタイルなどセマンティックな値に設定可能です foregroundStyleについては後ほどその高度な機能を見ていきます

font修飾子を使用してテキストサイズとシンボルのサイズを変更します bodyやcaptionなどのスタイルを使用すればテキストは動的にスケーリングされ固定サイズ指定では一定に保たれます

シンボルのサイズを変更するには imageScaleを使用しますこれによりフォントサイズを変更せずにテキストに対して相対的にシンボルがスケールできます

次にバリエーションを見てみます iOSのタブバーでは塗りつぶし fill のシンボルを通常は使用しますここは手作業が必要な項目でした SF Symbols appでシンボルを探しても sparklesのように塗りつぶしが― 用意されていない場合などです今年のタブバーとビューは特定のバリエーションを自動的にオプトインしフィルなどをすべてのシンボルに適用しますこれはシンボル名のベースのみを指定することで余計な作業なしでバリエーションが取得されることを意味します不必要に過剰に設定しないことで― コードがより再利用可能となります同じコードを macOSで実行すると正しいバリエーションであるアウトラインを取得します

このバリエーションサポートは独自のコンポーネントでも使えますデフォルトのアウトラインのバリエーションで― 提示されているラベルのリストがありますフィルバージョンを使用するには symbolVariant修飾子を使いますこの修飾子でバリエーションを中括弧に設定しビュー階層全体で使用したのがこちらの例です大規模なバリエーションのセットを用意しました塗りつぶし取り消し囲みの形状などです .circle.fillのようなシンボルの名称と同様にこれらを組み合わせて使えます

同じバリエーションのセットはカスタムシンボルでも機能します必要な作業はシステムシンボルが使用する命名パターンに従うことだけ次にレンダリングモードですシンボルは４つのレンダリングモードをサポートします色付け方法のカスタマイズを提供します各レンダリングモードの例を次に示します１つずつ確認しましょうレンダリングモードの設計に― 関する詳細な情報については “SF Symbolsの新機能”をお勧めします

ではカードリストに戻りましょう今度はmacOSです現在シンボルはデフォルトのモードである― モノクロになっていますこれはシンボルを一貫した色で表示― するのに適していますただしこの場合シンボルの表示には各カードに関連付けられた色を使用したいマルチカラーモードは各シンボルが表す色を― 表示する優れた方法です symbolRenderingMode 修飾子で multicolorを指定しますシンボルに多色表現がない場合モノクロモードにフォールバックします SF Symbols Appを使用してどのシンボルが多色定義されているか調べられますまたカスタムのシンボルにマルチカラーを追加することもできます詳細についてはこちらをご覧ください “SF Symbols 3 Appの詳細” このAppの別の箇所にはカードをデッキにシャッフルするいくつかのボタンがあります透明度のレベルの違いでシンボルの― 重要箇所を強調したいと思いますどのレンダリングモードだったでしょう？そうです階層です同じ修飾子 symbolRenderingModeで hierarchicalを使用できますこれは現在のフォアグラウンドのスタイルでモノクロのように単色を適用するだけでなく複数のレベルの透明度を追加してシンボルの要素を強調しますレンダリングモードにはもう一つありますここにAppに役立ちそうなボタンがありますカードゲームでの間違いを元に戻すにはこのボタンを使いますここでは.circle.fillバージョンを使用してボタンにシンボルを表示円形の背景を取得しますでも色がちょっと違う感じカードの色に合ったものが欲しい foregroundStyle 修飾子を使用してシンボルに着色さらに先に進めます今年の新機能ではシンボルの描画に― 複数の色を設定可能これは最大限の制御を可能にするパレットモードをシンボルのレイヤーに適用します最大３つのスタイルを指定してシンボルの各レベルを制御しますこのシンボルにはprimaryと tertiaryのコンテントを持っておりよって１番目と３番目の色が適用されますこのシンボルのアウトラインのように primaryとsecondaryだけのシンボルの場合それらの色のみが使用されますほとんどのシンボルは２つのレイヤーしか使用しないため secondary以降は３つではなく２つの― スタイルを指定して最後のスタイルを設定します多くの場合必要なのはこれだけですこれまでの色の指定は foregroundStyle修飾子であり任意の ShapeStyleで機能するものでした secondaryスタイルを使用してぼかし効果を表示したりマテリアルを使用してシンボル背後の背景をぼかすことも可能ですフォアグラウンドのスタイルとマテリアルに関する情報は “SwiftUI Appへのリッチなグラフィックスの追加”をどうぞレンダリングモードセットをおさらいします

レンダリングモードで最良の方法は SF Symbols AppとそのインスペクターですこれらのＡＰＩを表現する SwiftUIの設定は SF Symbols appとコードの間で同じように機能するため簡単に行き来できますまた最小限の設定で最良の動作が得られます前景スタイルが１つだけでレンダリングモードを指定しない場合は自動的にモノクロになります複数の前景スタイルにレンダリングモードが未指定の場合は自動的にパレットを選びます

SF Symbols appにはこれらのさまざまなモードで使用できる色のセットが多数あります SwiftUIで利用できる色のセットには新色とスタイルを含む新しいものを用意しましたカラーは設定ごとにライトモードやダークモードにぼかしなどの― 特定のプラットフォームにも最適化されていますシンボルの作成方法を見てきましたが内容は外観を変更するための一連の修飾子表示されるシンボルのバリエーションを変更する方法レンダリングモードの選択方法前景スタイルを使用してシンボルをカスタマイズする方法などでした SF SymbolsでAppにグラフィックを簡単に追加必要に応じてカスタマイズも可能です Appを改善するためにご活用くださいご清聴ありがとうございました [アップビートな音楽]

0:45 - Creating Symbols

// System symbol image
Image(systemName: "heart")

// System symbol label
Label("Heart", systemImage: "heart")

// Custom symbol image
Image("queen.heart")

// Custom symbol label
Label("Queen of Hearts", image: "queen.heart")

2:33 - Accessibility Label

Image(systemName: "heart")
    .accessibilityLabel("Ace of Hearts")

Image(systemName: "person.circle")
    .accessibilityLabel("Profile")

Image("queen.heart")

// Localizeable.strings
"queen.heart" = "Queen of Hearts";

2:59 - Symbol in Text

Text("""
    Thalia, Paul, and
    3 others \(Image(systemName: "chevron.forward"))
""")

3:14 - Customizing Color

Label("Heart", systemImage: "heart")

Label("Heart", systemImage: "heart")
    .foregroundStyle(.red)

Label("Heart", systemImage: "heart")
    .foregroundStyle(.tint)

Label("Heart", systemImage: "heart")
    .foregroundStyle(.secondary)

3:51 - Customizing Font

Label("Heart", systemImage: "heart")
    .font(.body)

Label("Heart", systemImage: "heart")
    .font(.caption)

Label("Heart", systemImage: "heart")
    .font(.system(size: 10))

4:08 - Customizing Scale

Label("Heart", systemImage: "heart")
    .imageScale(.large)

Label("Heart", systemImage: "heart")
    .imageScale(.medium)

Label("Heart", systemImage: "heart")
    .imageScale(.small)

4:23 - Customizing Variants

TabView {
    Text("Cards").tabItem {
        Label("Cards", systemImage: "rectangle.portrait.on.rectangle.portrait")
    }
    Text("Rules").tabItem {
        Label("Rules", systemImage: "character.book.closed")
    }
    Text("Profile").tabItem {
        Label("Profile", systemImage: "person.circle")
    }
    Text("Magic").tabItem {
        Label("Magic", systemImage: "sparkles")
    }
}

5:12 - Monochrome

List {
    Label("Ace of Hearts", systemImage: "suit.heart")
    Label("Ace of Spades", systemImage: "suit.spade")
    Label("Ace of Diamonds", systemImage: "suit.diamond")
    Label("Ace of Clubs", systemImage: "suit.club")
    Label("Queen of Hearts", image: "queen.heart")
}
.symbolVariant(.fill)

6:41 - Multicolor

List {
    Label("Ace of Hearts", systemImage: "suit.heart")
    Label("Ace of Spades", systemImage: "suit.spade")
    Label("Ace of Diamonds", systemImage: "suit.diamond")
    Label("Ace of Clubs", systemImage: "suit.club")
    Label("Queen of Hearts", image: "queen.heart")
}
.symbolVariant(.fill)
.symbolRenderingMode(.multicolor)

7:10 - Hierarchical Rendering Mode

HStack {
    Button(action: {}) {
        Image(systemName: "square.3.stack.3d.top.fill")
    }
    Button(action: {}) {
        Image(systemName: "square.3.stack.3d.bottom.fill")
    }
}
.symbolRenderingMode(.hierarchical)

7:50 - Palette Rendering Mode

Button(action: {}) {
    Image(systemName: "arrow.uturn.backward")
}
.symbolVariant(.circle.fill)
.foregroundStyle(.white, .yellow, .red)

9:00 - Advanced Foreground Styles

Button(action: {}) {
    Image(systemName: "arrow.uturn.backward")
}
.symbolVariant(.circle.fill)
.foregroundStyle(.white, .red)

Button(action: {}) {
    Image(systemName: "arrow.uturn.backward")
}
.symbolVariant(.circle.fill)
.foregroundStyle(.white, .secondary)

Button(action: {}) {
    Image(systemName: "arrow.uturn.backward")
}
.symbolVariant(.circle.fill)
.foregroundStyle(.red, .regularMaterial)

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。