SF Symbols in SwiftUI

ハイライト

SwiftUI は、WWDC21 で SF シンボルのバリアントと 4 つのレンダリングモードをサポートし、開発者は使用できますImage、Label、foregroundStyle、symbolVariantそしてsymbolRenderingModeシンボルのセマンティクス、サイズ、色を制御します。

主な内容

多くの場合、カードアプリにはハート、スペード、ルールブック、個人情報、元に戻すボタンなどの小さなアイコンが多数あります。これらは単なる装飾のように見えますが、実際にはアクセシビリティ、ダイナミックフォント、ダークモード、クロスプラットフォームの外観に影響を与えます。

以前は、開発者はシンボル名を手作業で選択することがよくありました。 iOS タブバーの塗りつぶしバージョンを使用するには、次のようにします。person.circle.fillコードを書きます。 macOS にはアウトラインバージョンと別の名前が必要です。カスタムシンボルには、VoiceOver テキストの追加処理も必要です。色はもっと面倒です。「元に戻す」ボタンには、白い矢印と赤い背景の両方が必要です。単色の色合いだけで表現するのは難しいです。

Apple は SF Symbols 3 と SwiftUI でこのリンクを完成させました。システムシンボルとカスタムシンボルの両方を渡すことができますImageそしてLabel現在。シンボルを埋め込むことができるText、その後にテキストの改行が続きます。 SwiftUI コンポーネントは、適切なシンボルバリアントを自動的に選択します。開発者も使用できますsymbolVariant、symbolRenderingModeそしてforegroundStyleビューツリー全体を明示的に制御します。

これにより、コードがビジネス上の意味に戻ります。ラベルバーに基本的なシンボル名を書き込むと、プラットフォームは塗りつぶしまたはアウトラインを選択できます。リストに入力する必要がある場合は、外側のレイヤーに修飾子を追加します。ボタンに複数の色のレイヤーが必要な場合は、foregroundStyle複数のスタイルを渡します。シンボルは引き続きフォント、動的タイピング、ダークモード、およびプラットフォームのルールに従います。

アクセシビリティはシンボルの作成から始まります

Labelタイトルとアイコンを結合します。多くの SwiftUI 組み込みコンポーネントは、コンテキストに応じてタイトル、アイコン、またはその両方を表示します。 VoiceOver では、タイトルをテキスト説明として直接使用することもできます。

画像のシンボルのみ追加のチェックが必要です。システムシンボルにはデフォルトのアクセシビリティの説明が含まれている場合がありますが、同じアイコンが異なるアプリで同じ意味を持つとは限りません。カスタムシンボルは次の方法でも作成できます。Localizable.strings画像名にローカライズされたテキストを指定すると、SwiftUI はそれをアクセシビリティラベルに使用します。

バリアントを使用すると、コードでプラットフォームの詳細を少なく書くことができます

iOS のタブバーでは、塗りつぶし記号がよく使用されます。以前は、開発者は選択する必要がありました.fill終了シンボルの場合は、特定のシンボルに塗りつぶしバージョンがあるかどうかも知る必要があります。

WWDC21 の SwiftUI では、タブバーなどのビューで特定のバリアントを自動的に選択できるようになります。開発者は、ベース名を使用して、さまざまなプラットフォーム上のコンポーネントに適切な外観を選択します。同じルールを独自のコンポーネントに適用したい場合は、次のようにします。symbolVariant(.fill)親ビュー上に配置します。

レンダリングモードでは、カラールールはシンボルレベルに残ります。

SF Symbols は、モノクロ (単色)、マルチカラー (多色)、階層 (レイヤード)、およびパレット (パレット) の 4 つのレンダリングモードをサポートしています。

モノクロは、複数のアイコンの色を統一するのに適しています。マルチカラーでは、色が組み込まれたシンボルを使用します。これは、カードスートなど、固有の色の意味を持つアイコンに適しています。レイヤー化では、前景スタイルを使用してさまざまな不透明度を生成し、シンボルの重要な部分を強調表示します。パレットでは、最大 3 つのスタイルで異なるレベルを制御でき、前景と背景を持つボタンに適しています。

＃＃詳細

システムシンボルとカスタムシンボルを作成する

(00:45) SwiftUI は使用しますImage(systemName:)システムシンボルを表示するには、次を使用します。Label(_:systemImage:)タイトルとシステムシンボルを組み合わせます。カスタムシンボルはリソース名を使用します。ImageそしてLabel対応する初期化子があります。

import SwiftUI

struct SymbolBasicsView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Image(systemName: "heart")

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

            Image("queen.heart")

            Label("Queen of Hearts", image: "queen.heart")
        }
        .padding()
    }
}

キーポイント:

import SwiftUI導入Image、Label、VStackそしてView。
SymbolBasicsViewは、SwiftUI アプリに直接ドロップできるビューです。 -Image(systemName: "heart")システムが提供するハートマークを表示します。 -Label("Heart", systemImage: "heart")タイトルとシンボルの両方を入力してください。 -Image("queen.heart")アプリのリソースからカスタムシンボルを読み込みます。 -Label("Queen of Hearts", image: "queen.heart")カスタムシンボルをタイトルにバインドします。 -.padding()プレビューしやすいように、サンプルコンテンツには余白を残してください。

画像のみのシンボルにアクセシビリティテキストを追加する

（02:33）Labelテキストによる説明が自然に提供されます。のみImageこのシナリオでは、開発者は、VoiceOver によって読み取られたコンテンツがビジネス上の意味を満たしているかどうかを確認する必要があります。システムシンボルを追加可能accessibilityLabel、カスタムシンボルは次の場所にあります。Localizable.strings画像名にローカライズされたテキストを提供します。

import SwiftUI

struct AccessibleSymbolsView: View {
    var body: some View {
        VStack(spacing: 12) {
            Image(systemName: "heart")
                .accessibilityLabel("Ace of Hearts")

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

            Image("queen.heart")
        }
        .padding()
    }
}

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

キーポイント:

Image(systemName: "heart")アイコンのみが表示され、タイトルは表示されません。 -.accessibilityLabel("Ace of Hearts")現在のアプリのトランプの意味としてハートのアイコンを説明します。 -Image(systemName: "person.circle")プロフィール画像のシンボルを使用します。 -.accessibilityLabel("Profile")VoiceOver で「プロフィール」を読み上げてもらいます。 -Image("queen.heart")カスタムシンボルを使用します。 -Localizable.strings内部"queen.heart"カスタム画像名にデフォルトのアクセシビリティテキストを提供します。

テキストに記号を挿入する

(02:59) SwiftUI で文字列補間が可能Image(systemName:)埋め込むText。この方法は、連絡先リストの前向き矢印など、テキストで折り返されるシンボルに適しています。

import SwiftUI

struct InlineSymbolTextView: View {
    var body: some View {
        Text("""
            Thalia, Paul, and
            3 others \(Image(systemName: "chevron.forward"))
        """)
        .font(.body)
        .padding()
    }
}

キーポイント:

Text(""" ... """)2 行のテキストを表示するには、複数行の文字列を使用します。 -\(Image(systemName: "chevron.forward"))システム矢印記号をテキストフローに挿入します。 -.font(.body)テキストとインラインシンボルに本文のテキストスタイルを使用させます。 -.padding()サンプルプレビューで行折り返し効果を見やすくします。

前景のスタイル、フォント、スケーリングで外観を調整する

（03:14）foregroundStyleシンボルとテキストの色を制御します。具体的な色、または現在の色合いやセカンダリなどのセマンティックスタイルのいずれかを受け取ることができます。fontタイトルとシンボルの両方のサイズに影響します。imageScaleテキストに対するシンボルのサイズのみを変更します。

import SwiftUI

struct SymbolStylingView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Label("Heart", systemImage: "heart")
                .foregroundStyle(.red)

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

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

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

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

キーポイント:

最初の段落Labelシステムのハートマークを使用します。 -.foregroundStyle(.red)テキストと記号を赤で描画します。 -.foregroundStyle(.tint)現在の環境のアクセントカラーを使用します。 -.foregroundStyle(.secondary)2 番目の前景スタイルを使用します。 -.font(.caption)テキストとシンボルの両方でキャプションテキストスタイルを使用し、動的なタイプスケーリングに従います。 -.imageScale(.large)テキストに対するシンボルの比率のみが変更されます。

コンポーネントに自動または手動でシンボルバリアントを選択させます

(04:23) SwiftUI のタブバーは、それ自体に適したシンボルのバリアントを自動的に選択します。開発者tabItemここでは基本シンボル名が使用され、システムは必要に応じてパディングなどのバリエーションを適用します。

import SwiftUI

struct CardsTabView: View {
    var body: some View {
        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")
            }
        }
    }
}

キーポイント:

TabViewタブ付きナビゲーションを作成します。
それぞれTextタブページのコンテンツです。 -.tabItemタブのタイトルとシンボルを定義します。 -Label("Cards", systemImage: ...)基本的なシンボル名を使用し、コードは記述されません.fillサフィックス。 -sparklesパディングなしでも、システムは利用可能なバリアントを処理できます。

(05:12) 独自のリストも使用できますsymbolVariant(.fill)。この修飾子はバリアントを環境に書き込み、ビュー階層全体のシンボルに適用します。

import SwiftUI

struct FilledCardListView: View {
    var body: some View {
        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)
    }
}

キーポイント:

List一連のカードエントリを表示します。
最初の 4 つLabelシステムスーツのシンボルを使用します。 -Label("Queen of Hearts", image: "queen.heart")カスタムシンボルを使用します。 -.symbolVariant(.fill)リスト内のシンボルがパディングバリアントを使用するように要求します。
この修飾子は、システムシンボルと、命名規則に従うカスタムシンボルの両方に影響を与える可能性があります。

マルチカラーおよびレイヤードレンダリングモードを使用する

（06:41）symbolRenderingMode(.multicolor)シンボルに付属のマルチカラー定義を使用します。ハート、スペード、ダイヤ、クラブなど、色が意味をダイレクトに表現するシンボルに適しています。シンボルにマルチカラーバージョンがない場合、システムはモノクロレンダリングに戻ります。

import SwiftUI

struct MulticolorCardListView: View {
    var body: some View {
        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)
    }
}

キーポイント:

List同じカードタグのセットを引き続き使用します。 -.symbolVariant(.fill)まず塗りつぶしバリアントをリクエストします。 -.symbolRenderingMode(.multicolor)シンボルの組み込み色の使用をリクエストします。
マルチカラー定義のないシンボルはモノクロモードに戻ります。
SF Symbols アプリは、システムシンボルがマルチカラーをサポートしているかどうかを確認し、カスタムシンボルにマルチカラーサポートを追加することもできます。

（07:10）symbolRenderingMode(.hierarchical)現在の前景スタイルを使用してシンボルを描画し、シンボル内の異なるレベルに異なる不透明度レベルを適用します。複雑なアイコンの重要な部分を強調するのに適しています。

import SwiftUI

struct HierarchicalButtonsView: View {
    var body: some View {
        HStack(spacing: 16) {
            Button(action: {}) {
                Image(systemName: "square.3.stack.3d.top.fill")
            }
            Button(action: {}) {
                Image(systemName: "square.3.stack.3d.bottom.fill")
            }
        }
        .symbolRenderingMode(.hierarchical)
        .font(.largeTitle)
        .padding()
    }
}

キーポイント:

HStack2つのボタンを横に並べます。 -Button(action: {})クリックアクションを定義します。この例では空です。
初めImageトップデッキのシンボルを使用します。
2番目Image下部デッキのシンボルを使用します。 -.symbolRenderingMode(.hierarchical)両方のシンボルでレイヤードモードを使用します。 -.font(.largeTitle)ボタンのシンボルを拡大すると、レベルの透明度が確認しやすくなります。

パレットレンダリングを使用してマルチレイヤーカラーを制御する

（07:50）foregroundStyle複数のスタイルを受信できます。 SwiftUI はパレットレンダリングモードを使用して、これらのスタイルをさまざまなレベルのシンボルに割り当てます。講義での「元に戻す」ボタンの使用.circle.fillバリエーションを選択し、矢印、円形の背景、3 番目のレイヤーの色を設定します。

import SwiftUI

struct PaletteUndoButtonView: View {
    var body: some View {
        Button(action: {}) {
            Image(systemName: "arrow.uturn.backward")
        }
        .symbolVariant(.circle.fill)
        .foregroundStyle(.white, .yellow, .red)
        .font(.largeTitle)
        .padding()
    }
}

キーポイント:

Button(action: {})クリック可能なボタンを作成します。 -Image(systemName: "arrow.uturn.backward")元に戻す矢印を表示します。 -.symbolVariant(.circle.fill)ボタンの背景を生成するための円塗りつぶしバリアントをリクエストします。 -.foregroundStyle(.white, .yellow, .red)3 つの前景スタイルが利用可能です。
シンボルに 1 次コンテンツと 3 次コンテンツしかない場合は、1 番目と 3 番目のスタイルが使用されます。 -.font(.largeTitle)シンボルをより大きなサイズで表示します。

（09:00）foregroundStyle受信したのはShapeStyle。カラー以外にもこんな使い方ができます.secondaryまたは.regularMaterial。これにより、シンボルは、ぼやけた背景や物質的な背景の前でも体系的な外観を維持できます。

import SwiftUI

struct AdvancedForegroundStylesView: View {
    var body: some View {
        VStack(spacing: 20) {
            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)
        }
        .font(.largeTitle)
        .padding()
    }
}

キーポイント:

VStack3 つのボタンを縦に並べた例。
最初のボタンを使用します.whiteそして.red2つの色のレイヤーを設定します。
2番目のボタンを使用します.secondaryスタイルの 2 番目のレイヤーとして、環境の視覚的な階層に従うのに適しています。
3番目のボタンは.regularMaterialスタイルの 2 番目のレイヤーとして、マテリアル効果をシンボルレベルで表示させることができます。 -.font(.largeTitle)全体的に行動するVStack上では 3 つのシンボルを均一に拡大しています。

重要なポイント

やるべきこと: 設定ページまたはアカウントページのすべての項目を意味のあるものにしますLabel。 実行する価値がある理由:Labelタイトルとシンボルはバインドされ、SwiftUI コンポーネントはアイコン、タイトル、またはその両方を状況に応じて表示し、VoiceOver のテキストソースを提供できます。 開始方法:HStack { Image(...); Text(...) }に変更しますLabel("Profile", systemImage: "person.circle")、必要に応じて追加します.labelStyle(...)。
対処方法: タブバーとサイドバーには基本的なシンボル名を使用します。 実行する価値がある理由: SwiftUI はタブバーなどのコンポーネントで適切なバリアントを自動的に選択するため、コードを手動で記述する必要はありません。.fillサフィックスはプラットフォーム間で適応させることもできます。 開始方法:tabItemで使用されるLabel("Cards", systemImage: "rectangle.portrait.on.rectangle.portrait")、直接書くことは避けてください。rectangle.portrait.on.rectangle.portrait.fill。
作業内容: カテゴリリストに複数色のシンボルを追加します。 実行する価値がある理由:symbolRenderingMode(.multicolor)You can use SF Symbols built-in colors to let symbols such as health, weather, and card suits retain their meaning. 開始方法: リストの外に追加します.symbolRenderingMode(.multicolor)、SF シンボルアプリを使用して、ターゲットシンボルがマルチカラーをサポートしているかどうかを確認します。
対処方法: 複雑なツールボタンにはレイヤードモードを使用します。 実行する価値がある理由:symbolRenderingMode(.hierarchical)前景スタイルを使用して、デッキ、レイヤー、機器などの複数の視覚レベルを持つアイコンに適したマルチレベルの透明度を生成します。 開始方法: ボタングループの外に追加します.symbolRenderingMode(.hierarchical)、次に使用します.foregroundStyle(.tint)または.foregroundStyle(.secondary)全体的な配色を制御します。
手順: 背景の形状を使用して、「元に戻す」、「削除」、または「確認」ボタンを作成します。 実行する価値がある理由: パレットレンダリングでは、シンボルの前景と背景のスタイルを個別に指定できるため、モノクロの色合いよりも実際のボタンのデザインに近くなります。 開始方法: を使用しますImage(systemName: "arrow.uturn.backward")、に追加.symbolVariant(.circle.fill)、次に使用します.foregroundStyle(.white, .red)または.foregroundStyle(.white, .yellow, .red)レベルの色を指定します。

SF Symbols in SwiftUI

ハイライト

主な内容

アクセシビリティはシンボルの作成から始まります

バリアントを使用すると、コードでプラットフォームの詳細を少なく書くことができます

レンダリングモードでは、カラールールはシンボルレベルに残ります。

システムシンボルとカスタムシンボルを作成する

画像のみのシンボルにアクセシビリティテキストを追加する

テキストに記号を挿入する

前景のスタイル、フォント、スケーリングで外観を調整する

コンポーネントに自動または手動でシンボルバリアントを選択させます

マルチカラーおよびレイヤードレンダリングモードを使用する

パレットレンダリングを使用してマルチレイヤーカラーを制御する

重要なポイント

関連セッション

コメント

ハイライト

主な内容

アクセシビリティはシンボルの作成から始まります

バリアントを使用すると、コードでプラットフォームの詳細を少なく書くことができます

レンダリング モードでは、カラー ルールはシンボル レベルに残ります。

システム シンボルとカスタム シンボルを作成する

画像のみのシンボルにアクセシビリティ テキストを追加する

テキストに記号を挿入する

前景のスタイル、フォント、スケーリングで外観を調整する

コンポーネントに自動または手動でシンボル バリアントを選択させます

マルチカラーおよびレイヤードレンダリングモードを使用する

パレット レンダリングを使用してマルチレイヤー カラーを制御する

重要なポイント

関連セッション

コメント

レンダリングモードでは、カラールールはシンボルレベルに残ります。

システムシンボルとカスタムシンボルを作成する

画像のみのシンボルにアクセシビリティテキストを追加する

コンポーネントに自動または手動でシンボルバリアントを選択させます

パレットレンダリングを使用してマルチレイヤーカラーを制御する