iOS 26 の SwiftUI ツールバー：Liquid Glass とスペーサー

アプリを iOS 26 SDK で再コンパイルすると、1 行も変えないうちにツールバーの見た目が変わります。ボタンは Liquid Glass の上に浮かび、隣り合うボタンは 1 つのカプセルを共有し、検索フィールドは画面の下部に移動し、インラインのタイトルは必ずしも中央に留まりません。このガイドでは、iOS 26 の SwiftUI ツールバーが何をまとめるかをどう決めているのか、そしてそれを制御できる API を解説します。

内容は Apple の WWDC25 のセッション「Build a SwiftUI app with the new design」と「What's new in SwiftUI」、Apple のドキュメント、iOS デベロッパ @sarunw の投稿に基づいています。特に記載のない限り、ここで紹介する API は iOS 26.0 の新機能です。ポイントリリース間で動作が変わったものもあるので、サポートするバージョンで確認してください。最後のセクションでは、これらのツールバーが iPhone Duo でどうなるかを取り上げます。

iOS 26 はツールバーのアイテムをどう Liquid Glass にグループ化する？

iOS 26 では、ツールバーのアイテムはコンテンツの上に浮かぶ Liquid Glass の面に置かれ、その下にあるものに合わせて変化します。Apple のセッションは、重要なルールを「ツールバーのアイテムは自動的にグループ化される」とはっきり述べています。同じ配置で隣り合うアイテムは 1 つのカプセルを共有し、システムの「戻る」ボタンは単独のままです。

グループ化はバーを落ち着いた印象に保つので、たいていは望ましいものです。問題になるのは、関係のないアクションが同じカプセルに入ってしまう場合です。Apple のフォーラムのあるデベロッパは、2 つの leading 側のアイテムが、配置を変えても必ず結合してしまい、スペーサーで区切るまで直らなかったと報告しています。

Apple はガラスの中にあるものの見た目も変えました。ツールバーのアイコンはより多くの場所でモノクロになり、「視覚的なノイズを減らし」ます。色を付けることもできますが、Apple のアドバイスは「行動を促すことや次のステップなど、意味を伝えるために使い、単なる視覚効果のためには使わない」ことです。セッションでは、バーのアイテムの背後に置いたカスタムの背景や暗くする処理は、新しいスクロールエッジ効果の妨げになるので削除するよう求めています。この効果は iOS 27 でさらに変わっており、SwiftUI のスクロールエッジ効果のガイドで解説しています。

プロミネントなボタンが専用のカプセルになるのはなぜ？

Done や Save のような主要なアクションは、周囲のボタンより目立つべきです。iOS 26 では、新しいガラスのボタンスタイルでそれを実現します。Apple のセッションでは、これを「アプリのあらゆるボタンに Liquid Glass をもたらす」スタイルとして紹介しており、標準のボタンには .glass、プロミネントなボタンには .glassProminent を使います。

ツールバーでは、プロミネントなボタンはグループ化の仕組みも変えます。@sarunw の言葉では、「iOS 26 のツールバーでは、プロミネントなボタンはガラスのカプセルを決して共有しない」のです。.buttonStyle(.glassProminent) を追加すると、ボタンはグループから外れて専用の色付きの円になります。

.toolbar {
    ToolbarItemGroup(placement: .topBarTrailing) {
        Button("Share", systemImage: "square.and.arrow.up") { share() }
        Button("Done", systemImage: "checkmark") { save() }
            .buttonStyle(.glassProminent)
    }
}

このサンプルでは、Share は通常のガラスの背景のままで、Done は専用の色付きの形として離れて配置されます。色を選ぶには .tint(_:) を追加します。Apple のセッション「What's new in SwiftUI」でも、主要なアクションに .buttonStyle(.borderedProminent) と .tint(.pink) を使って同じ考え方を示しています。

これはバーごとに 1 つのアクションに限って使いましょう。すべてが目立てば、何も目立ちません。また、iOS 26.1 のリリース候補版では、画面遷移の後に .glassProminent のツールバーボタンが 1 秒ほど色なしで表示されたというフォーラムの報告があります。Apple のエンジニアは「バグのようだ」と回答しているので、サポートするリリースで確認してください。

ToolbarSpacer でツールバーのグループを分けるには？

自動のグループ化で間違ったアイテムがまとめられてしまう場合は、ToolbarSpacer を使います。Apple はこれを「ツールバーのアイテムの間に視覚的な区切りを作る」アイテムと説明しています。イニシャライザは init(_ sizing: SpacerSizing = .flexible, placement: ToolbarItemPlacement = .automatic) で、iOS 26.0 から利用できます。

Apple の Landmarks サンプルでは、固定スペーサーを使って詳細画面のツールバーを 3 つのセクション（共有、お気に入りとコレクション、インスペクタの切り替え）に分けています。

.toolbar {
    ToolbarItem {
        ShareLink(item: landmark, preview: landmark.sharePreview)
    }
    ToolbarSpacer(.fixed)
    ToolbarItemGroup {
        LandmarkFavoriteButton(landmark: landmark)
        LandmarkCollectionsMenu(landmark: landmark)
    }
    ToolbarSpacer(.fixed)
    ToolbarItem {
        Button("Info", systemImage: "info") { showInspector() }
    }
}

このサンプルは Apple のものを簡略化したものです。関連する 2 つのボタンは 1 つのカプセルを共有し、Share と Info はそれぞれ専用のカプセルになります。スペーサーには周囲のアイテムと同じ配置を指定してください。たとえば ToolbarSpacer(.fixed, placement: .topBarLeading) です。指定しないとスペーサーは .automatic の配置になり、意図したアイテムの間に入らないことがあります。フォーラムのデベロッパがつまずいたのはこの点です。

プロフィール写真のように、そもそもガラスの上に置くべきでない単独のアイテムについては、Apple のセッションで ToolbarItem に .sharedBackgroundVisibility(.hidden) を付ける方法が紹介されています。これでそのアイテムは背景のない独自のグループに分かれます。

下部の検索フィールドを専用のカプセルにするには？

iPhone では、iOS 26 は検索を画面の下部に移動します。Apple のセッションによると、ツールバーの検索は「フィールドを画面の下部、手の届きやすい位置に置き」ます。独自のボトムバーのアイテムの中でフィールドの位置を決めるには、検索の種類を指定した DefaultToolbarItem を配置します。

注意すべきなのは、検索フィールドもツールバーのアイテムだという点です。@sarunw が指摘しているように、iOS 26 では「隣のボタンと結合」します。彼の解決策は、両側に固定の ToolbarSpacer を置いて専用のカプセルにすることです。

NavigationStack {
    NoteList()
        .toolbar {
            ToolbarItem(placement: .bottomBar) {
                Button("Filter", systemImage: "line.3.horizontal.decrease") { }
            }
            ToolbarSpacer(.fixed, placement: .bottomBar)
            DefaultToolbarItem(kind: .search, placement: .bottomBar)
            ToolbarSpacer(.fixed, placement: .bottomBar)
            ToolbarItem(placement: .bottomBar) {
                Button("New Note", systemImage: "square.and.pencil") { }
            }
        }
}
.searchable(text: $searchText)

これで Filter、検索、New Note が 3 つの別々のカプセルに収まります。同じセッションのメール風の例では、代わりに検索の前にフレキシブルスペーサーを置いてフィルタを leading 側の端に押しやり、検索と作成ボタンの間に固定スペーサーを置いています。アイテム同士の関連の強さに合ったほうを選んでください。

デバイスのサイズやボタンの数によっては、システムがフィールドをボタンに最小化することがあります。検索がアプリの中心的な機能でなければ、.searchToolbarBehavior(.minimize) でオプトインできます。Natalia Panferova の iOS 26 の検索に関する記事では、これらの呼び出しを if #available(iOS 26.0, *) で包み、同じコードが古いターゲットでもビルドできるようにしています。

インラインのナビゲーションタイトルが leading 側の端に移動したのはなぜ？

iOS 26 でのもう 1 つの驚きは、インラインのタイトルです。iOS 18 ではナビゲーションバーの中央にありました。iOS 26 では、@sarunw が示しているように、「インラインのタイトルが中央に留まるのは収まる場合だけ。ツールバーのアイテムを 1 つ追加すると、タイトルは leading 側の端に移動する」のです。

デベロッパはこの問題に両方向から直面しています。Apple のフォーラムのある UIKit デベロッパは、タイトルビューのセグメンテッドコントロールが、バーボタンアイテムがないときは中央に、trailing 側にアイテムが 1 つ現れると左寄せになることを確認しました。Apple の回答はバグレポートを求めるだけだったので、正確なルールについての公式な説明はありません。

実践的なアドバイスは、どちらの位置にも対応できるようにデザインすることです。

• タイトルを短くして、中央に収まりやすくしましょう。
• 中央のタイトルにコンテンツを揃えないでください。中央に留まるとは限りません。
• アイテムの数を数えましょう。あまり使わないアクションを Menu に移すと、バーにスペースが空きます。

iOS 26 でセグメンテッドピッカーとスライダーはどう変わった？

変わったコントロールはツールバーだけではありません。Apple のセッションによると、「トグル、セグメンテッドピッカー、スライダーは、操作中に Liquid Glass に変化する」ようになりました。コードを変えなくても適用される点が 2 つあるので、知っておく価値があります。

セグメンテッドピッカー。 @sarunw は、iOS 26 の SwiftUI のセグメンテッドピッカーについて、選択中のセグメントが丸みを帯び、区切り線がなくなり、コードは同じままですっきりしたと述べています。Apple のサンプルのような標準のピッカーは、自動的に新しい見た目になります。

Picker("View", selection: $selection) {
    Text("Map").tag(ViewMode.map)
    Text("List").tag(ViewMode.list)
}
.pickerStyle(.segmented)

ステップ付きスライダー。 スライダーが目盛りに対応し、Apple によると「step パラメータを指定してスライダーを初期化すると自動的に表示」されます。@sarunw の例では、step: 1 で値ごとに目盛りが付きます。

Slider(value: $rating, in: 1...5, step: 1) {
    Text("Rating")
}

Slider(value: $speed, in: 0.5...2, step: 0.25, neutralValue: 1) {
    Text("Playback speed")
}

1 つ目のスライダーには 5 つの目盛りが表示されます。2 つ目は neutralValue を使っています。これは iOS 26 で Apple が追加したもので、通常の再生速度のような中間の値からトラックの塗りが始まります。同じイニシャライザは、選択できる範囲を制限する enabledBounds と、目盛りを自分で配置するために SliderTick を返す tick クロージャも受け取ります。ステップが多いスライダーでは目盛りが多すぎることがあるので、出荷前に見た目を確認してください。

iOS 26 のツールバーは iPhone Duo の縦向きバーでどう動く？

iPhone Duo では、iOS 27.1 SDK でビルドしたアプリは、外側ディスプレイと横向きの内側ディスプレイで縦向きバーになります。ナビゲーションとツールバーのアイテムが片側に沿った列に移動するのです。詳しくは iPhone Duo の縦向きツールバーのガイドで解説しています。ここでは、Apple の Tech Talk「Raise the bar with iPhone Duo」に基づき、iOS 26 のツールバー API がどう引き継がれるかを紹介します。

• スペーサー。 「デフォルトでは、フレキシブルスペーサーは縦軸ではサイズがゼロになる。ただし、固定スペーサーは引き続き最小サイズを保つ。」横方向にグループを押し離すフレキシブルスペーサーは縦方向では何もせず、固定スペーサーは引き続きグループを分けます。
• グループ化。 上下のバーが 1 本の縦向きバーになるとき、Apple によると残ったアイテムは「元のグループ分けを保ち」、上から来たものと下から来たものの間はスペーサーで区切られます。
• 余分な余白は不要。 Apple のアドバイスは、アプリは「バーが横向きか縦向きかにかかわらず、余分なスペースを作るべきではない」というものです。間隔を装うためにアイテムの内側に余白を加えず、ToolbarSpacer を使ってください。
• アイコンとタイトル。 @sarunw が指摘しているように、アイコンのあるアイテムは縦向きバーに移動し、テキストのみのアイテムは横向きのままです。プロミネントな Done ボタンにも、タイトルに加えて systemImage を指定しましょう。
• Done の位置。 Apple は、Done のような目立つアクションを、iOS 27.0 の新機能である ToolbarItem(placement: .topBarPinnedTrailing) で上部付近に置くよう求めています。Apple のドキュメントによると、固定したアイテムがオーバーフローメニューに移動するのは、検索がアクティブで十分なスペースがない場合だけです。

Tech Talk では、縦向きバーで .glassProminent や下部の検索フィールドがどう見えるかは扱っていないので、iPhone Duo のシミュレータで確認してください。タブバーも横に移動します。これについては iPhone Duo のタブバーと NavigationSplitViewのガイドで解説しています。

まとめ

• iOS 26 は、隣り合うツールバーのアイテムを自動的に共有の Liquid Glass のカプセルにまとめます。
• .buttonStyle(.glassProminent) はボタンをグループから外し、専用の色付きの形にします。主要なアクション 1 つに使いましょう。
• ToolbarSpacer(.fixed) はグループを分け、ToolbarSpacer(.flexible) はグループを押し離します。スペーサーには隣のアイテムと同じ配置を指定しましょう。
• DefaultToolbarItem(kind: .search, placement: .bottomBar) の両側に固定スペーサーを置くと、検索が専用のカプセルになります。
• インラインのタイトルが中央に留まるのは収まる場合だけなので、leading 側のタイトルにも対応できるようデザインしましょう。
• iPhone Duo の縦向きバーでは、フレキシブルスペーサーはゼロに縮み、固定スペーサーは残り、グループは保たれます。

次は、iPhone Duo の縦向きツールバーのガイドで、この新しいデバイスでバーが横に移動する仕組みを確認し、続いて iPhone Duo 対応チェックリストをひととおり実施してください。ヒンジを本当に活かしているアプリは Built for the fold でご覧いただけます。