🤔

iPadOS18以上の場合、ナビゲーションタイトルの扱いに注意が必要

2025/02/12に公開

iPadOS18以上かつタブの上部表示を有効にしている場合に気づきがあったのでまとめておきます。

1.タブ直下にあるViewにタイトルを設定する場合、DisplayModeの設定によって表示・非表示が変わる

struct SecondTabView: View {
    var body: some View {
        NavigationStack {
            VStack {
                NavigationLink(destination: DetailView()) {
                    VStack {
                        Image(systemName: "moon.fill")
                            .imageScale(.large)
                            .foregroundStyle(.blue)
                        Text("Second Tab")
                    }
                }
            }
            .navigationTitle("Second Tab Second Tab Second Tab")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}
struct ContentView: View {
    var body: some View {
        TabView {
            Tab("First", systemImage: "1.circle") {
                FirstTabView()
            }
            .badge(1)

            Tab("Second", systemImage: "2.circle") {
                SecondTabView()
            }
        }
    }
}

この場合、ナビゲーションタイトルに設定している文字列は表示されません

DisplayModeにlargeを指定すると表示されます。

2.遷移後の画面ではナビゲーションタイトルが表示されるが、親画面のタイトルが一瞬見える

SecondTabViewからNavigationLinkでDetailViewに遷移します。

struct DetailView: View {
    var body: some View {
        VStack {
            Image(systemName: "star.circle.fill")
                .imageScale(.large)
                .foregroundStyle(.green)
            Text("Detail View")
        }
        .navigationTitle("Detail")
        .navigationBarTitleDisplayMode(.inline)
    }
}

DetailViewでは今まで通りナビゲーションのタイトルが表示されます。

問題は元の画面に戻る場合で、アニメーション完了後に一瞬タイトルが表示されます。

最上位のViewではタイトルを設定しない、またはlargeサイズを設定することが推奨なんですかね?

追記

AppStoreのArcadeタブだといい感じに表示されてますが、どうやるんでしょうか?
ご存知の方いたらコメントください。

追記2

UIKitを使用してナビゲーションを組み立てている場合は、navigationItem.titleViewを使用するといい感じになります。
SwiftUIの場合は・・・?

Discussion