iOS26のLiquidGlassでNavigationBarのカスタムを色々試す

はじめに

iOS 26以降の開発における大きな変更点の一つである Liquid Glass。
ナビゲーションバーやタブバーの見た目が劇的に変わるこの機能について、開発時にどのようなカスタマイズが可能かを検証することは重要なポイントです。

この記事では、SwiftUIおよびUIKitを使用したナビゲーションのボタンにおいて、Liquid Glassの挙動を制御するAPIを検証し、実装パターンをまとめます。

なお、実装例のソースコードでは該当機能にフォーカスするため、Viewの詳細な実装定義を省略しています。

検証環境

• Xcode 26.1.1
• iOS 26.0+
• iPhone 16

検証項目

• UIBarButtonItem・ToolbarItem
• Viewに対するLiquid Glass処理

UIBarButtonItem・ToolbarItem

ガラス背景を分離させる

UIKit

• 同じ UIBarButtonItemGroup に含まれる UIBarButtonItem の背景を共有するか否かを設定できる
• false にすると、設定したボタンのガラス背景が分離される

実装例の抜粋

let upButtonView: UIBarButtonItem
let downButtonView: UIBarButtonItem
let settingButtonView: UIBarButtonItem

settingButtonView.sharesBackground = false

navigationItem.rightBarButtonItems = [
    settingButtonView,
    downButtonView,
    upButtonView
]

実行結果

---

• UIBarButtonItemGroup 内の UIBarButtonItem 同士の背景を分離させる
  • 非Liquid Glass環境では設定数値分のSpacerとして振る舞う
• Liquid Glass環境では、設定数値に関わらず規定の間隔で背景分離のみが適用される
• 数値を渡さない fixedSpace() も同様に背景分離が行われる
  Liquid Glass環境下での挙動に違いは見られず、どちらも一定間隔での分離を行う仕様と考えられる

実装例の抜粋

let upButtonView: UIBarButtonItem
let downButtonView: UIBarButtonItem
let settingButtonView: UIBarButtonItem

navigationItem.rightBarButtonItems = [
    settingButtonView,
    .fixedSpace(100),
    downButtonView,
    upButtonView
]

実行結果

SwiftUI

• ToolbarContent 間のガラス背景を分離することができる

実装例の抜粋

let upButton: Button<Image>
let downButton: Button<Image>
let settingButton: Button<Image>

view
    .toolbar {
        ToolbarItemGroup(placement: .topBarTrailing) {
            upButton
            downButton
        }

        ToolbarSpacer(.fixed, placement: .topBarTrailing)

        ToolbarItem(placement: .topBarTrailing) {
            settingButton
        }
    }

実行結果

ガラス背景を非表示にする

UIKit

• そのグループの共有背景を個別に切り替えできる
• true に設定することで、UIBarButtonItemのガラス背景が描画されなくなる

実装例の抜粋

let upButtonView: UIBarButtonItem
let downButtonView: UIBarButtonItem
let settingButtonView: UIBarButtonItem

settingButtonView.hidesSharedBackground = true

navigationItem.rightBarButtonItems = [
    settingButtonView,
    downButtonView,
    upButtonView
]

実行結果

SwiftUI

• そのグループの共有背景を個別に切り替え可能
• .hidden に設定することで、ナビゲーションアイテムのガラス背景が描画されなくなる
• Viewではなく ToolbarContent に対して適用する必要がある

実装例の抜粋

let upButton: Button<Image>
let downButton: Button<Image>
let settingButton: Button<Image>

view
    .toolbar {
        ToolbarItemGroup(placement: .topBarTrailing) {
            upButton
            downButton
        }
        ToolbarItem(placement: .topBarTrailing) {
            settingButton
        }
        .sharedBackgroundVisibility(.hidden)
    }

実行結果

ガラスの背景色をつける

UIKit

• UIBarButtonItem.Style の新しい要素
• Liquid Glassの背景色に任意の色を設定できる
• tintColor の設定を行わない場合はボタンのデフォルト色である青色になる
• 色が設定されたボタンは自動的に分離される

実装例の抜粋

let upButtonView: UIBarButtonItem
let downButtonView: UIBarButtonItem
let settingButtonView: UIBarButtonItem

settingButtonView.style = .prominent
settingButtonView.tintColor = .orange

navigationItem.rightBarButtonItems = [
    settingButtonView,
    downButtonView,
    upButtonView
]

実行結果

SwiftUI

• ButtonStyle を変更し、.tint() に任意の色を指定すると背景色が変化する
• ButtonStyle の一種であるため、ToolbarContent ではなく Button に直接適用する必要がある
• 非Liquid Glass環境ではガラス効果のない状態で色が適用されるため、OSバージョンによる表示の分岐には注意が必要

実装例の抜粋

let upButton: Button<Image>
let downButton: Button<Image>
let settingButton: Button<Image>

view
    .toolbar {
        ToolbarItemGroup(placement: .topBarTrailing) {
            upButton
            downButton
        }
        ToolbarItem(placement: .topBarTrailing) {
            settingButton
                .buttonStyle(.borderedProminent)
                .tint(Color.orange)
        }
    }

実行結果

Viewに対するLiquid Glass処理

UIKit

• UIVisualEffectView.effect の新しい要素
• ぼかし（Blur）を適用する際と同様の手順で、ガラスのエフェクトを適用できる

実装例の抜粋

override func viewDidLoad() {
    super.viewDidLoad()
    // ガラス化したいViewをUIEffectViewの中に入れる
    headerGlassView.contentView.addSubview(buttonView)
    view.addSubview(buttonGlassView)
}

private let buttonGlassView: UIVisualEffectView = {
    let effect = UIGlassEffect()
    return UIVisualEffectView(effect: effect)
}()

実行結果

SwiftUI

• 自身のViewをガラス化することができる
• 元のViewのみに適用されないよう、.frame や .font などの外観変更モディファイアを先に記述する必要がある

実装例の抜粋

 Image(systemName: "gearshape")
    .font(.system(size: 24))
    .frame(width: 80.0, height: 40.0)
    .glassEffect()

実行結果

• ButtonStyle の新しい要素
• ボタンの見た目をガラス化した上でLongPress時にガラスエフェクトのハイライトが付与される
• Label部分のViewに合わせてサイズ調整が行われているようで、ガラス部分の厳密なサイズ指定は難しい場合がある

実装例の抜粋

HStack {
    Button("Button") {}
        .buttonStyle(.glass)

    Button("Button") {}
        .buttonStyle(.glassProminent)

    Button("Button") {}
        .buttonStyle(.glass(.clear))
}

実行結果

最後に

本記事ではUIBarButtonItem・ToolbarItem・カスタムで作成したViewを対象とするLiquidGlass関連のAPIについて記載しました。

ここで紹介した以外にも、標準コンポーネントに対して提供されている機能は数多くあります。
また、OSのバージョンアップによって今後使える機能が増えることは十分に予測されます。
互換性を考慮しつつ、適切にLiquid Glassの実装を行っていきたいものです。