iPhone Duo の縦向きツールバー：バーが端に移動する仕組み

アプリを iOS 27.1 SDK でリビルドして iPhone Duo で実行すると、ナビゲーションバーとツールバーはもう画面の上下にはありません。画面の片側に沿った列に配置されます。Apple が vertical bar（縦向きバー）と呼ぶこの iPhone Duo の縦向きツールバーは、多くのアプリがこの新しいデバイスで受ける最大の見た目の変化であり、そのほとんどは自動で行われます。

自動だからといって手間がかからないわけではありません。縦向きバーは細く、幅が固定で、システム UI と端を共有します。このガイドでは、バーが縦向きになる条件、アイテムの準備方法、オーバーフローと順序の制御方法、そしてオプトアウトすべき場面を解説します。内容は Apple の Tech Talk「Raise the bar with iPhone Duo」、Apple のドキュメント、iOS デベロッパ @sarunw の投稿に基づいています。これらの API は iOS 27.0 と 27.1 で新たに追加されたもので、リリース間で詳細が変わる可能性があります。

iPhone Duo の縦向きバーとは？

縦向きバーは片側の端に沿った 1 本の帯で、これまで画面の上下に分かれていたものをすべてまとめて保持します。@sarunw の言葉を借りれば、Live Activities、ステータス情報、ナビゲーションとツールバーのアイテムを集約し、それらが「すべて 1 つの端に沿った領域を共有」します。

Apple はこれを、ナビゲーション、ツールバー、タブバーのコントロールが 1 つの領域を共有し、それが 90 度回転して縦のスタックになったものと説明しています。ステータスバーもそれに合わせて軸を変えます。Apple のデザインに関するトークについての Blake Crosley のメモによると、Live Activities が届くと Dynamic Island が縦方向に広がります。Apple のドキュメントによれば、バーが表示または非表示になると、コンテンツが再配置され、バーのための leading または trailing のセーフエリアインセットが追加または削除されます。このデバイスで水平方向のセーフエリアのインセットとコンテンツマージンがこれほど重要なのはそのためです。

最新の SDK でビルドすることでオプトインになります。Apple のトーク「Prepare your app for iPhone Duo」では、iOS 27.1 SDK を使うと、標準のナビゲーションボタンとツールバーボタンがステータスバーの下に縦に並ぶと説明されています。

iPhone Duo でツールバーが縦向きになるのはどんなとき？

縦向きバーが表示されるかどうかは、ディスプレイ、向き、そしてコンテナの位置によって決まります。

スプリットビューの行の背景にあるルールはシンプルです。バーが縦向きになるのは、そのコンテナがディスプレイの端に沿っている場合だけです。@sarunw が指摘しているように、スプリットビューでは詳細列に縦向きバーが付き、その他の列は横向きのままです。Apple の Tech Talk によると、preferredPlacement で配置したシートは、右側では縦向きバーが付きますが、左側では付きません。内側ディスプレイは縦向きと横向きで同じサイズクラスを返すため、回転したときに変わる数少ない要素の 1 つがこのバーです。それ以外については iPhone Duo のサイズクラスのガイドで解説しています。

どのコンテナが対象になるのでしょうか。SwiftUI では、Apple は toolbar モディファイアを NavigationStack または NavigationSplitView と組み合わせています。UIKit では、自身のバーを管理する UINavigationController と UITabBarController を優先してください。

NavigationStack {
    ContentView()
        .toolbar {
            ToolbarItem(placement: .bottomBar) {
                Button("Share", systemImage: "square.and.arrow.up") { share() }
            }
        }
}

このサンプルには iPhone Duo 固有のものは何もありません。iOS 27.1 SDK でビルドすると、状況が許す場面ではボトムバーのアイテムが縦向きバーに移動します。

縦向きバーでタイトルよりシンボルが優先されるのはなぜ？

横向きのバーは高さが固定で、ラベルに必要なだけ横に広がれます。縦向きバーはその逆で、Apple によると幅が固定、アイテムの高さが可変です。長いタイトルは収まる場所がないため、バーではシンボルのみのアイテムが優先されます。

レイアウトごとに別の表現を選ぶ必要はありません。すべてのアイテムにアイコンとタイトルを与えれば、システムが選びます。Apple の Tech Talk によると、アイコンのあるアイテムは縦向きに、テキストのみのアイテムは横向きのままになり、オーバーフローメニューにはタイトルとアイコンの両方が表示されます。@sarunw の近道が有効なのはそのためです。「ツールバーのアイテムにアイコンとタイトルの両方を与えれば、おそらく iPhone Duo への準備はできています。」シンボルのみのアイテムでも、タイトルは必ず指定してください。システムがオーバーフローメニューや展開表示でそれを使うからです。

カスタムビューにはさらに注意が必要です。@sarunw によると、アイコンとタイトルを表示するカスタムパネルは横向きでは問題なく機能しますが、縦向きバーではタイトルを隠さないと、パネルが固定幅に押し込まれてしまいます。Apple の環境値 toolbarVerticalEdge を使えば、カスタムビューはその状況にあるかどうかを判断できます。

struct FilterPanel: View {
    @Environment(\.toolbarVerticalEdge) private var toolbarVerticalEdge

    var body: some View {
        if toolbarVerticalEdge == nil {
            Label("Filters", systemImage: "line.3.horizontal.decrease")
        } else {
            Image(systemName: "line.3.horizontal.decrease")
                .accessibilityLabel("Filters")
        }
    }
}

この値は HorizontalEdge? 型で、iOS 27.1 の新機能です。Apple のドキュメントでは、「縦向きバーが現在表示されているかどうかにかかわらず」縦向きバーにシステムが優先する端を表し、縦向きバーがまったく使われない場面では nil になると説明されています。UIKit では traitCollection.verticalBarEdge を読み取ります。そうした場面では unspecified の値が返されます。

縦向きにすべきでないアイテムもあります。価格を表示するカートボタンは、テキストに情報を持っています。Apple の Tech Talk では、こうしたアイテムのための axisBehavior モディファイアが紹介されており、画面上では .horizontalOnly と .verticalPreferred という値が示されています。

visibilityPriority でオーバーフローを制御するには？

縦向きバーは横向きのバーより早くスペースが足りなくなります。特に、外側ディスプレイの横向きや、キーボードやピクチャ・イン・ピクチャがスペースを奪い合う場合です。そうなると、アイテムはオーバーフローメニューに移動します。Apple によると、デフォルトではアイテムは下から上へとオーバーフローします。

重要なアイテムを表示し続けるには、.visibilityPriority で優先度を上げます。Apple のドキュメントでは iOS 27.0 で利用可能とされています。優先度の低いアイテムから先にオーバーフローに移動します。

.toolbar {
    ToolbarItem(placement: .bottomBar) {
        Button("Archive", systemImage: "archivebox") { archive() }
    }
    ToolbarItem(placement: .bottomBar) {
        Button("Compose", systemImage: "square.and.pencil") { compose() }
    }
    .visibilityPriority(.high)
}

このサンプルでは、Compose より先に Archive がオーバーフローに移動します。Tech Talk によると、UIKit でも item.visibilityPriority = .high で同じ考え方を使います。Apple は、まずグループに優先度を設定し、次にグループ内のアイテムに設定するよう勧めています。また、Compose のような頻繁に使うアクションや、バッジ付きのアイテム、ステータスを示すアイテムを最も長く表示し続けることも勧めています。

独自の「その他」メニューがある場合は、システムのメニューに統合しましょう。Apple は SwiftUI の ToolbarOverflowMenu と UIKit の navigationItem.additionalOverflowItems を紹介しており、省略記号のシンボルはオーバーフロー専用にするよう求めています。タブバーとツールバーがスペースを奪い合う場合は、SwiftUI の toolbarVerticalCompressionBehavior(_:) と UIKit の verticalBarCompressionBehavior で、どちらを先に圧縮するかを決めます。デフォルトではツールバーが先に圧縮されます。

topBarPinnedTrailing で Done を固定し、アイテムの順序を決めるには？

縦向きバーでは、いちばん上が最も見つけやすい場所なので、順序が重要です。Apple のガイダンスでは、いちばん上を「戻る」や「閉じる」などの主要なナビゲーション用に確保し、その次に Done のような目立つアクションを置くよう勧めています。ナビゲーションコントローラは「戻る」を自動で追加します。SwiftUI でカスタムの「閉じる」ボタンを置く場合、Apple は ToolbarItem(placement: .cancellationAction) を使っています。

目立つアクションには .topBarPinnedTrailing を使います。Apple のドキュメントでは iOS 27.0 から利用可能とされており、@sarunw によると、これでアイテムが縦向きバーの上部付近に留まります。

.toolbar {
    ToolbarItem(placement: .cancellationAction) {
        Button("Cancel", systemImage: "xmark") { dismiss() }
    }
    ToolbarItem(placement: .topBarPinnedTrailing) {
        Button("Done", systemImage: "checkmark") { save() }
    }
}

固定したアイテムは移動しにくく、Apple のドキュメントによると「検索がアクティブで十分なスペースがない場合にのみオーバーフローメニューに移動」します。Tech Talk で紹介されている UIKit の対応 API は navigationItem.pinnedTrailingGroup で、UIBarButtonItemGroup を設定します。

iPhone Duo で縦向きバーをオプトアウトするには？

すべてのアプリに縦向きバーが必要なわけではありません。Apple が例に挙げているのは電卓で、横方向のスペースが貴重な、下部に要素が集中した 1 ページのレイアウトです。ドキュメントでは、ツールバーのコントロールを持つフルスクリーンの動画プレーヤーも挙げられています。こうした場合、iOS 27.1 の新機能である SwiftUI の toolbarVerticalBehavior(_:) を使うと、標準の横向きの上下バーにフォールバックします。

NavigationStack {
    CalculatorView()
        .toolbarVerticalBehavior(.disabled)
}

final class CalculatorViewController: UIViewController {
    override var preferredVerticalBarBehavior: UIVerticalBarBehavior {
        .disabled
    }
}

1 つ目のサンプルは SwiftUI、2 つ目は UIKit です。どちらも Apple の Tech Talk とドキュメントからのもので、どちらもデフォルトは automatic です。SwiftUI では、この動作はコンテナによって解決されます。NavigationStack では最前面のビュー、TabView では選択中のタブ、NavigationSplitView では最も trailing 側の列が使われます。

Apple は、これを安定した選択として扱うよう求めています。ユーザーの画面遷移や、1 つのビューの状態の変化に応じて切り替えないでください。1 つの画面でだけバーを隠したい場合は、代わりに toolbarVisibility(_:for:) を使います。また、.disabled を指定していてもフルスクリーンの閉じる動作中にアイテムが一瞬縦向きバーに表示されたというApple のフォーラムでのデベロッパの報告があるので、遷移もテストしてください。

カスタムツールバーや RTL レイアウトでバーが移動しないのはなぜ？

デベロッパを驚かせる動作が 2 つあります。1 つ目は、カスタムのバーは移動しないことです。@sarunw によると、独自の UIToolbar、UINavigationBar、UITabBar を構築した場合、iPhone Duo はそのアイテムを移動させません。「システムが移動させるのは、自身が管理するバーだけです。」Apple の Tech Talk も同じことを述べ、システムが管理するコンテナを推奨しています。カスタムのバーを残す場合は、verticalBarEdge または toolbarVerticalEdge とセーフエリアのインセットを使って自分で配置してください。

2 つ目は、右から左に書く言語でもバーが反転しないことです。縦向きバーは読む方向ではなくハードウェアに従い、RTL でもデバイスの同じ側に留まります。コンテンツのほうがバーに合わせて配置されます。レイアウト方向だけを根拠にカスタム UI を反転させないでください。システムが報告する端を読み取りましょう。

Apple のトークで紹介されている細かな点もいくつかあります。縦向きバーにはデフォルトでスクロールエッジ効果がなく、「透明度を下げる」がオンのときは背景が付き、フレキシブルスペーサーは縦軸ではゼロに縮みます。どちらの向きでも余分なスペースを追加しないでください。

まとめ

• iOS 27.1 SDK でリビルドすると、外側ディスプレイと内側ディスプレイの横向きで、システムのバーが縦向きになります。内側ディスプレイの縦向きでは横向きのままです。
• 縦向きになるのはディスプレイの端に沿ったバーだけです。スプリットビューの詳細列には付き、その他の列には付きません。
• バーの幅は固定でシンボルが優先されるため、すべてのアイテムにアイコンとタイトルを与えましょう。
• オーバーフローしても残すべきアクションには .visibilityPriority(.high)、Done には .topBarPinnedTrailing を使いましょう。
• .toolbarVerticalBehavior(.disabled) や preferredVerticalBarBehavior によるオプトアウトは、電卓や動画プレーヤーのようなレイアウトに限りましょう。
• カスタムの UIToolbar や UINavigationBar インスタンスは移動せず、バーは RTL を無視します。代わりに toolbarVerticalEdge または verticalBarEdge を読み取りましょう。

バーが整ったら、iPhone Duo のセーフエリアとコンテンツマージンのガイドでコンテンツを新しい端に揃え、続いて iPhone Duo 対応チェックリストをひととおり実施してください。このデバイスを最大限に活かしているアプリは Built for the fold でご覧いただけます。