iPadOS 18でのTabbarの仕様変更は結構骨が折れるやつかもしれない

WWDC2024が開催中ですね。
その発表の中で気になる点があったので速報と備忘録としてまとめてみます。

TL; DR

• iPadOS 18ではタブが再設計され、タブ⇔サイドバーの切り替えが可能に
• タブバーは画面上部に移動した
• SwiftUI.TabView だけでなく、 UITabBarController を使っている場合も影響がある（6/12現在のiPad OS 18 betaの挙動）
• 「タブ」の前提が大きく変わりそうなので、がんばりましょう

環境

• Xcode 16 beta(Released in June 10, 2024)
  • iPadOS 18 Simulator

前提: iPadOS 18 で再設計されたタブバー

• iPadOS 18において、タブバーは画面上部に表示されるようになった¹
  • iOS 18では、従来通り画面下部のまま

• タブバーはサイドバー表示に切り替える事ができる¹

確認したこと

機密保持のため、実行時のスクリーンショットはありません。あしからず。

どのようなタブバー実装が影響を受けるのか？

SwiftUI.TabView の場合

実装したもの

struct ContentView: View {
    var body: some View {
        TabView {
            Text("Tab 1").tabItem {
                Text("Item 1")
            }
            Text("Tab 2").tabItem {
                Text("Item 2")
            }
            Text("Tab 3").tabItem {
                Text("Item 3")
            }
        }
    }
}

結果

• iPadOS 18
  • 画面上部にタブバーが表示された
• iOS 18, iPad OS 17, iOS 17
  • 画面下部にタブバーが表示された

UITabBarController を使った場合

実装したもの

※ 上記の図は、Xcode15.3で同じようなものを作成し撮影したものです

結果

• iPadOS 18
  • 画面上部にタブバーが表示された
• iOS 18, iPad OS 17, iOS 17
  • 画面下部にタブバーが表示された

ここまでの結果まとめ

• いわゆる「タブバー」は、その実装がSwiftUI、UIKitのいずれであるかによらず、iPadOS 18においては、画面上部に表示される

追加で検証したこと

UITabBarController.Mode²の指定による挙動の変化

やったこと

上記の「UITabBarController を使った場合」で実装したUIKitプロジェクト内で、以下のような記述を追加

    override func viewDidLoad() {
        super.viewDidLoad()
        
        if #available(iOS 18, *){
            self.tabBarController?.mode = .tabBar
        }
    }

結果

• 明示的な指定を記述する前と変わらず、タブバーは画面上部に表示された

参考

• tabBarController?.mode = .tabSidebar と指定すると、タブ内にタブ⇔サイドバー表示を切り替えるボタンが追加された

まとめ

タブバーの実装がSwiftUI, UIKitのいずれであるかによらず、iPadOS 18では、タブが画面上部に表示されるようです。(6/12現在)

個人の観測範囲ではタブバーといえば「下タブ」「フッタ」と呼ばれていたり、Material DesignではそのものズバリBottom Navigation³があったり（※注: Material Design 3ではNavigation Bar⁴と呼ばれるようになっていたんですね）するなど、タブバーは下にあるものというのが従来のお決まりでした。

どうやら、iPadOS 18ではそのお決まりが覆されます。
それに伴い、アプリのUIにも少なくない影響が出るため、9月に控えているであろう正式リリースに向けて、開発者・デザイナでしっかりと対応をする必要がありそうです。
（iPadOS 18 betaのアップデートに伴い、実は旧来の形式のタブも使えます…なんて展開を妄想していますが、望みは薄そうです）

リンク

1. Platforms State of the Union - WWDC24 ↩ ↩²

2. UITabBarController.Mode ↩

3. Bottom Navigation - Material Design 2 ↩

4. Navigation Bar - Material Design 3 ↩