WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Adopt the new look of macOS

Adopt the new look of macOS

WWDC 2020macOSAppKitSF Symbols
元の動画を見る

ハイライト

macOS Big Sur の AppKit は、Mac アプリの外観を自動的に更新し、フルハイトのサイドバー、toolbarStyle、NSSearchToolbarItem、NSTrackingSeparatorToolbarItem、ラージ コントロール、および SF Symbols API を提供して、開発者が新しいデザインに積極的に適応できるようにします。

主要内容

Big Sur 以前は多くの Mac アプリが使用されていましたNSSplitViewController、NSToolbar、NSOutlineViewそして標準的なコントロール。システムの外観が更新された後、このタイプのアプリは最初にいくつかの自動変更を取得できます。ツールバーのマテリアルが消え、ホバー時にコントロールの境界線が表示され、サイドバーのアイコンがアクセントカラーを使用し始め、リストの選択スタイルも更新されます。

自動更新ですべての問題が解決されるわけではありません。アプリが本当に Big Sur に適合できるかどうかは、ウィンドウ構造によって決まります。サイドバーはタイトル バーの下まで拡張できる必要があり、ツールバーのタイトルとナビゲーション項目は適切な位置を見つける必要があり、検索ボックスは狭いウィンドウ内で使用可能なままにしておく必要があり、分割ビューの分割線はツールバー項目と位置合わせする必要があります。これらでは、開発者が既存の構造を調べて、Big Sur の新しいまたは強化された AppKit API を採用する必要があります。

このセッションのルートは非常に明確です。まずウィンドウをシステムが期待する構造に設定し、次にコントロール、リスト、テキスト、アイコンを処理します。このパスでは、開発者が Mac アプリを書き直す必要はありません。標準の AppKit コンポーネントが外観の詳細を処理し、開発者はいくつかの主要な適応ポイントに焦点を当てます。

詳細

1. サイドバーをウィンドウ構造の一部にする

（02:05）

Big Sur のフルハイトのサイドバーは既存の構造に依存しています: サイドバーの使用法NSSplitViewController、に対応NSSplitViewItemサイドバーの動作として構成され、ウィンドウはfullSizeContentViewマスクを使用すると、タイトル バーが元々占めていた領域にコンテンツをレイアウトできるようになります。macOS Big SurはまだありますNSView安全領域を公開するために、Interface Builder は安全領域レイアウト ガイドを追加することもできます。

サイドバーのアイコンには、デフォルトでシステムのアクセントカラーが使用されます。プライマリ グループとセカンダリ グループを区別する必要がある場合は、次のように渡すことができます。NSOutlineViewDelegate戻るNSTintConfiguration。

func outlineView(_ outlineView: NSOutlineView, tintConfigurationForItem item: Any) -> NSTintConfiguration? {
  if case let sectionItem as SectionItem = item {
    /*
       This outline view uses a type called "SectionItem" to populate its top-level sections.
       Here we choose a tint configuration based on a hypothetical `isSecondarySection` property on that type.
     */
    return sectionItem.isSecondarySection ? .monochrome : .default
  }
  // For all other cases, a return value of `nil` indicates that the item should inherit a tint from its parent.
  return nil
}

キーポイント:

  • outlineView(_:tintConfigurationForItem:)これはセッションで言及された新しいデリゲート メソッドで、サイドバー項目の色合いを制御するために使用されます。
  • .defaultメイングループに適したアクセントカラーを使用します。
  • .monochromeカラーアクセントを削除し、二次セクションに収まります。
  • 戻るnilの場合、各ノードの構成の繰り返しを避けるために、項目は親の色合いを継承します。

2.toolbarStyle、検索項目、および追跡区切り文字を使用して、新しいツールバーに適応させます

（05:47）

NSWindow.toolbarStyleBig Sur の新しいツールバーの外観を制御します。セッションでは、統一、統一コンパクト、優先、拡張、自動が導入されています。 Unified は、ほとんどのウィンドウの新しい標準です。統一されたコンパクトは、コンテンツ優先のウィンドウと混雑していないツールバーに適しています。優先順位は採用に自動的に使用されますNSTabViewControllerツールバータブスタイルの設定ウィンドウ。 Expanded では、ツールバーの上にタイトルが表示される古いレイアウトが保持され、長いタイトルや多くのツールバー項目があるウィンドウに適しています。

検索ボックスには専用のNSSearchToolbarItem。ウィンドウの幅が十分に広い場合は、完全な検索フィールドが表示されます。ウィンドウが狭くなった場合は、ボタンに折りたたまれ、クリックすると展開されます。

var searchItem = NSSearchToolbarItem(itemIdentifier: searchIdentifier)
searchItem.searchField = searchField

キーポイント:

  • NSSearchToolbarItem通常のツールバー項目を置き換え、Big Sur の検索の折りたたみ動作を担当します。
  • 既存の再利用を継続するsearchFieldに割り当てますsearchField財産。
  • セッションは、Interface Builder も検索項目を提供し、古いシステムは標準の検索フィールドにフォールバックすることを明示的に示しています。

（13:30）

メールなどのアプリのツールバー項目は、分割ビューの分割線に合わせて配置されます。ビッグサー向けNSTrackingSeparatorToolbarItemこれを実行します。項目を分割ビューとディバイダー インデックスにバインドすると、ツールバーはディバイダーの位置に従います。

var trackingItem = NSTrackingSeparatorToolbarItem(itemIdentifier: identifier,
                                                  splitView: splitView,
                                                  dividerIndex: 1)

キーポイント:

  • splitViewウィンドウ内の分割ビューを指します。
  • dividerIndexトレースする分割線を指定します。
  • この項目は、ツールバーをコンテンツ領域と一致する段落に分割し、ボタンがどのペインに作用するかをユーザーが理解しやすくすることができます。

3. コントロール、リスト、テキストも Big Sur メトリクスに従う必要があります

（16:03）

標準コントロールは Big Sur で自動的に新しい外観になります。このセッションでは、カスタム アクセント カラー、大きなコントロール、スライダー、テーブル ビューのレイアウト メトリックという、チェックする必要がある 3 種類の変更を具体的に思い出させます。

カスタム アクセント カラーはアセット カタログで定義され、プロジェクト エディタで名前が付けられます。システム環境設定でマルチカラーが選択されている場合にのみ有効になります。これらの色はユーザーが選択したアクセントの好みに従うため、開発者は引き続き名前付きシステム カラーを使用してインターフェイスを描画する必要があります。

（18:39）

大きなコントロールが標準になるcontrolSize。オンボーディングの大きなボタン、ツールバーの大きなアイコン ボタン、アラートでの強調表示操作はすべて、自己描画コントロールの代わりにシステム サイズを使用できます。

let button = NSButton(title: "Get Started",
                      target: self,
                      action: #selector(finishOnboarding(_:)))
button.controlSize = .large

キーポイント:

  • NSButton(title:target:action:)標準の AppKit ボタンを作成します。
  • targetそしてactionAppKit のイベント ディスパッチ モデルを維持します。
  • button.controlSize = .largeBig Sur の新しい大きなコントロール サイズを使用して、ボタンをシステム テーマに一致させます。

（20:21）

NSTableView新しいstyle、automatic、fullWidth、inset、sourceList を含みます。自動は設定に従って解析されます。sourceList はサイドバーで使用され、fullWidth は境界付きスクロール ビューで使用され、inset は他のシーンでデフォルトで使用されます。移行するときは、セル ビューの水平方向のパディング、行の高さ、複数列の間隔、および古いsourceList選択の強調表示スタイルを確認してください。

4. SF シンボルが Mac に導入され、テキスト ベースラインとともに処理されます

（23:10）

Big Sur は SF シンボルを macOS にもたらします。AppKit は 2,500 を超える組み込みシンボル イメージにアクセスでき、カスタム シンボルも使用できます。ツールバー コントロールは、シンボルのサイズとスタイルを自動的に構成します。サイドバーのシンボルのサイズとスタイルは自動的に構成されます。NSOutlineViewテキストとシンボルは両方とも、システムの優先サイドバー サイズに従って拡大縮小されます。

システム シンボルを作成する場合、セッションにはアクセシビリティの説明が必要です。シンボル名は、セマンティクスではなく、グラフィックスを説明します。

/*
  Symbol image names are literal descriptions of the symbol glyph, so we must
  include an accessibility description to provide semantic meaning to the image.
 */
let newFolderImage = NSImage(systemSymbolName: "plus.rectangle.on.folder"
                             accessibilityDescription: "New Folder")

キーポイント:

  • NSImage(systemSymbolName:accessibilityDescription:)これは、AppKit がシステム シンボルにアクセスするための入り口です。
  • "plus.rectangle.on.folder"グリフの形状を説明します。
  • "New Folder"このアイコンのアクションを表現するためのアクセシビリティを可能にするセマンティクスを提供します。
  • セッションを最初に使用することをお勧めしますNSImageViewシンボルのフォント、スケール、表示スケール、およびベースラインの配置を解決するため、シンボルを表示します。

（25:13）

手動でシンボルを調整する必要がある場合は、NSImageViewシンボルのフォントとスケールを指定します。構成をイメージに書き込む必要がある場合は、次のように使用できます。withSymbolConfigurationサイズ、重さ、スケール、またはテキスト スタイルを使用して新しいものを作成しますNSImage。セッションは使用しないように通知することもありますNSImageそれらをレイヤーのコンテンツに直接詰め込みます。シンボルはコンテキストを失い、ぼやける傾向があり、正しく配置するのが困難です。

重要ポイント

  • プロジェクトベースのアプリをフルハイトのサイドバーに変更: 対処方法: ファイル管理、メモ、電子メール、データベース クライアントなどのアプリのメイン ナビゲーションをフルハイトのサイドバーに移行します。実行する価値がある理由: セッションでは、Big Sur によってサイドバーとタイトル バーが統一されたウィンドウ構造を形成することが明確に述べられています。開始方法: を使用しているかどうかを確認するNSSplitViewControllerとサイドバーの動作を有効にしてから、fullSizeContentView、最後に安全領域を使用してコンテンツのレイアウトを修正します。

  • 狭いウィンドウでも検索ボックスを利用できるようにする: 対処方法: ツールバーの通常の検索フィールドを次のフィールドに置き換えます。NSSearchToolbarItem。実行する価値がある理由: ユーザーがウィンドウを縮小すると、検索はツールバーから押し出されるのではなく、ボタンに折りたたまれます。始め方：すでに持っているものをそのままにしておくNSSearchField、作成するNSSearchToolbarItem、検索フィールドを割り当てるsearchField財産。

  • 分割ビュー トラッキングを使用してペイン レベルのツールバーを作成します: 手順: サイドバー、リスト、および詳細領域のそれぞれに、視覚的に位置合わせされたツールバー セクションを配置します。実行する価値がある理由:NSTrackingSeparatorToolbarItem分割ビューの分割線に従い、ユーザーはボタンの範囲を決定できます。開始方法: 各ディバイダにトラッキング項目を作成し、サイドバーの上に配置する必要があるツールバー項目をセパレータの前に配置します。

  • オンボーディング ボタンとメイン アクション ボタンを大きなコントロールに置き換えます: 対処方法: 自分で描画した CTA を標準の大きなボタンに置​​き換えます。やる価値がある理由: 大規模controlSizeBig Sur システムのテーマに一致し、ホバー モード、無効モード、およびダーク モードでの自己描画ボタンの歪みを回避します。開始方法: 既存のターゲット/アクションを保持し、キー ボタンのキーを変更します。controlSizeに設定.large、元の最小/最大サイズの制約を確認します。

  • アプリのシンボルとテキスト システムを統合: 対処方法: ツールバー、サイドバー、および空のステータス アイコンを SF シンボルに置き換えます。これを実行する価値がある理由: シンボルはフォント サイズ、太さ、スケール、サイドバーのサイズに従い、Big Sur のテキスト階層との一貫性が高まります。開始方法: 使用するNSImage(systemSymbolName:accessibilityDescription:)を使用してアイコンを作成しますNSImageView各シンボルのセマンティック アクセシビリティの説明を表示し、追加します。

関連セッション

  • Mac Catalyst アプリのインターフェイスを最適化する — Xcode の Optimize Interface for Mac を使用して、Mac Catalyst アプリに Mac のイディオム、Mac コントロール スキン、テキスト サイズ、およびシステム間隔を採用させます。
  • Mac Catalyst の新機能 - ライフサイクル、拡張機能、Mac モード用に最適化された機能、macOS の新しい外観など、2020 年の Mac Catalyst アップデートを紹介します。
  • SF Symbols 2 — SF Symbols 2 が AppKit、UIKit、SwiftUI でどのように使用されるか、配置、色、およびローカリゼーションの更新について詳しく説明します。
  • UI タイポグラフィの詳細 - インターフェイスでの San Francisco フォント、システム テキスト スタイル、ダイナミック タイプ、カスタム フォントの使用の詳細を説明します。

コメント

GitHub Issues · utterances