SwiftUIでのiOS・iPadの画面遷移時の表示方法の違い

SwiftUIで画面遷移を実装した際に、
iPadとiPhoneで微妙に遷移時の表示が異なる場合があったので、まとめました。

■ 動作環境
iOS15.8
iPadPro mini(6th Generation)
※iPadPro（12.9inch）（5th Generation）も一部あり
iPhone13 mini

タブ遷移

■ iPad

■ iOS

■ ソースコード

import SwiftUI

@main
struct iPadTransitionTestApp: App {
    var body: some Scene {
        WindowGroup {
            TabView {
                TabTest1().tabItem { Image(systemName: "house") }
                TabTest2().tabItem { Image(systemName: "map") }
                TabTest3().tabItem { Image(systemName: "person.crop.circle") }
            }
        }
    }
}

ナビゲーション遷移

iPadの場合はNavigationViewStyleとisDetailLinkによって、表示方法が異なる

■ iOS

■ iPad navigationViewStyle(.stack)の場合

• iOSと同じ画面表示
• isDetailLinkの設定は関係なし
  

■ iPad navigationViewStyle(.columns)の場合

• iOSと違い横にNavigationの選択肢が現れる。
• また、isDetailLinkによって遷移先の表示方法が異なる
  

■ iPad navigationViewStyle(.columns)の場合 横向き

• 横向きの場合、左上にメニュー記号が現れる
  

■ ソースコード

import SwiftUI

struct NavigationViewTest: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink("遷移先1 isDetailLink(false)") {
                    NavigationTransition1()
                }.isDetailLink(false)
                NavigationLink("遷移先2 isDetailLink(true)") {
                    NavigationTransition2()
                }.isDetailLink(true)
                NavigationLink("遷移先3") {
                    NavigationTransition3()
                }
            }.navigationTitle(Text("メインタイトル"))
            Text("遷移先を選択してください")
        }.navigationViewStyle(.columns)
        // .navigationViewStyle(.stack)
    }
}

アラート表示

■ iOS

■ iPad (縦向きも横向きも同じ挙動）

■ ソースコード

import SwiftUI

struct AlertTest: View {
    @State var isActive = false
    var body: some View {
        Button("アラート表示") {
            isActive.toggle()
        }.alert("アラート表示", isPresented: $isActive, actions: {})
    }
}

シート表示

■ iOS

■ iOS 横向き
全画面に覆われて表示される

■ iPad 縦向き

※ 今回はiPad miniを基準にして比較していますが、iPad Pro(12.9-inch)の場合は以下の表示

■ iPad 横向き

■ ソースコード

import SwiftUI

struct SheetTest: View {
    @State var isActive = false

    var body: some View {
        Button("シート表示") {
            isActive.toggle()
        }
        .sheet(isPresented: $isActive, onDismiss: {}) {
            SheetTest2()
        }
    }
}

コンファメーションダイアログ

■ iOS 縦向きも横向きも同じ挙動

■ iPad 縦向きも横向きも同じ挙動

■ ソースコード

import SwiftUI

struct ConfirmationDialogTest: View {
    @State var isActive = false
    var body: some View {
        Button("コンファメーションダイアログ表示") {
            isActive.toggle()
        }.confirmationDialog(Text("タイトル"), isPresented: $isActive, titleVisibility: Visibility.visible) {
            Button("はい") {}
            Button("いいえ") {}
        } message: {
            Text("詳細メッセージ")
        }
    }
}

ポップオーバー表示

■ iOS
シート表示と縦向きも横向きも挙動は同じ

■ iPad 縦向きも横向きも挙動は同じ

import SwiftUI

struct PopOverTest: View {
    @State var isActive = false
    var body: some View {
        Button("ポップオーバーテスト") {
            isActive.toggle()
        }
        .popover(isPresented: $isActive) {
            Text("ポップオーバー表示")
        }
    }
}

ドラッグジェスチャーを使った遷移

■ iOS・iPad

■ ソースコード
以下を参照
https://yosshiblog.jp/swiftui_draggesture/

その他、トランジッション、アニメーションを使った遷移

参考