WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
SwiftUI on iPad: Add toolbars, titles, and more

SwiftUI on iPad: Add toolbars, titles, and more

SwiftUIiPadToolbar
元の動画を見る

ハイライト

iOS 16 および iPadOS 16 では、SwiftUI ツールバーに Mac レベルの機能が追加されました。オーバーフロー メニューの自動折りたたみ、二次アクションの配置、ユーザーがカスタマイズ可能なツールバー、ControlGroup のグループ化、編集可能なナビゲーション タイトルとドキュメントの関連付けにより、iPad アプリケーションのツールバーは単なる iPhone の拡大版ではなくなりました。

主要内容

手動メニューから自動オーバーフローへ

（02:05）

多くの開発者は、iPhone にツールバー ボタンを保存するために「その他」メニューを使用することに慣れています。 iPad の大きな画面では、これにより利用可能なスペースが無駄になります。

iOS 16 の解決策はオーバーフロー メニューです。メニューに配置できないボタンはシステムが自動的に配置し、手動でメニューを作成する必要はありません。

バンドルToolbarItemに変更しますToolbarItemGroup、手動でラップされたメニューを削除し、ボタンをグループのコンテンツとして直接使用します。

PlaceDetailContent(place: $place)
    .toolbar {
        ToolbarItemGroup(placement: .primaryAction) {
            FavoriteToggle(place: $place)
            AdjustImageButton(place: $place)
            AdjustMapButton(place: $place)
        }
    }

重要なポイント:

  • ToolbarItemGroupサブビューごとに個別のツールバー項目が作成されます
  • iPad および Mac では、オーバーフロー メニューに収まらない項目はシステムによって自動的に移動されます。
  • メニュー拡張ロジックを手動で保守する必要はありません

セカンダリ アクションと ToolbarRole

（04:05）

ナビゲーション バーには、先頭 (左)、中央 (中央)、および末尾 (右) の 3 つの領域があります。先頭と末尾はコントロールに使用され、中央はナビゲーション タイトルに使用されます。

iOS 16の新機能.secondaryAction配置。このタイプの操作はあまり頻繁には使用されませんが、単独で説明する価値があります。デフォルトでは、これらはツールバーに直接表示されず、オーバーフロー メニューに表示されます。

使用toolbarRole(.editor)レイアウトの動作を変更します。

PlaceDetailContent(place: $place)
    .toolbar {
        ToolbarItemGroup(placement: .secondaryAction) {
            FavoriteToggle(place: $place)
            AdjustImageButton(place: $place)
            AdjustMapButton(place: $place)
        }
    }
    .toolbarRole(.editor)

重要なポイント:

  • .editorロールはナビゲーション バーに「このページはコンテンツを編集するためのものです」と伝えます。
  • ナビゲーション バーはタイトルを中央から先頭に移動し、中央の領域を二次アクションのために解放します。
  • コンパクトサイズクラス（iPhoneの縦画面など）ではタイトルが中央に残ります

ユーザー定義可能なツールバー

（05:37）

macOS は長い間ツールバーのカスタマイズをサポートしており、iPadOS 16 にもこの機能が導入されています。

カスタマイズを有効にするには、次の 3 つの条件が必要です。

PlaceDetailContent(place: $place)
    .toolbar(id: "place") {
        ToolbarItem(id: "favorite", placement: .secondaryAction) {
            FavoriteToggle(place: $place)
        }
        ToolbarItem(id: "image", placement: .secondaryAction) {
            AdjustImageButton(place: $place)
        }
        ToolbarItem(id: "map", placement: .secondaryAction) {
            AdjustMapButton(place: $place)
        }
    }
    .toolbarRole(.editor)

重要なポイント:

  • それぞれToolbarItemユニークなものがあるはずですid、そして起動間で一貫性を維持します
  • toolbar修飾子自体にも、id
  • のみToolbarItemサポートカスタマイズ、ToolbarItemGroupサポートされていません
  • iPad では、セカンダリ アクションのみがカスタマイズをサポートし、プライマリ アクションはサポートしません。

デフォルトで非表示になっているボタン

（06:59）

一部のアクションは特定のユーザー グループにとって便利ですが、デフォルトでは表示すべきではありません。使用showsByDefault: falseこれらのボタンは、最初はカスタム パネルに留まらせます。

ToolbarItem(id: "share", placement: .secondaryAction, showsByDefault: false) {
    ShareLink(item: place)
}

ユーザーは、そのようなボタンをカスタマイズ パネルからツールバーにドラッグできます。

ControlGroup のグループ化

（07:45）

関連ボタンが利用可能ControlGroupグループ化、全体としての追加または削除:

ToolbarItem(id: "image", placement: .secondaryAction) {
    ControlGroup {
        AdjustImageButton(place: $place)
        AdjustMapButton(place: $place)
    } label: {
        Label("Edits", systemImage: "wand.and.stars")
    }
}

重要なポイント:

  • 供給label最後に、スペースが不十分な場合は、グループ全体がメニューに折りたたまれます。
  • いいえlabelスペースが足りない場合は、ボタンが 1 つずつオーバーフロー メニューに入ります。
  • ユーザーは ControlGroup 全体を 1 つのユニットとして追加または削除できます

詳細

完全なツールバー構成例

PlaceDetailContent(place: $place)
    .toolbar(id: "place") {
        ToolbarItem(id: "new", placement: .primaryAction) {
            NewButton()
        }
        ToolbarItem(id: "favorite", placement: .secondaryAction) {
            FavoriteToggle(place: $place)
        }
        ToolbarItem(id: "image", placement: .secondaryAction) {
            ControlGroup {
                AdjustImageButton(place: $place)
                AdjustMapButton(place: $place)
            } label: {
                Label("Edits", systemImage: "wand.and.stars")
            }
        }
        ToolbarItem(id: "share", placement: .secondaryAction, showsByDefault: false) {
            ShareLink(item: place)
        }
    }
    .toolbarRole(.editor)

重要なポイント:

  • id: "new"使用primaryAction、末尾領域に固定されており、カスタマイズできません
  • id: "favorite"そしてid: "image"使用secondaryActionはデフォルトで中央領域に表示されますが、カスタマイズ可能です
  • id: "share"使用showsByDefault: false、最初はカスタムパネルに隠されています
  • SwiftUI はユーザーのカスタム構成を保持するために ID を使用するため、すべての ID は一意であり、起動間で一貫している必要があります。

ナビゲーション タイトル メニュー

（10:44）

ナビゲーション ヘッダーは、macOS の [ファイル] メニューと同様のメニューをサポートするようになりました。

PlaceDetailContent(place: $place)
    .navigationTitle(place.name) {
        MyPrintButton()
    }

タイトルの右側にメニュー インジケーターが表示され、クリックすると、指定したアクションを含むメニューがポップアップ表示されます。

編集可能なナビゲーション タイトル

（11:07）

Binding を渡すと、このタイトルが編集をサポートしていることがシステムに伝えられます。

PlaceDetailContent(place: $place)
    .navigationTitle($place.name) {
        MyPrintButton()
        RenameButton()
    }

重要なポイント:

  • $place.nameバインディングを渡すと、システムはタイトルが編集可能であることを認識します
  • RenameButton()名前変更プロセスをトリガーする
  • 名前変更ボタンをクリックすると、タイトルが編集可能なテキスト ボックスになります。

関連ドキュメント

（11:37）

ドキュメントをビューに関連付けると、タイトル メニューにドキュメント プレビュー ヘッダーが表示されます。

PlaceDetailContent(place: $place)
    .navigationTitle($place.name) {
        MyPrintButton()
        RenameButton()
    }
    .navigationDocument(place.url)

重要なポイント:

  • タイトル メニューにはドキュメントのプレビューが表示され、ドラッグ アンド ドロップがサポートされます
  • URL を指定すると、ウィンドウ ツールバーのプロキシ アイコンも macOS で自動的に設定されます。
  • パラメーターは次のとおりですTransferableと入力し、URL を直接渡すこともできます

重要ポイント

1.カスタマイズ可能なツールバーをメモ アプリに追加します

  • 内容: ツールバーにどの書式設定ボタンを表示するかをユーザーが決定できるようにします
  • 実行する価値がある理由: ユーザーごとに使い方は大きく異なります。太字をよく使う人もいれば、コードブロックをよく使う人もいます。カスタマイズ可能なツールバーなら、それぞれが自分のワークフローを持てます。
  • 開始方法: toolbar(id:) + ToolbarItem(id:placement:) を使用し、各ボタンに一意の id を割り当て、あまり使わないボタンは showsByDefault: false に設定します

2. ControlGroup ツールバーを画像編集アプリに追加

  • 内容: 回転、切り抜き、フィルターなどの操作を機能ごとにグループ化します
  • 実行する価値がある理由: 関連する操作が視覚的にまとまり、ユーザーが見つけやすくなります。スペースが不足すると、グループ全体がメニューに折りたたまれます。
  • 開始方法: ControlGroup を使用して関連するボタンをまとめ、グループに label を追加して、スペース不足時にメニューへ折りたためるようにします

3.ファイル管理アプリにドキュメントタイトルメニューを追加

  • 操作方法: ナビゲーション タイトルをクリックすると、ファイル操作メニュー (名前変更、移動、共有) が表示されます。
  • 実行する価値がある理由: タイトルはユーザーの目が自然に留まる場所です。よく使用されるファイル操作をここに配置すると、ツールバーに隠すよりも直感的になります。
  • 開始方法: を使用します.navigationTitle($document.name) { ... }タイトルにメニューを追加し、名前変更をサポートするためにバインディングを渡します。

4. iPad 読書アプリのツールバー レイアウトを最適化

  • やるべきこと: を使用しますtoolbarRole(.editor)二次アクションを中央領域に配置します。
  • 実行する価値がある理由: iPad の画面は十分に広いです。ブックマーク、ディレクトリ、フォント設定、その他のボタンを中央に配置すると、それらをすべてオーバーフロー メニューに詰め込むよりもアクセスしやすくなります。
  • 開始方法: 読み取り関連の操作を次のようにマークします。.secondaryAction、プラス.toolbarRole(.editor)、システムはスペースを空けるためにタイトルを自動的に左に移動します。

関連セッション

コメント

GitHub Issues · utterances