WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
SF Symbols in UIKit and AppKit

SF Symbols in UIKit and AppKit

SF SymbolsUIKitAppKitDesign
元の動画を見る

ハイライト

SF Symbols 3 は、UIKit と AppKit にレイヤー化、パレット、およびマルチカラー レンダリング設定を追加します。開発者はシステム シンボルを使用して、スケーラブルでダーク モードに適応し、テキストを埋め込むことができるカラフルなアイコンを作成できます。

主要内容

以前は、UIKit や AppKit で SF シンボルを使用する場合、モノクロのシンボルを追加する方法が最も一般的でした。tintColor。再生ボタン、ナビゲーション バーのアイコン、設定ページのアイコンはすべてこれを行うことができます。この問題は、より複雑なインターフェイスで発生します。ボイスメール アクション ボタンには白のアイコンと赤の背景の両方が必要で、健康カテゴリのアイコンはシステム定義のマルチカラーの外観を維持する必要があり、ホテルのアメニティ ラベルではアイコンをテキスト行内に配置する必要があります。

このようなシナリオでモノクロ シンボルが使用され続ける場合、開発者は多くの場合、ビットマップ リソースに切り替えるか、複数のシンボル名を手動で維持する必要があります。ビットマップは、SF シンボルのサイズ、重さ、動的型付け、およびシステム外観の適応を失います。手作業によるスプライス.circle.fillこのような名前を使用すると、コードと設計草稿との間に断絶が生じやすくなります。

Apple は、SF Symbols 3 でシンボルを 1 次、2 次、3 つのレベルに分割しました。UIKit と AppKit NewSymbolConfigurationカラー設定により、各レイヤーをルールに従って色付けできます。レイヤード モードは単一の色から透明度を取得し、パレット モードは複数の色を明示的に指定し、マルチカラー モードはシンボリックな組み込み色を使用します。

これはインターフェイス上の 2 つの問題を直接解決します。まず、ボタン、リスト、コントロール センターなどのコンポーネントは、システム シンボルを引き続き使用し、色覚を得ることができます。次に、同じ設定セットをサイズ、フォントの太さ、テキスト添付ファイルと組み合わせることができ、イメージ ビュー、ボタン、リッチ テキストでのシンボルの一貫性が維持されます。

モノクロからレイヤードカラーへ

モノクロのシンボルは引き続きデフォルトの動作です。コードを作成するだけですUIImageまたはNSImageをクリックして、ホスティング ビューに色合いまたはアクセント カラーを設定します。再生、戻る、閉じるなど、視覚的なレベルが 1 つしかないアイコンに適しています。

明暗のグラデーションが必要な記号にはレイヤーカラーを使用します。開発者は 1 つの原色のみを提供し、システムはシンボル レイヤーに基づいて透明度の低い 2 次色を生成します。コントロール センターのデバイス アイコンは次のようなものです。統一されたカラー システムが必要であり、主題と詳細の階層も必要です。

カラー パレットにより、ダーク モードでもボタンのデザイン意図を維持できます

ボイスメール インターフェイスの 3 つのアクション ボタンには異なる色が必要です。スピーカー ボタンはテーマ カラーとグレーを使用し、ダイヤル ボタンは白とテーマ カラーを使用し、削除ボタンは白と赤を使用します。モノクロのシンボルのみを使用する場合、ライト モードは正しく見える可能性があります。ダークモードに切り替えると、シンボル内の窪みから背景色が露出し、白いアイコンのデザイン意図が失われます。

パレット モードでは、シンボル レイヤーを明示的な色で塗りつぶします。開発者は、内側のレイヤーを白に固定し、背景または補助レイヤーを白にバインドできます。.tintColorまたは.systemRed。このようにして、インターフェイスのスタイルが変更された場合でも、ボタンは設計案に従って表示されます。

多色のシンボルはシステム定義の色を保持します

健康、天気、カテゴリのアイコンなど、一部のシンボルはすでに色付けされています。 UIKit は、iOS 15 でマルチカラー シンボルをサポートします。開発者は設定を通じて「マルチカラー バージョンを好む」ことを表現し、シンボルがサポートする場合、システムは組み込みのカラーを使用します。

すべてのシンボルが多色をサポートしているわけではありません。 SF Symbols アプリのインスペクターを使用すると、シンボルがサポートしているレンダリング モードを確認できます。フォールバックとしてコードに色合いの色を設定することもでき、これにより、マルチカラーをサポートしていないシンボルでも適切な色が得られます。

詳細

モノクロシンボル: デフォルトの動作は引き続き機能します

(01:52) モノクロ モードには 1 つの色しかなく、通常は画像ビューの色合いまたはアクセント カラーです。これはデフォルトのレンダリング モードであり、追加のモードはありませんSymbolConfiguration。

let playImage = UIImage(systemName: "play")

playImageView.image = playImage
playImageView.tintColor = .systemBlue

キーポイント:

  • UIImage(systemName:)システムシンボルライブラリから作成playアイコン。
  • playImageView.imageシンボルをピクチャ ビューに配置します。
  • playImageView.tintColorモノクロシンボルの色を指定します。
  • モノクロがデフォルトのモードであるため、このコードではカラー構成は作成されません。

レイヤー化シンボル: 1 つの色でレイヤーを生成します

(03:00) レイヤード モードでは、シンボルのレイヤー階層が使用されます。渡された色は 1 次レイヤーに使用され、2 次および 3 次レイヤーでは透明度を下げた派生色が使用されます。

var image = NSImage(systemSymbolName: "ipad.landscape",
                    accessibilityDescription: "iPad")

let config = NSImage.SymbolConfiguration(hierarchicalColor: .label)

deviceView.image = image
deviceView.symbolConfiguration = config

キーポイント:

  • NSImage(systemSymbolName:accessibilityDescription:)AppKit シンボル イメージを作成し、アクセシビリティの説明を提供します。
  • NSImage.SymbolConfiguration(hierarchicalColor:)レイヤードカラーレンダリングをリクエストします。
  • .labelメインカラーとして、システムのテキストの色に応じて動的に変化します。
  • deviceView.symbolConfiguration設定をピクチャービューに適用します。
  • シンボルにレベルが欠落している場合、対応する派生色は使用されません。

イメージ バリアント: コンテナー上の均一なリクエスト形状

(04:13) ボタンは最初に基本的なシンボルで初期化されます。ここではiOS 15のボタン設定APIを利用し、各ボタンの画像を設定に配置しています。

let speakerConfig = UIButtonConfiguration.plain
speakerConfig.image = UIImage(systemName: "speaker.wave.2")

let callConfig = UIButtonConfiguration.plain
callConfig.image = UIImage(systemName: "phone")

let deleteConfig = UIButtonConfiguration.plain
deleteConfig.image = UIImage(systemName: "trash")

キーポイント:

  • UIButtonConfiguration.plain背景なしのボタン構成を作成します。
  • speaker.wave.2、phone、trashは 3 つの基本的なシンボル名です。
  • 各設定では最初に画像のみを指定し、色は後でシンボル設定で処理されます。

(04:44) 画像バリアントはコンテナ ビューに設定できます。バリアントはビュー階層の下に伝播され、内部のイメージ ビューがリクエストを取得します。

actionsView.imageVariant = .circle
actionsView.imageVariant = .circle.fill

キーポイント:

  • .circleリクエストラウンドバリアント、置く必要はありません.circleシンボル名に綴られます。
  • .circle.fill黒丸のバリエーションをリクエストします。
  • 設定は次の場所に配置されますactionsViewオンにすると、コンテナ内の複数のボタン イメージに影響します。
  • シンボルにこのバリアントがない場合は、元のイメージが使用されます。

パレット表記: 各レイヤーの色を明示的に制御します

(05:09) パレット モードは色の配列を受け取ります。色はシンボル レイヤー レベルに適用されます。ここのスピーカー ボタンでは、ビュー ティント カラーとシステム グレーが使用されています。

let config = UIImage.SymbolConfiguration(paletteColors: [.tintColor, .systemGray2])

speakerConfig.preferredSymbolConfigurationForImage = config
speakerButton.configuration = speakerConfig

キーポイント:

  • UIImage.SymbolConfiguration(paletteColors:)パレット構成を作成します。
  • .tintColorこれは、現在のビューの色合いの色に解決される UIKit の動的カラーです。
  • .systemGray2別のレイヤーに固定のシステム グレー色を与えます。
  • preferredSymbolConfigurationForImageシンボル設定をボタン画像に添付します。
  • speakerButton.configurationフルボタン設定を適用します。

(05:40) ダイヤル ボタンには白いシンボルとテーマ色の背景が必要です。パレット モードでは、ダーク モードで中空領域が背景に透けて見えるのを防ぐために、設定に白を書き込むことができます。

let config = UIImage.SymbolConfiguration(paletteColors: [.white, .tintColor])

callConfig.preferredSymbolConfigurationForImage = config
callButton.configuration = callConfig

キーポイント:

  • .white白を使用するレイヤーを明示的に指定します。
  • .tintColor別のレイヤーを、ボタンが配置されているビューのテーマカラーに従わせます。
  • 設定バインディングcallConfigオン、最終的に割り当てられたcallButton。

(05:56) 削除ボタンを押すと、2 番目の色がシステムの赤に変わります。危険な操作の色はビューの色合いに依存しません。

let config = UIImage.SymbolConfiguration(paletteColors: [.white, .systemRed])

deleteConfig.preferredSymbolConfigurationForImage = config
deleteButton.configuration = deleteConfig

キーポイント:

  • .white内側のアイコン領域が白色のままであることを確認してください。
  • .systemRed削除操作のためにシステムを赤色にします。
  • 同じボタン設定プロセスのセットをさまざまな操作に再利用できます。

動的な色合いの色: ビューに従って色を解析できます。

（06:46）.tintColorUIKitの動的カラーです。これは、通常のインターフェイス プロパティだけでなく、シンボル レイヤーでも使用できます。

view.backgroundColor = .tintColor
label.textColor = .tintColor
searchField.tokenBackgroundColor = .tintColor
tabBarItem.badgeColor = .tintColor

キーポイント:

  • view.backgroundColor動的ティント カラーを直接使用できます。
  • label.textColorラベルが配置されている環境の色合いに解決されます。
  • searchField.tokenBackgroundColorそしてtabBarItem.badgeColor同じダイナミックカラーも使用できます。
  • 動的カラーは引き続き UIKit の解析ルールに従います。

マルチカラーシンボル: シンボルの組み込み色の使用を優先します。

(09:03) システム イメージを直接作成してセルに割り当てると、デフォルトのモノクロ レンダリングが得られます。

let image = UIImage(systemName: category.iconName)

cell.imageView.image = image

キーポイント:

  • category.iconNameカテゴリに対応するSFシンボル名を保存します。
  • UIImage(systemName:)シンボル画像の作成のみを担当します。
  • レンダリング設定が設定されていない場合、UIKit はデフォルトのモノクロ モードを使用します。

(09:13) マルチカラー バージョンをリクエストするには、preferringMultiColor画像ビューを設定して割り当てます。マルチカラーをサポートしていないシンボルの場合でも、ティント カラーはフォールバック カラーを提供します。

let image = UIImage(systemName: category.iconName)

let config = UIImage.SymbolConfiguration.preferringMultiColor

let tintColor = category.colorForIcon

cell.imageView.image = image
cell.imageView.preferredSymbolConfiguration = config
cell.imageView.tintColor = tintColor

キーポイント:

  • UIImage.SymbolConfiguration.preferringMultiColor優先的にマルチカラー レンダリングの使用をリクエストします。
  • category.colorForIcon現在のカテゴリにフォールバックの色合いを提供します。
  • preferredSymbolConfiguration画像ビューに多色設定を適用します。
  • tintColor単色のフォールバックに影響しますが、ティント レイヤーを含む複数色のシンボルにも影響します。
  • シンボルがマルチカラーに対応しているかどうかは、SF Symbols アプリのインスペクターで確認できます。

結合構成: サイズと色を 1 つの構成に結合します。

(12:40) イメージ ビューに適用できるシンボル設定は 1 つだけです。サイズと色を同時に制御するには、まず複数の構成を作成してから、applyingマージ。

let image = UIImage(systemImage: "ipad.and.iphone")
headerView.image = image

let fontConfig = UIImage.SymbolConfiguration(pointSize: 60, scale: .large)
let colorConfig = UIImage.SymbolConfiguration(hierarchicalColor: .systemBlue)
let config = fontConfig.applying(colorConfig)

headerView.preferredSymbolConfiguration = config

キーポイント:

  • UIImage(systemImage:)作成するipad.and.iphoneシンボル絵。
  • fontConfig60ポイントサイズと大縮尺を指定します。
  • colorConfigレイヤーカラーの主色がシステムブルーであることを指定します。
  • fontConfig.applying(colorConfig)サイズと色の両方を含む新しい構成を生成します。
  • headerView.preferredSymbolConfiguration最終構成を適用します。

リッチ テキスト シンボル: 属性付き文字列に色付きのシンボルを埋め込む

(13:20) 色付きのシンボルをテキスト添付ファイルとして配置できますNSAttributedString。典型的なシナリオは、ホテルの部屋のアメニティのリストです。テレビのアイコンとテキストを同じ行に入力する必要があります。

let amenitiesString = NSMutableAttributedString(...)

if (room.amenities.contains(.tv)) {
    let config = UIImage.SymbolConfiguration(
                         hierarchicalColor: .systemGreen)
    let tvImage = UIImage(systemImage: "tv",
                          withConfiguration: config)

    let attachment = NSTextAttachment(image: tvImage)
    let attachmentString = NSAttributedString(attachment:
                                               attachment)
    let tvString = attachmentString.mutableCopy()
    tvString.append(NSAttributedString(" TV, "))

    amenitiesString.append(tvString)
}

キーポイント:

  • NSMutableAttributedString(...)最終的に表示されるリッチ テキストを保存します。
  • room.amenities.contains(.tv)部屋にテレビ設備があるかどうかを確認します。
  • UIImage.SymbolConfiguration(hierarchicalColor:)緑色のレイヤー化レンダリングを TV シンボルに割り当てます。
  • UIImage(systemImage:withConfiguration:)設定済みのシンボル イメージを作成します。
  • NSTextAttachment(image:)画像をテキスト添付ファイルに変換します。
  • NSAttributedString(attachment:)添付ファイルをリッチ テキスト スニペットにラップします。
  • tvString.appendアイコンの後にテキストを追加します。
  • amenitiesString.appendこの段落を施設の完全なリストに追加します。

(13:51) リッチ テキストを表示するラベルでは、フォントとテキストの色を設定する必要があります。モノクロのシンボルでは、テキストの色が自動的に使用されます。カラー構成を持つシンボルでは、構成内で色を明示的に指定する必要があります。

let amenitiesLabel = UILabel()

amenitiesLabel.textColor = .systemGreen
amenitiesLabel.font = UIFont.systemFont(ofSize: 25)

amenitiesLabel.attributedString = amenitiesString

キーポイント:

  • UILabel()施設のテキストを表示するラベルを作成します。
  • textColorテキスト部分のシステム使用を緑色にします。
  • font25 ポイントのシステム フォントを設定すると、シンボルの添付ファイルは文字列内のフォント サイズに従います。
  • attributedString前に作成したリッチ テキストをラベルに与えて表示します。

重要ポイント

  1. 対処方法: 設定ページの各項目にステートフル SF シンボルを追加します。 実行する価値がある理由: レイヤード モードではテーマ カラーを使用して有効な状態を表現でき、パレット モードでは白と赤を使用して危険な操作を表現できます。 開始方法: セルの画像ビューに設定しますpreferredSymbolConfiguration、通常のアイテムの場合UIImage.SymbolConfiguration(hierarchicalColor:)でアイテムを削除しますUIImage.SymbolConfiguration(paletteColors:)。

  2. 対処方法: 通話、音声、削除などの操作ボタンを丸塗りの記号に変更します。 実行する価値がある理由: イメージのバリエーションをコンテナ レベルで均一にリクエストできる.circle.fillを使用すると、コードで複数のシンボル名を手動で管理する必要がなくなります。 開始方法: ボタンコンテナに設定しますimageVariant、そしてそれぞれを与えますUIButtonConfiguration別の設定preferredSymbolConfigurationForImage。

  3. やるべきこと: システムのマルチカラー アイコンと単色のフォールバックをカテゴリ リストに追加します。 実行する価値がある理由: マルチカラー シンボルは、Apple がシンボル用に設計した色を保持できます。マルチカラーをサポートしていないシンボルでも、ティント カラーを通じてカテゴリの色を維持できます。 開始方法: 作成するUIImage.SymbolConfiguration.preferringMultiColorに設定しますcell.imageView.preferredSymbolConfiguration、設定を同期しますcell.imageView.tintColor。

  4. やるべきこと: ホテル、ショッピング、健康記録などのテキスト説明にカラフルな施設アイコンを埋め込みます。 実行する価値がある理由:NSTextAttachmentリッチテキストにSFシンボルを入れると、文字サイズに合わせてシンボルが表示されます。 開始方法: ベルトを使用しますhierarchicalColorのUIImage作成するNSTextAttachment、添付ファイルをパッケージ化しますNSAttributedStringに追加するNSMutableAttributedString。

  5. やるべきこと: 大きな空のステータス ページまたはヘッダー用に、レイヤー化されたイラスト スタイルのアイコンを作成します。 実行する価値がある理由:applyingポイント サイズ、スケール、色を 1 つの構成に組み合わせることができ、アイコンでは引き続きさまざまなサイズの SF シンボルが使用されます。 開始方法: まず作成しますUIImage.SymbolConfiguration(pointSize:scale:)、再度作成しますUIImage.SymbolConfiguration(hierarchicalColor:)、使用fontConfig.applying(colorConfig)結合後、イメージビューに割り当てます。

関連セッション

  • SF Symbols の新機能 - SF Symbols 3 の新しいシンボル、カラー レンダリング モード、およびカスタム シンボルの注釈について説明します。
  • カスタム シンボルの作成 — カスタム シンボルのレイヤー、パレット、マルチカラー モードを描画して注釈を付ける方法を学びます。
  • SF Symbols 3 アプリを探索する — SF Symbols アプリを使用して、サポートされているレンダリング モードを確認し、シンボルのカラー効果をプレビューします。
  • SwiftUI の SF シンボル — SwiftUI で同じ SF シンボルのカラー機能セットを使用します。

コメント

GitHub Issues · utterances