iPhone Duo のタブバーと NavigationSplitView 対応

TabView や UITabBarController を使ったアプリを iPhone Duo で実行すると、iPhone Duo のタブバーはもう画面の下部に沿った1列ではありません。画面の横に移動し、ナビゲーションやツールバーのアイテムがある縦向きバーに収まります。スプリットビューも変わります。NavigationSplitView では縦向きバーが付くのは1つの列だけで、展開したインスペクタには付きません。

このガイドでは、タブバー、スプリットビューの列、インスペクタがどうなるか、スペースが足りないときにどちらのバーを譲らせるか、そして左右対称ではなくなったバーの隣にコンテンツをどう配置するかを解説します。シンボル、オーバーフロー、オプトアウトといった縦向きバー全般のルールについては、iPhone Duo の縦向きツールバーのガイドをご覧ください。ここでの内容はすべて、Apple の Tech Talk「Raise the bar with iPhone Duo」、Apple のドキュメント、Apple のフォーラムでの DTS のまとめ、@sarunw の投稿に基づいています。これらの API は iOS 27.0 と 27.1 で新たに追加されたもので、リリース間で詳細が変わる可能性があります。

iPhone Duo ではタブバーも横に移動する？

移動します。Apple のトーク「Prepare your app for iPhone Duo」によると、TabView と UITabBarController はすべての姿勢に適応し、タブは内側と外側のディスプレイに表示され、「適切な場面では縦に配置」されます。つまり、他のバーと同じ状況、すなわち外側ディスプレイと、横向きの内側ディスプレイです。内側ディスプレイの縦向きでは、バーは横向きのままです。

Apple は、ナビゲーション、ツールバー、タブバーのコントロールが1つの領域を共有すると説明し、そのレイアウトを90度回転させて縦のスタックにしたものを想像するよう勧めています。Apple の例では3つの組み合わせがすべて示されています。メモはツールバー、時計はタブバー、フィットネスはその両方を使っています。@sarunw の説明では、横に並んだタブは「バーの下部付近で縦のスタックになります」。ツールバーのアイテムはバーの上部を占め、Apple のガイダンスでは、そこに「戻る」「閉じる」や Done のような目立つアクションを置くとされています。

これは、iOS 27.1 SDK でビルドし、システムのコンテナを使うことで得られます。iPhone Duo のグループラボについての Apple DTS エンジニアのまとめでは、この適応は単独のバーではなく、TabView と UITabBarController というコンテナに結び付いていると明言されています。カスタムのタブバーや、自分で配置した UITabBar は移動しません。どうしても残す必要がある場合は、縦向きツールバーのガイドで説明しているように、環境値 toolbarVerticalEdge または verticalBarEdge トレイトを使って配置してください。

縦向きになるバーのアイテムと、横向きのままのアイテムは？

タブは、バーの他の部分と同じアイテムのルールに従います。Apple の Tech Talk では、「戻る」や共有ボタンのようなアイコンのあるアイテムは軸が縦向きに変わり、編集ボタンのようなテキストのみのアイテムは横向きの軸に留まると説明されています。@sarunw のまとめも同じで、「戻る」や共有のようなアイコンのアイテムは縦向きバーに移動し、Edit のようなテキストのみのアイテムは横向きのままです。

.toolbar {
    ToolbarItem(placement: .primaryAction) {
        Button("Share", systemImage: "square.and.arrow.up") { share() }
    }
    ToolbarItem(placement: .secondaryAction) {
        Button("Edit") { isEditing.toggle() }
    }
}

このサンプルでは、Share にはシンボルがあるので縦向きにできます。Edit にはタイトルしかないので、横向きのままです。Edit を縦向きバーに入れたい場合は、シンボルも与えてください。DTS のまとめによると、システムはタイトルのみのアイテムを縦向きに表示しません。システムはオーバーフローメニューでタイトルを表示するので、すべてのアイテムにタイトルを残しておきましょう。

タブについても、各 Tab に同じことが当てはまります。Tab("Recents", systemImage: "clock") のように、タイトルと systemImage を与えてください。バッジは、テキストを増やさずに情報を残すよい方法です。Apple のトークでは、テキストとシンボルを持つアイテムを、SwiftUI の .badge(7) や UIKit の item.badge = .count(7) を使ったシンボルに置き換えています。

タブバーとツールバーのどちらを先に圧縮するかを選ぶには？

タブバーとツールバーが縦向きバーを共有すると、特に外側ディスプレイの横向きでは、どちらかが先にスペースを使い果たします。Apple のトークでは、2種類のアプリに対する2つのデフォルトが説明されています。Podcast のようなナビゲーション中心のビューでは、主要な移動先にアクセスできるようツールバーが先に圧縮されます。これがデフォルトです。ゲームアプリのようなタスク中心のビューでは、頻繁に使うアクションを表示し続けるためにタブバーが先に圧縮されます。譲った側のバーはオーバーフローボタンにまとめられます。

iOS 27.1 の新機能である SwiftUI の toolbarVerticalCompressionBehavior(_:) は、ビューごとにこの優先設定を指定します。UIKit では、同じく iOS 27.1 の新機能である verticalBarCompressionBehavior をビューコントローラのナビゲーションアイテムに設定します。

TabView {
    Tab("Recents", systemImage: "clock") {
        NavigationStack {
            RecentsView()
                .toolbar {
                    Button("Up", systemImage: "chevron.up") { moveUp() }
                    Button("Down", systemImage: "chevron.down") { moveDown() }
                }
                .toolbarVerticalCompressionBehavior(.prefersToolbarItems)
        }
    }
}

navigationItem.verticalBarCompressionBehavior = .prefersBarItems

1つ目のサンプルは Apple のドキュメントに沿ったもので、ドキュメントではツールバーのアイテムを優先する例としてファイルのような生産性アプリが使われています。2つ目は Tech Talk で紹介されている UIKit の書き方です。値はフレームワークによって少し異なります。

ツールバーの中でも、優先度は引き続き重要です。@sarunw が指摘しているように、重要なアイテムには .visibilityPriority(.high) を設定し、限られたスペースでも表示し続けるようにしましょう。順序とオーバーフローについては、縦向きツールバーのガイドで詳しく解説しています。

内側ディスプレイでタブバーの代わりにサイドバーを表示できる？

できます。iPhone では、iPadOS のようにサイドバーに適応するのではなく、iOS はタブバーを表示します。iPhone Duo の内側ディスプレイでは、より充実したナビゲーションのためにサイドバーを選択できます。SwiftUI では、sidebarAdaptable スタイルと一緒に defaultTabBarPlacement(_:) を使います。UIKit では、sidebar の preferredPlacement を設定します。どちらも iOS 27.0 から利用できます。

TabView {
    Tab("Home", systemImage: "house") { HomeView() }
    Tab("Favorites", systemImage: "star") { FavoritesView() }
}
.tabViewStyle(.sidebarAdaptable)
.defaultTabBarPlacement(.sidebar)

tabBarController.sidebar.preferredPlacement = .sidebar

Apple のドキュメントによると、defaultTabBarPlacement(_:) は、iPhone のようにスタイルがサイドバーかタブバーのどちらかに解決される場面で適用され、バーが変形できる iPadOS では効果がありません。UIKit では、automatic の配置は iOS ではタブバーに解決されます。

TabView についてもう1つ。toolbarVerticalBehavior(.disabled) で縦向きバーをオプトアウトした場合、Apple のドキュメントによると、TabView は選択中のタブからこの動作を解決します。タブを切り替えたときにレイアウトが跳ねないよう、タブ間で設定を揃えておきましょう。

iPhone Duo で NavigationSplitView のどの列に縦向きバーが付く？

詳細列だけです。Apple のルールでは、ツールバーのアイテムが縦向きに移動できるのはコンテナがディスプレイの端に沿っている場合だけなので、スプリットビューでは詳細列だけが対象になり、その他の列のアイテムは横向きのままです。@sarunw はこう要約しています。「バーが縦向きになるのは、そのコンテナがディスプレイの端に沿っている場合だけです。」

DTS のまとめでは、内側ディスプレイについて具体的に説明されています。システムはサイドバー列やコンテンツ列のバーを横向きに、詳細列のバーを trailing 側の端に縦向きに表示します。iPhone Duo を閉じると、NavigationSplitView と UISplitViewController は1つのスタックによるナビゲーションに折りたたまれ、開くと列を並べるか重ねて表示します。

外側ディスプレイの行は、Apple の折りたたみの動作とインスペクタのドキュメントに基づいています。スタックはその後、外側ディスプレイの縦向きバーのルールに従います。スプリットビューでは最も trailing 側の列が toolbarVerticalBehavior も決めるので、オプトアウトは詳細列のビューに指定してください。

NavigationSplitView {
    SidebarList(selection: $selection)
} detail: {
    DetailView(item: selection)
        .toolbar {
            Button("Share", systemImage: "square.and.arrow.up") { share() }
        }
        .inspector(isPresented: $showsInspector) {
            InspectorView(item: selection)
        }
}

ここでは Share ボタンが詳細列にあるので、縦向きにできるのはこのアイテムです。サイドバーのリストに付けたツールバーのアイテムは横向きのままです。

展開したインスペクタのアイテムが横向きのままなのはなぜ？

Apple の Tech Talk によると、詳細列にはすでに縦向きバーがあるため、混乱を避けるために、インスペクタには展開時に専用のバーが与えられません。@sarunw の言い方では、詳細列にはすでに縦向きバーがあり、「2本目があると競合してしまう」のです。

DTS のまとめでは、これがどう組み合わさるかも補足されています。内側ディスプレイでは、NavigationSplitView でビルドし、詳細ビューに inspector(isPresented:content:) を適用すると、サイドバーとインスペクタを共存させられます。インスペクタはバーを追加するのではなく、詳細列の trailing 側のレイアウトと連携します。Apple のインスペクタのドキュメントには、水平方向が regular のサイズクラスでは trailing 側の列として表示され、compact のサイズクラスではシートに適応するとも書かれています。DTS の回答によると、外側ディスプレイやスプリットビューが折りたたまれたときには、シートとして表示されます。

実際には、インスペクタのコントロールは横向きのバー向けに、必要に応じてタイトル付きで設計してください。インスペクタにしかないアクションを縦向きバーに頼らないようにしましょう。

NavigationSplitView の各列はどのサイズクラスを返す？

iPhone Duo でのウインドウのサイズクラスは十分に文書化されています。向きにかかわらず、外側ディスプレイでは幅が compact、内側ディスプレイでは幅と高さが regular です。表の全体は iPhone Duo のサイズクラスのガイドにあります。列については別の話です。@sarunw は iPhone Duo での NavigationSplitView の各列のサイズクラスの表を公開しており、そこから読み取るべきなのは、列がウインドウと同じ値を返すとは限らないということです。

ですから、サイズクラスはウインドウやルートのレベルではなく、レイアウトを行う列の中で読み取りましょう。

struct DetailView: View {
    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
    let item: Item?

    var body: some View {
        if horizontalSizeClass == .regular {
            WideDetailLayout(item: item)
        } else {
            CompactDetailLayout(item: item)
        }
    }
}

環境値を DetailView の中で読み取っているので、列自身のトレイトが反映されます。Apple のトーク「Strike a pose」では、内側ディスプレイに関連する細かな点も紹介されています。リマインダーのようなスプリットビューのアプリでは、システムが列の幅を均等な50/50の分割に調整して、両方の列を表示し続けます。列ではなく自分でペインを構築する場合は、ArrangementView が同じように各ペインに独自のサイズクラスを与えます。

パディングを決め打ちせずに縦向きバーの隣にコンテンツを配置するには？

詳細列の片側に縦向きバーがあり、反対側にサイドバーがある場合、左右のマージンは同じではありません。@sarunw の助言は簡潔です。パディングはデバイスや向きによって対称とは限らないので決め打ちせず、layoutMarginsGuide を使うこと。Apple の Tech Talk によると、iPhone Duo のレイアウトマージンはセーフエリアと同じく非対称なので、前面のコンテンツを縦に並んだボタンに近づけつつ、反対側のマージンは維持できます。

NSLayoutConstraint.activate([
    headerView.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor),
    headerView.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor),
    headerView.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor)
])

layoutMarginsGuide に固定すると、各端のマージンが個別に反映されるので、16 や 20 ポイントをハードコードする必要はありません。バーもセーフエリアの外側に配置されます。Apple によると、縦向きバーが提供するのは上下ではなく leading と trailing のインセットです。SwiftUI での書き方とインセットのルールの全体については、iPhone Duo のセーフエリアとコンテンツマージンをご覧ください。

まとめ

• TabView または UITabBarController を使いましょう。タブは縦向きバーの下部付近にスタックとして移動します。カスタムのタブバーは移動しません。
• すべてのタブとツールバーのアイテムにシンボルとタイトルを与えましょう。アイコンのあるアイテムは縦向きになり、テキストのみのアイテムは横向きのままです。
• どちらのバーを先に圧縮するかは toolbarVerticalCompressionBehavior または verticalBarCompressionBehavior で選びます。デフォルトではツールバーが先です。
• NavigationSplitView では詳細列だけに縦向きバーが付き、展開したインスペクタのアイテムは横向きのままです。
• サイズクラスは各列の中で読み取り、左右が同じパディングだと決め打ちせずにコンテンツを layoutMarginsGuide に固定しましょう。

次は、縦向きツールバーのガイドで縦向きバーの残りのルールを確認し、Built for the fold で他のアプリやゲームがこのデバイスをどう活かしているかをご覧ください。