ハイライト
macOS Monterey は、Mac Catalyst に 4 種類のネイティブ Mac エクスペリエンスをもたらします。それは、4 つのボタン モード (プッシュ/トグル/プルダウン/ポップアップ)、ツールヒントのホバー プロンプト、印刷メニューの統合、およびウィンドウ サブタイトルであり、iPad アプリケーションを Mac 上のネイティブ アプリケーションに近づけます。
主な内容
ボタンシステムのMac化
Mac ユーザーは、特定のボタン操作方法に慣れています。プッシュ ボタンを押すと実行され、トグル ボタンは状態を切り替え、プルダウン メニューはメニューを展開し、ポップアップ ボタンは選択後にタイトルを変更します。iPad アプリケーションは直接 Mac に移動されるため、ボタンの動作が「間違っている」ことがよくあります。
macOS Monterey は、次の 2 つのプロパティを通じてこの問題を解決します。showsMenuAsPrimaryActionそしてchangesSelectionAsPrimaryAction。4 つのブール値の組み合わせは 4 つのボタン タイプに対応し、必要なコードは数行だけです。
ホバープロンプトが情報のギャップを埋める
Mac ユーザーはインターフェイス要素を見ると、本能的にマウスをホバーしてプロンプトを待ちます。iPad アプリにはこの機能がないため、コントロールの多くは推測する必要があります。
UIToolTipInteraction任意の UIView でホバー ヒントを表示できるようにします。UILabelもサポートしていますshowsExpansionTextWhenTruncated、切り詰められたときにホバーすると全文が表示されます。
印刷およびウィンドウの字幕
印刷は Mac アプリの基本機能です。新しいUIApplicationSupportsPrintCommandplist キーは自動的に [ファイル] > [印刷] メニューを追加します。printContentレスポンダー メソッドは印刷ロジックを処理します。
ウィンドウサブタイトルscene.subtitleウィンドウのタイトル バーにコンテキスト情報を追加します。これは、ナビゲーション バーのタイトルよりも Mac の習慣に沿ったものです。
＃＃詳細
4 つのボタン構成 (02:26)
// Push Button — 標準の押下ボタン
let pushButton = UIButton(type: .system)
// Toggle Button — クリックで選択状態を切り替える
let toggleButton = UIButton(type: .system)
toggleButton.changesSelectionAsPrimaryAction = true
// Pull-down Menu — クリックでメニューを展開する
let pullDownButton = UIButton(type: .system)
pullDownButton.menu = UIMenu()
pullDownButton.showsMenuAsPrimaryAction = true
// Pop-up Button — 選択後にボタンタイトルが追従して変わる
let popupButton = UIButton(type: .system)
popupButton.menu = UIMenu()
popupButton.showsMenuAsPrimaryAction = true
popupButton.changesSelectionAsPrimaryAction = trueキーポイント:
showsMenuAsPrimaryAction = true: 左クリックしてメニューを直接展開します (Mac の習慣)。長押しや右クリックに依存しなくなりました。changesSelectionAsPrimaryAction = true: ボタンのタイトルは、メニューで選択した項目を自動的に追跡します。- 4 つの組み合わせで Mac のすべての標準ボタン タイプをカバー
- Mac イディオムを使用している場合、メニュー設定のないボタンを長押しすることでトリガーできます。 iPad の場合、右クリックしてメニューを起動できます。
ツールヒントをコントロールに追加します (03:50)
// 方法 1: 任意の UIView に ToolTip を追加する
let toolTipInteraction = UIToolTipInteraction(defaultToolTip: "Iguaçu Falls in Brazil")
imageView.addInteraction(toolTipInteraction)
// 方法 2: UIControl に ToolTip をすばやく設定する
let switchControl = UISwitch()
switchControl.toolTip = "Enable automatic updates"
// 方法 3: 省略されたラベルにホバーして全文を表示する
let label = UILabel()
label.text = "Very long title that will be truncated"
label.showsExpansionTextWhenTruncated = trueキーポイント:
UIToolTipInteraction任意の UIView に適用可能、インタラクション オブジェクトを作成する必要がある- UIコントロール
toolTipプロパティはたった 1 行のコードのショートカットです showsExpansionTextWhenTruncatedテキストが切り詰められた場合にのみツールヒントを表示し、インターフェイスをきれいに保ちます
ウィンドウのサブタイトル (06:01)
// scene の接続時にサブタイトルを設定する
func scene(_ scene: UIScene, willConnectTo session: UISceneSession,
options connectionOptions: UIScene.ConnectionOptions) {
scene.subtitle = "Countries"
}
// またはナビゲーションに応じて動的に更新する
func updateSubtitle(for selection: String) {
guard let scene = view.window?.windowScene else { return }
scene.subtitle = selection
}キーポイント:
- サブタイトルはウィンドウのタイトル バーに表示されます。これは、ナビゲーション バーのタイトルよりも Mac の設計仕様に準拠しています。
- 違う
toolbarStyle下部字幕の表示位置が異なるため実験的に調整が必要です。 - 現在選択されている項目またはアプリケーションのステータスコンテキストの表示に適しています
印刷サポート (04:52)
まず Info.plist に追加します。
<key>UIApplicationSupportsPrintCommand</key>
<true/>印刷はレスポンダー チェーンを介して処理されます。
// DetailViewController.swift
override func printContent(_ sender: Any?) {
let printInteractionController = UIPrintInteractionController.shared
// 印刷内容を設定する
printInteractionController.present(animated: true)
}
override func canPerformAction(_ action: Selector, withSender sender: Any?) -> Bool {
if action == #selector(self.printContent(_:)) {
// 現在選択中の内容がある場合だけ印刷を許可する
return selectedItem != nil
}
return super.canPerformAction(action, withSender: sender)
}
// Root SplitViewController で一元的にディスパッチする
override func target(forAction action: Selector, withSender sender: Any?) -> Any? {
switch action {
case #selector(UIResponder.printContent(_:)):
// 業務ロジックに応じて、どの子コントローラーが印刷を処理するかを決める
return currentPrintTarget
default:
return super.target(forAction: action, withSender: sender)
}
}キーポイント:
UIApplicationSupportsPrintCommand[ファイル] > [印刷] および [PDF としてエクスポート] メニュー項目を自動的に追加しますprintContentUIResponder の新しいアクションであり、レスポンダー チェーン ルックアップを通じて実装されます。canPerformAction現在の状態で印刷を許可するかどうかを制御しますtarget(forAction:withSender:)ルートコントローラーでの統合スケジューリングにより強制を回避becomeFirstResponder
iPad のボタン スタイルを維持する (07:34)
Mac イディオムはデフォルトでネイティブの Mac コントロールを使用しますが、場合によっては iPad スタイルのボタン (広い領域の塗りつぶしボタンなど) を維持する必要がある場合があります。
let button = UIButton(configuration: .filled(), primaryAction: nil)
button.configuration?.image = UIImage(systemName: "leaf")
button.preferredBehavioralStyle = .pad
button.configuration?.preferredSymbolConfigurationForImage =
UIImage.SymbolConfiguration(pointSize: 60)
button.changesSelectionAsPrimaryAction = true
button.configurationUpdateHandler = colorUpdateHandlerキーポイント:
preferredBehavioralStyle = .padiPad のレイアウト動作を強制して、ボタンの背景がいっぱいに伸びるようにします- 特定のコントロールでのみ使用され、グローバルな使用は推奨されません
- Mac の 77% 拡大縮小ルールとは異なり、iPad スタイルは元のサイズを維持します。
重要ポイント
- やるべきこと: 既存の iPad メモ作成アプリに Mac Catalyst サポートを追加し、ツールチップを使用してツールバー ボタンの機能をデモンストレーションします。
- 価値がある理由: Mac ユーザーはインターフェイスを理解するためにホバー ヒントに依存しており、ツールヒントを追加すると、アプリが即座にネイティブ Mac アプリに似たものになります。
- 開始方法: 各ツールバー ボタンの設定
toolTipプロパティ、切り詰められたドキュメント タイトルに対して有効showsExpansionTextWhenTruncated
- やるべきこと: Mac 版のファイル管理アプリケーションに印刷機能を追加し、現在選択されているファイル リストの印刷をサポートします。
- 価値がある理由: Mac ユーザーにとって印刷は基本的な機能です。
UIApplicationSupportsPrintCommandplist 設定の 1 行で標準メニューを追加できます - 開始方法: plist キーを追加し、ファイル リスト コントローラーに実装します。
printContentそしてcanPerformAction
- 対処法: 元のセグメント コントロールの代わりに、Mac バージョンの設定アプリのポップアップ ボタンを使用します。
- 実行する価値がある理由: ポップアップ ボタンは Mac の標準コントロールであり、セグメント コントロールよりも省スペースで使いやすいです。
- 開始方法: を使用します
UIButton+changesSelectionAsPrimaryAction = true+showsMenuAsPrimaryAction = trueポップアップボタンの作成
- やるべきこと: Mac ブラウザ/ファイル マネージャーのウィンドウ サブタイトルを使用して現在のパスを表示します。
- 実行する価値がある理由: サブタイトルは、ナビゲーション バーのタイトルよりも Mac の設計仕様に準拠しており、コンテンツ領域のスペースを占有しません。
- 開始方法:
UISceneDelegate中程度の設定scene.subtitle、ナビゲーションが変更されると更新されます
関連セッション
- UIKit ボタン システムの紹介 — iOS 15 の新しいボタン システム、Mac Catalyst ボタン API の基礎
- 優れた Mac Catalyst アプリの品質 — 優れた Mac Catalyst アプリの特徴と最適化の方向性
- Mac Catalyst アプリのインターフェイスを最適化する — Mac Catalyst インターフェイスの最適化に関する詳細なガイド
コメント
GitHub Issues · utterances