UIKitとAppKitにおけるSF Symbols

SF Symbols 3 でカラー化されたシンボルを作成し、Appのインターフェースのビジュアルデザインに合わせてカスタマイズする方法を説明します。カラー化されたシンボルを統合するための最新のUIKit APIとAppKit API、および実装のためのベストプラクティスを紹介します。このセッションを最大限活かしていただくためには、WWDC19の「SF Symbolsの紹介」をご確認いただくことをお勧めします。

リソース

関連ビデオ

WWDC21

ダウンロード

こんにちは！私 Tomが「UIKitとAppKitにおけるSF Symbols」をお届けし App内でSF Symbolの新機能を活用する方法を伝授しますまずは色に関する設定とその活用法をご紹介します次に設定を組み合わせて自在な演出をする方法最後はカラーシンボルを属性付き文字列と併用してみますなお新APIはAppKit UIKitで共通なので説明する手順はフレームワークの微妙な誤差を除き双方に対応しています新機能はSF Symbolsの色付けに関わり macOS11でAppKitがマルチカラーを加えた後 iOS 15でUI Kitも追随します今年はSF Symbolsのレンダリングに新モードが加わり全てのプラットフォームに対応しています新しいレンダリング方式はデザインのレイヤーごとに色を変えるものでこのレイヤーはヒエラルキーつまり階層ごとに役割が決まります 1:primary 2:secondary 3:tertiaryの３つのレイヤーがあり

iOSで新仕様を使う際は専用のテンプレートでデザインします macOSの場合は自動的に正しいテンプレートが選ばれます

SF Symbolsについては「Introducing SF Symbols」を 2019年版にてご覧ください最初に見ていくレンダリング方式は単色シンボルですこれは「ボイスメール」 UI上にシンボルがいくつかあります単色のシンボルが一つ他の方式のシンボルもいくつかありますがまずは単色シンボルを勉強し他のシンボルは後に残しましょう

名前の通り単色シンボルは一色のみでパステルやアクセント色が多いです単色シンボルを配置するには新しいシンボルを作成イメージビューにして Tintかアクセント色に設定これは以前と変わらず単色がデフォルトなので追加設定も必要ありません iOS15 macOS11以前は単色が唯一のレンダリング方式でした色を設定するにはイメージビューより Tintやアクセントを選択するのみ既存の単色モードはこれでよしとして新モードの階層モードを見ていきます Macで使われている階層シンボルとしてはコントロールセンターのアイコンがいい例で複数の箇所で使っていますが「ディスプレイ」のものを見ていきましょう

中央のスイッチやデバイス一覧のアイコンなどいくつも使用されていますデバイスはスイッチに比べアイコンの濃度が高いこれが階層の効果です

階層モードはレイヤーに割り当てた階層から色を決め第一レイヤーの色は設定のまま第二第三レイヤーになると同じ系統色を維持しつつ濃度を徐々に下げるのです

階層など色付けのモードは現行の設定と同系統の設定方法を利用し imageViewにて画面通り設定をすればシンボルは階層色になります階層色のカラースキームは一つの色を基にしておりそこから濃度を下げて他の階層の色としますレイヤーの割り当ては重要で１つ欠けている場合そのレイヤーの色は使用されません

さらにパレットという色付け方式もあり階層モードと似ていますが異なる点もあります「ボイスメール」を例としましょう右側のボタンはどれも複数色で互いに違う色になっています手順を踏み複製してみましょう

目当てのシンボルをまずは初期化し新しいボタン設定を作成しますでもこのシンボルだけでは不十分です円の中に配置し色を塗る必要があります

以前は修飾子をシンボルに追加して行いましたが今はイメージバリアントが主流イメージバリアント使用の際は手動でシンボル名を変更せずにイメージの類型をリクエストできますまずシンボルを円で過去み

円の中を塗りつぶします

ボタンコンテナビューで類型をN読み込んでいるためすべてのボタンに修飾が加わります類型がない場合は元々のシンボルが使用されます類型についての指定は階層を下って伝達されイメージビューに働きかけます

シンボル自体は準備OK でもシンボルの色はどう指定するのでしょうまずはパレットの色を指定する新たなシンボル設定を作成階層モードと同様階層に色が割り当てられますがここは濃度を変えた派生色でなくあらかじめ指定した色を使いますまたパレットの色に Tintという新種の色を使いますがビューは自動的にTintカラーを適切なレイヤーに割り当てます

次のボタンも同じ要領ですベースのシンボルを読み込み色を決めボタン設定に適用しますこれで見本と同じように見えますが後に述べる通りまだ不十分です

最後のボタンも色が違うだけで同じパターンでもなぜわざわざ「白」と指定するのでしょう単色シンボルを使い一色で塗ってもいいのでは？答えは「ノー」です以前不十分だと述べた理由でもありますシンボルの内側は白だと決まっている場合今までは単色モードでも偶然正しい色に反映されていましたでもそれはライトモードだからダークモードにすると単色シンボルは使えません単色の場合内側部分は抜き = アウトラインとなり背景色が抜けて表示されてしまいますパレットモードを使えばどんなUIでも統一されたシンボルを表示できます

tintColorという新色を紹介しましたがこれはビューの色のTintで解決するものでレイヤーの色を指定する際特に役立ちますまた色付け可能ならどのような環境でも使うことができますダイナミックカラーについての規則は依然適応されますが

ダイナミックカラーについてはWWDC19の「iOSのダークモード」に詳しくありますではレイヤーが２つしかない例えば第２レイヤーがないシンボルの場合パレットをどう適応するのでしょう

第一レイヤー第三レイヤーのみのデバイスシンボルがいい例です

iPadシンボルを二色で埋めるわけですがそれでも３レイヤー分色を割り当てることが可能です

第二レイヤーがないためここでは第二色を使いませんただ終始２レイヤーしかないシンボルの場合は設定で２色のみ設定し二つのレイヤーに階層順で色を割り当てられます

それでもレイヤーの数がバラバラな場合は３色設定の方が正確に色を割り当てられるためおすすめです

２色指定は２レイヤーのみのシンボルなら簡便になりおすすめです

パレットモードはシンボルの階層ごとに使う色を自分で設定する点が階層モードと異なり派生色を割り当てることはありませんただ階層モードと同様にレイヤーの階層は大事になります３レイヤー以下のシンボルの場合簡便なモードが他にあり今からご紹介するマルチカラーが当たります前述の通りこのモードは昨年AppKitとSwiftUIに導入され UIKitには今年導入しました

複数色のシンボルが使われていますねこれがマルチカラーです配置に取り掛かりましょう

まずはセルごとにイメージを読み込みますただ今は初期状態で単色シンボルがデフォルトです

マルチカラーシンボルを指定するにはマルチカラーの類型をリクエストしビューに割り当てる以上の設定を行います

でも無変化のものもありこれはマルチカラーに未対応だからです対応・未対応を確認するにはどうするのでしょう SF Symbols Appを開けばこれは簡単シンボルを検索しインスペクタでシンボルの対応するモードを確認します例えば「flame」は単色のみ対応「lung 肺」は４モード全てに対応しています

またここで加工をすればプログラムなしでもシンボルの見た目が分かるようになります例に戻りましょう

マルチカラー未対応の場合 tintColorを手動で設定しシンボルを直します

マルチカラーシンボルにはダイナミックカラーを使うため背景色に影響されるものがあり逆にそれ以外は影響されません例ではダイナミックカラーが未使用なので無影響です

設定名から分かるようにマルチカラー設定はマルチカラー限定でなく優先という意味で未対応シンボルに配慮していますマルチカラー設定を他の設定と合わせることも可能でこれは後ほど説明しますマルチカラーの場合対応するシンボルはマルチカラー未対応のシンボルは他のモードになります階層・パレットモードを組み合わせると効果が相反するのでその場合後付けの方が適用されますこのモードも\未対応の場合は単色モードを使います

マルチカラーで割り当てた色はプログラムでは改変ができず tintなどダイナミックカラーを使いレンダリングする部位も存在し得ますダイナミックカラーの場合加工は不要表示の際ビューを踏まえ色が自動的に決まります

４つの色設定とコード上の操作については以上ですではInterface Builderでも使えるか嬉しいことにその通りです XcodeはIDEのレンダリングを似た方式で導入しています

Planets Appのストーリーボードですが色のレンダリング方式が指定できるよう拡張されましたまた新しい色付け設定は過去の設定と併用可能です IBの新仕様については「スタイルによるインタフェース構築」に詳しくあります色付けのモードを一つ一つ扱ってきましたが他の設定との併用は可能でしょうかこれは幸い簡単にできますショートカットAppにて例を見ていきましょうアイコンは通常より大きくなりレンダリングは階層モードのようですなのでポイント数の設定と色付けの設定の双方が必要となります

しかし１つのみが適応可ですどう融合するのでしょう実は簡単な方法があり二つの設定をまとめながら双方の内容の維持が可能になります

この例ではポイント数指定と階層色指定の２つの設定を作成し

applyingメソッドで組み合わせたものを最終的な設定としますイメージビューに適用されきちんと作用していると分かりますこの手順は色の設定に限らずフォントとウェートを設定したりと応用自在です

設定の混合についてでした最後の題目は属性付き文字列との併用ですこの架空のAppはホテルとその空き情報をまとめるものでテキストとシンボルを組み合わせた部分がありますまずはアメニティー欄にテキストを入力しましょう単純ですが少し複雑かもしれません属性付き文字列を作ってから

色を設定しシンボルを読み込みます今回は階層モードを使用します

このシンボルを使いアタッチメントを作成これで文字列を仕上げますアメニティごとに繰り返しますテキストが載る項目では正しいフォントと階層モードで指定した色を指定します

単色の場合自動的に選択できますが多色シンボルの場合は色を指定しなければなりませんただ文字のサイズは単色同様自動的に選択します

これを行うと色・大きさ・内容が思い通りになります文字列とのマッチングのおかげです

今年は単色の色モードに加え３モードをSF Symbolsに導入 Appでの活用法をご紹介しスマートなアイコン表示を可能としました色付きシンボルはさらに世界を拡げるものです

この動画をお楽しみいただいたら関連題材を扱った「SF Symbolsの新機能」で新仕様の一望をまた「SwiftUIにおけるSF Symbols」で SwiftUIにおける活用法をご覧になれますご視聴ありがとう！ App造り応援します！ [陽気な音楽]

1:52 - Monochrome symbols

// Play

let playImage = UIImage(systemName: "play")

playImageView.image = playImage 
playImageView.tintColor = .systemBlue

3:00 - Hierarchical symbols

// Device image

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

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

deviceView.image = image
deviceView.symbolConfiguration = config

4:13 - Setup button configurations

// Initialize button configuration

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")

4:40 - Image variants

// Button container view

actionsView.imageVariant = .none

4:44 - Image variants

// Button container view

actionsView.imageVariant = .circle

4:51 - Image variants

// Button container view

actionsView.imageVariant = .circle.fill

5:09 - Speaker button color configuration

// Speaker button color configuration

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

speakerConfig.preferredSymbolConfigurationForImage = config
speakerButton.configuration = speakerConfig

5:40 - Call button color configuration

// Call button color configuration

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

callConfig.preferredSymbolConfigurationForImage = config
callButton.configuration = callConfig

5:56 - Delete button color configuration

// Delete button color configuration

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

deleteConfig.preferredSymbolConfigurationForImage = config
deleteButton.configuration = deleteConfig

6:10 - Colors matter

// Colors matter!

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

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

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

6:46 - Tint color

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

9:03 - Multicolor symbols

// configure table view cell

let image = UIImage(systemName: category.iconName)

cell.imageView.image = image

9:13 - Multicolor symbols

// configure table view cell

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

9:58 - Multicolor symbols

// configure table view cell

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

12:25 - Combining configurations

// combined configuration

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

12:40 - Combining configurations

// Combined configuration

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

13:20 - Symbols in attributed strings

// Hotel amenities

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)
}

13:51 - Symbols in attributed strings

// hotel amenities

let amenitiesLabel = UILabel()

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

amenitiesLabel.attributedString = amenitiesString

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