iPadのSwiftUI：ツールバーやタイトルなどを追加する

SwiftUIでiPad Appのツールバーを調整する用意はよろしいでしょうか。iPadのスペースを活用できるようツールバーを構造化する方法や、ユーザーが自身の生産性を最大限に高められるようにする方法を紹介します。また、カスタマイズ化や、ドキュメントの表示方法などに関する最新情報についても解説します。これは、2部構成シリーズの後半セッションになります。この動画を最大限に活用するには、「iPadのSwiftUI：インターフェイスをオーガナイズする」からご覧ください。

リソース

関連ビデオ

WWDC23

より優れたドキュメントベースのアプリを構築

WWDC22

ダウンロード

SwiftUIチームのエンジニア Harryです SwiftUI on iPadシリーズの第２部へようこそ第１部ではRajがリストと表やセレクションやSplit Viewで iPadの大きいスクリーンとインプットデバイスを使い Appを向上させる方法をお話ししましたご覧でないならそちらから始めることをお勧めします Rajが素晴らしい「Places」Appを作成しましたそこに機能を足そうと思いますそこでこのセッションでは僕の大好きなツールバーに焦点を当てます SwiftUIはToolbar APIでさまざまなシステムバーを設計でき iOSのナビゲーションバーや下部のバー macOSのウインドウツールバーがその例ですツールバーはよく使用する機能への近道を提供しますいいツールバーはユーザーの生産性を向上します

ツールバーのことを考えていましたが PlacesでiOS 16の新しいツールバー機能を使用できます iPadでどんなことが可能になるか僕の作ったものを少しお見せしましょう

これがPlaces Appの完成品です

新しい機能として左揃えのナビゲーションタイトルやタイトルメニューにタイトルメニューヘッダ中央揃えのツールバーがあります Macを使うなら見慣れた機能であるツールバーカスタマイゼーションはツールバーを自分のものに変更することができますこれらのMacの強力な機能が iPadにも登場します

まず最初に Toolbar APIの向上点をご紹介しますそしてタイトルとドキュメントの新しいAPIをご紹介しますではまずはツールバーですすでにiOSでツールバーを設定された方も多いでしょう小さいスクリーンを有効に使うためこのようにメニューを追加したかもしれません

コードではこうなります

primaryActionのある ToolbarItemがありますその中にコントロールをコンテンツにしたさらなるメニューがありますではiPadで見てみましょうご想像通りあまりスペースを有効に使っていませんしかし嬉しいことに iOS 16ではツールバーはこのようなメニューを具体化しますオーバーフローメニューと呼び有効に使うためツールバーのコンテンツを作り直しましょう

まずToolbarItemを ToolbarItemGroupに変換しメニューを取り除きそのコンテンツを ToolbarItemGroupのコンテンツにしますこれにより各ツールバーアイテムをグループのビューに挿入します iPadとMacではこれだけで自動的にオーバーフローメニューに動かせるのですまだできることがありますがその前にツールバーアイテムのプレースメントを考えますプレースメントはツールバーアイテムが表示されるエリアです違うプレースメントを同じエリアに配置できます３つのエリアがあるナビゲーションバーのように左と中央と右エリアがあります左と右に通常コントロールがあります中央にはAppのナビゲーションタイトルがありますではPlacesで見てみましょう

PlacesではprimaryAction ToolbarItemGroupが iPadとMacの右エリアにあります primaryActionsはそのスクリーン上での最も共通的アクションを示します iOS 16ではsecondaryAction という新しいplacementがありますこれらは頻繁に使われるコントロールではないものの独自のツールバーアイテムを持つことができますお気に入り追加や編集は Placesでは重要ではないので secondaryActionとします

secondaryActionはツールバーでは見えないのがデフォルトですその代わりにオーバーフローメニューにありますその行動は新しいtoolbarRole 修飾子で変更します

この修飾子は意味役割を割り当てることで影響を与えここではエディタとしてナビゲーションバーにコンテンツ編集用に最適化するべきだと伝えますナビゲーションバーはツールバーアイテムの表示にスペースが要ると解釈しナビゲーションタイトルを中央から左エリアに移動させますこれでオーバーフローメニューに動かす前に secondaryActionを中央に配置できますコンパクトサイズクラスではナビゲーションバーは変わらず中央でタイトルを表示し続けます

secondary actionと toolbar role APIで PlacesはiPadのサイズを有効に使えるようになります中央が使えるようになりツールバーにアイテムを足せますノイズボタンや快適レベルボタンやゴミ箱ボタンなどですしかし足しすぎるとユーザーによっては扱いにくくなります MacOSではツールバーのカスタマイズをサポートしユーザーが使用しやすいツールバーを選べます iPadOSもカスタマイズができるようになりました macOSの既存のtoolbar customization APIでこの機能を適応できます見てみましょうカスタマイズできるのはツールバーアイテムだけですので ToolbarItemGroupを ToolbarItemsに分けます機能的な変化はありませんまたツールバーのアイテムそれぞれにユニークな識別子が必要になりますのでそれぞれIDを追加します IDはAppを通して一意で一貫せねばなりませんユーザーがツールバーをカスタマイズする時 SwiftUIはこれらのIDを要求し表示するビューの参照に使用するからです最後にツールバー識別子にも IDを足しますこれでツールバーがカスタマイズできます

カスタマイズの特徴としてツールバーアイテムは最初表示させないようにすることもできますこれらはカスタムポップオーバーとして初めて現れ後にツールバーに追加できます最初に現れないため特定のワークフローに便利なアクションに向いています見てみましょう

新しいアイテムを目立たせるため現在のツールバーのアイテムを隠します

そして ShareLinkのあるツールバーアイテムを足します ShareLinkはTransferable という新しいプロトコルですこれらの詳細については「Transferableの紹介」セッションご覧ください設定が済み showsByDefaultを falseとすれば最初にツールバーに現れません

ご覧のように共有リンクがカスタマイズポップオーバーにありますそこからツールバーにドラッグできますいい機能ですよね共有リンクも設定しツールバーアイテムの関係について考えます共有リンクをツールバーに移動した後画像とマップアイテムが離れてしまいましたでもこれらは編集コントロールですのでその関係をツールバーで確立しようと思います

iOS 16とmacOS Venturaは ControlGroupを使ってこの関係をサポートします見てみましょう画像とマップの調整アクションがツールバーにそれぞれありますこれらをグループ化するため同じアイテムに動かしますそしてControlGroupとして囲みます

これで同じユニットとしてツールバーから動かせますなかなかの機能ですが ControlGroupの新APIでさらに高度なことも可能です ControlGroupにラベルを提供することでこのグループのアイテムはオーバーフローメニューに動く前に独自の小さいメニューに畳むことができますツールバーが出来上がってきました最後にもう１つ変更を加えます新しい場所を足すのはよくある重要なアクションなのでそのツールバーアイテムを足してみます

そのためにツールバーに新しいボタンを足しますでもこれは最もよくあるアクションだと思うので今回は primaryActionを使用します

これはiOSとmacOSの重要で明確な違いです macOSでは修飾子内全部がカスタマイズできますが iPadOSでは secondaryActionだけですですので右のエリアでレンダリングする新しいボタンはユーザーによってカスタマイズできませんわあ！情報満杯ですねでもこれだけではありませんナビゲーションタイトルにも新機能がありますメニューやドキュメントもそうですドキュメントを見てみましょういろんな種類があります Document group APIに親しみがあるかもしれませんドキュメントグループにはドキュメントの管理に役立つたくさんのビルトイン機能がありますドキュメントグループを使うとこれらはすべて無料で行うことができます

しかしPlacesではドキュメントグループを使用していなくてもそれぞれの場所がドキュメントと考えられます編集できるプロパティがあり Places appで追加･削除ができ友達とも共有できますドキュメントグループベースでない Appでこれをどう見せられるか見てみましょうすでにplace nameをナビゲーションタイトルに関連させツールバーのタイトルをこの場所に関連づけています iOS 16では新しいナビゲーションタイトルの修飾子でさらに先へ行くことができますナビゲーションタイトルはメニュー表示をサポートできます macOSの「ファイル」メニューのようなものと考えてくださいこれを作るにはナビゲーションタイトルにアクションを提供します普通のメニューと同様ですタイトルにメニューインジケータが付きメニューにアクションがあることを示唆しますそれだけではありません僕のお気に入りは編集可能タイトルのサポートですナビゲーションタイトルにバインディングをパスしツールバーにタイトル編集のサポートを伝えます唯一ないのは編集を始める方法だけですタイトルメニューのアクション内で RenameButtonを使用することができます

リネームボタンをタップしタイトルを改名しますさらにビューにナビゲーションタイトルを関連づけるようにドキュメントを関連づけることができますドキュメントが提供されるとプレビュー付きの特別なヘッダーが表示されますプレビューはドラッグ可能で共有クイックアクセスがありますこれらはナビゲーションドキュメント修飾子でナビゲーションドキュメントをビューに関連付けすることで実現できます transferableに従うタイプか URLを直接提供することで可能ですここでは今見ている場所をマップで開くURLを提供します URLを提供すればナビゲーションドキュメント修飾子は macOSのウインドウツールバーのプロキシアイコンも設定します

これでツールバーの作成から一息取ることができます多くの機能を追加できたでしょ？早く使いたいですね iPadでのPlaces Appの向上をたくさんカバーしました iPadのツールバーには多くの新機能がありますオーバーフローメニューやカスタマイぜーションがその例です secondaryAction配置とcustomization APIで iPadとMacの大きいスペースを有効に使えます

タイトルもまた新しい機能が追加されましたナビゲーションタイトルやタイトルメニューの作成などですナビゲーションドキュメント修飾子を使いましょう SwiftUI on iPadシリーズをお楽しみいただけましたか？表や選択できるツールバーなどで iPad Appのレベルをさらに上げましょうありがとうございました

0:01 - Explicit More Menu

PlaceDetailContent(place: $place)
    .toolbar {
        ToolbarItem(placement: .primaryAction) {
            Menu {
                FavoriteToggle(place: $place)
                AdjustImageButton(place: $place)
                AdjustMapButton(place: $place)
            } label: {
                Label(
                    "More", 
                    systemImage: "ellipsis.circle")
            }
        }
    }

0:02 - Menu in ToolbarItemGroup

PlaceDetailContent(place: $place)
    .toolbar {
        ToolbarItemGroup(placement: .primaryAction) {
            Menu {
                FavoriteToggle(place: $place)
                AdjustImageButton(place: $place)
                AdjustMapButton(place: $place)
            } label: {
                Label("More", systemImage: "ellipsis.circle")
            }
        }
    }

0:03 - ToolbarItemGroup with Menu Content

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

0:04 - Secondary Action ToolbarItemGroup

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

0:05 - Toolbar Role

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

0:06 - Individual ToolbarItems

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

0:07 - Customizable ToolbarItems

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)

0:08 - ShareLink ToolbarItem

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)
        }
        ToolbarItem(id: "share", placement: .secondaryAction) {
            ShareLink(item: place)
        }
    }
    .toolbarRole(.editor)

0:09 - Non-default ShareLink ToolbarItem

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)
        }
        ToolbarItem(id: "share", placement: .secondaryAction, showsByDefault: false) {
            ShareLink(item: place)
        }
    }
    .toolbarRole(.editor)

0:10 - ControlGroup in ToolbarItem

PlaceDetailContent(place: $place)
    .toolbar(id: "place") {
        ToolbarItem(id: "favorite", placement: .secondaryAction) {
            FavoriteToggle(place: $place)
        }
        ToolbarItem(id: "image", placement: .secondaryAction) {
            ControlGroup {
                AdjustImageButton(place: $place)
                AdjustMapButton(place: $place)
            }
        }
        ToolbarItem(id: "share", placement: .secondaryAction, showsByDefault: false) {
            ShareLink(item: place)
        }
    }
    .toolbarRole(.editor)

0:11 - ControlGroup in ToolbarItem with Label

PlaceDetailContent(place: $place)
    .toolbar(id: "place") {
        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")
            }
        }
    }
    .toolbarRole(.editor)

0:12 - NewButton ToolbarItem

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)

0:13 - Navigation Title

PlaceDetailContent(place: $place)
    // toolbar customizations ...
    .navigationTitle(place.name)

0:14 - Navigation Title with Menu

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

0:15 - Editable Navigation Title with Menu

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

0:16 - Editable Navigation Title with RenameButton

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

0:17 - Navigation Document

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

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