iPhone Duoの縦型バーをアプリ側でどこまで制御できるか

はじめに

以前、iOS 27.1 SDKで追加されたiPhone Duo向けのAPIをまとめました。

https://dev.classmethod.jp/articles/ios27-1-iphone-duo-new-apis/

今回はその中から、画面の横に縦に並ぶシステムバー「縦型バー（vertical bar）」を調整するAPIを深掘りします。4つのAPIで何ができて何ができないのかを、シミュレーターで確かめた。

検証環境

• Xcode 27.2
• iOS 27.2 iPhone Duo シミュレーター

縦型バーとは

iPhone Duoでは、ナビゲーションバー・ツールバー・タブバーが画面の左右どちらかの端に縦に並ぶ。外側のディスプレイと、開いた内側のディスプレイを横長で使うときがこの表示になる。開いて縦長で使うときは、従来のiPhoneと同じ上下の横型バーに戻る。

閉じた状態

開いて横長

開いて縦長

NavigationStack、.toolbar、TabViewなどの標準のバーを使っていれば、アプリ側は何もしなくても縦型バーに載る。追加されたAPIは、その挙動を調整するためのもの。

先に結論を書いておく。

逆に、縦型バーを強制的に使わせることや、縦型バーを左右どちらに置くかをアプリ側で指定することはできない。

toolbarVerticalBehavior

func toolbarVerticalBehavior(_ behavior: ToolbarVerticalBehavior) -> some View

縦型バーを使うかどうかを決める。値は2つ。

• .automatic（デフォルト）: システムが判断する
• .disabled: 縦型バーを使わず、横型バーで表示する

TabView {
    Tab("ホーム", systemImage: "house") {
        NavigationStack { HomeView() }
    }
}
.toolbarVerticalBehavior(.disabled)

.automatic

.disabled

Tech Talksでは、ほとんどのアプリは縦型バーに向いているとされている。無効にするのは例外的な画面で、次の2つが例に挙がっている。

• 電卓のように、スクロールせず操作が下に集まる画面。横型バーにすれば、中身を横幅いっぱいに広げられる
• ツールバーに閉じるボタンしかないsheet。ボタン1つのために端の縦一列をバーに取られるので、横型バーのほうが中身を広く使える

toolbarVerticalCompressionBehavior

func toolbarVerticalCompressionBehavior(_ behavior: ToolbarVerticalCompressionBehavior) -> some View

縦型バーにはタブバーとツールバー項目が一緒に載るので、項目が多いと収まりきらなくなる。そのとき、どちらを優先して表示するかを決める。値は3つ。

• .automatic（デフォルト）: システムに任せる
• .prefersToolbarItems: ツールバー項目を優先して残す
• .prefersTabBar: タブバーを優先して残す

公式ドキュメントのサンプルにならって、タブの中の画面に付けて試した。タブを3つ、ツールバー項目を8個置いて、縦型バーに収まりきらない状態を作っている。

TabView {
    Tab("ホーム", systemImage: "house") {
        NavigationStack {
            HomeView()
                .toolbar { ... }
                .toolbarVerticalCompressionBehavior(.prefersToolbarItems)
        }
    }
}

.automatic

.prefersToolbarItems

.prefersTabBar

縮み方は次のとおり。

• ツールバー項目が縮むと、入りきらない項目が「…」のアイコンにまとめられる
• タブバーが縮むと、選択中のタブのアイコンだけが表示される。タップするとすべてのタブが表示され、そこから移動できる

縮んだタブバーをタップしたところ

.automaticと.prefersTabBarは同じ表示になった。Tech Talksの説明どおり、iOSのデフォルトではツールバー項目が「…」にまとまり、タブバーは残る。実際に挙動を変えたいときに使うのは.prefersToolbarItemsになる。

axisBehavior

func axisBehavior(_ behavior: ToolbarItemAxisBehavior) -> some ToolbarContent

ToolbarItemに付けて、縦型バーと横型バーのどちらに載せるかを決める。値は3つ。

• .automatic（デフォルト）: システムが判断する
• .horizontalOnly: 横型バーにだけ載る
• .verticalPreferred: どちらにも載る。両方あるときは縦型バーを優先する

3つの値を1つずつ付けて並べてみた。

.toolbar {
    ToolbarItem(placement: .topBarTrailing) {
        Button("お気に入り", systemImage: "star") {}
    }
    .axisBehavior(.automatic)

    ToolbarItem(placement: .topBarTrailing) {
        Button("いいね", systemImage: "heart") {}
    }
    .axisBehavior(.horizontalOnly)

    ToolbarItem(placement: .topBarTrailing) {
        Button("テキスト") {}
    }
    .axisBehavior(.verticalPreferred)
}

.horizontalOnlyを付けたアイコンは、上の横型バーに載った。

.verticalPreferredを付けたテキストは縦型バーに載った。横書きのまま載るので、バーの幅からはみ出して表示された。

Tech Talksでは、.horizontalOnlyは、普段はアイコンで、編集中は「完了」のようなテキストに切り替わるボタンに使う例が紹介されている。テキストになると縦型バーには合わないので、最初から横型バーに置いておく。.verticalPreferredは、縦型バーに載せても崩れないように作った独自のViewに付けるものとされている。

toolbarVerticalEdge

@Environment(\.toolbarVerticalEdge) private var edge  // HorizontalEdge?

縦型バーが左右どちらにあるかを読み取る。読み取り専用で、アプリ側から位置を指定する方法はない。

• .leading: 左側
• .trailing: 右側
• nil: 縦型バーを置かない端末や状況

状態ごとに値を読んでみた。端末の状態を決めてから画面を開き、最初に返ってきた値をログに出している。

.onChange(of: edge, initial: true) { _, new in
    print("toolbarVerticalEdge: \(String(describing: new))")
}

公式ドキュメントによると、独自のバーなどのUIを、システムのバーと同じ側に置くために使う。サンプルでは、独自のパレットを縦型バーの側に寄せている。

FloatingToolPalette()
    .frame(maxWidth: .infinity,
           alignment: edge == .trailing ? .trailing : .leading)

まとめ

• 縦型バーは標準のバーを使えば自動で対応される。強制したり、左右の位置を指定したりはできない
• toolbarVerticalBehavior(.disabled)で横型バーに戻せる。使うのは例外的な画面だけ
• 縦型バーに収まりきらないとき、デフォルトではツールバー項目が「…」にまとまる。ツールバー項目を優先して表示したいときはtoolbarVerticalCompressionBehavior(.prefersToolbarItems)を付ける
• axisBehaviorで項目ごとに載せるバーを選べる。.verticalPreferredをテキストに付けるとはみ出すので注意
• 縦型バーのある位置はtoolbarVerticalEdgeで読める

参考

• Raise the bar with iPhone Duo - Tech Talks
• toolbarVerticalBehavior(_:)
• toolbarVerticalCompressionBehavior(_:)
• axisBehavior(_:)
• toolbarVerticalEdge