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

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

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

## タブ遷移
■ iPad
![Simulator Screen Recording - iPad mini (6th generation) - 2022-08-07 at 21.19.37.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160605/d6728129-84ec-b7f0-f6f0-767e85c179c3.gif)



■ iOS
![Simulator Screen Recording - iPhone 13 mini - 2022-08-07 at 20.51.08.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160605/5ae025a0-8d88-931d-00a1-37893db861bb.gif)

■ ソースコード
```swift
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
![Simulator Screen Recording - iPhone 13 mini - 2022-08-07 at 21.22.05.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160605/c64e3327-e0f1-1544-ca0a-637f855f2344.gif)

■ iPad navigationViewStyle(.stack)の場合
- iOSと同じ画面表示
- isDetailLinkの設定は関係なし
![Simulator Screen Recording - iPad mini (6th generation) - 2022-08-07 at 21.30.56.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160605/eead12a7-691d-895a-0074-2af40a12995e.gif)

■ iPad navigationViewStyle(.columns)の場合
- iOSと違い横にNavigationの選択肢が現れる。
- また、isDetailLinkによって遷移先の表示方法が異なる
![Simulator Screen Recording - iPad mini (6th generation) - 2022-08-07 at 21.28.34.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160605/731505e7-eb5c-8568-8a26-4eb4421c07ba.gif)

■ iPad navigationViewStyle(.columns)の場合 横向き
- 横向きの場合、左上にメニュー記号が現れる
![Simulator Screen Recording - iPad mini (6th generation) - 2022-08-07 at 21.37.43.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160605/60366ec5-218f-c9ed-c3f3-820e8208795e.gif)

■ ソースコード
```swift
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
![Simulator Screen Recording - iPhone 13 mini - 2022-08-07 at 21.44.18.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160605/b9975e6e-e095-0639-bb50-30cc2eba50ad.gif)


■ iPad (縦向きも横向きも同じ挙動）
![Simulator Screen Recording - iPad mini (6th generation) - 2022-08-07 at 21.43.16.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160605/b0088fbb-4b15-5493-951b-720956f4faa9.gif)

■ ソースコード
```swift
import SwiftUI

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

## シート表示
■ iOS
![Simulator Screen Recording - iPhone 13 mini - 2022-08-07 at 21.48.31.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160605/50eba9ed-a58d-e315-7dab-191bda918e8d.gif)

■ iOS 横向き
全画面に覆われて表示される
![Simulator Screen Recording - iPhone 13 mini - 2022-08-07 at 21.49.44.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160605/dc07a0bd-e0a3-ee97-fe1e-4151dc386ba4.gif)

■ iPad 縦向き
![Simulator Screen Recording - iPad mini (6th generation) - 2022-08-07 at 21.54.44.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160605/60dda7fd-390e-7cce-5269-7bdc161b899e.gif)

※ 今回はiPad miniを基準にして比較していますが、iPad Pro(12.9-inch)の場合は以下の表示
![Simulator Screen Recording - iPad Pro (12.9-inch) (5th generation) - 2022-08-07 at 21.56.55.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160605/300d3a78-0c2d-d350-dacc-0c10d8f1a2b5.gif)

■ iPad 横向き
![Simulator Screen Recording - iPad mini (6th generation) - 2022-08-07 at 21.55.52.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160605/263d0cfd-8f83-e60b-a76d-ff68bd662e30.gif)

■ ソースコード
```Swift
import SwiftUI

struct SheetTest: View {
    @State var isActive = false

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

## コンファメーションダイアログ
■ iOS 縦向きも横向きも同じ挙動
![Simulator Screen Recording - iPhone 13 mini - 2022-08-07 at 22.07.42.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160605/2a6f1472-0be7-5f12-b001-70c8c263212b.gif)

■ iPad 縦向きも横向きも同じ挙動
![Simulator Screen Recording - iPad mini (6th generation) - 2022-08-07 at 22.09.38.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160605/f1e86d3a-e5b5-a28a-3c86-1cf305f5a1e0.gif)

■ ソースコード
```Swift
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 
シート表示と縦向きも横向きも挙動は同じ
![Simulator Screen Recording - iPhone 13 mini - 2022-08-07 at 22.14.15.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160605/82c0934c-af0c-a558-d7ad-1427668f9690.gif)

■ iPad 縦向きも横向きも挙動は同じ
![Simulator Screen Recording - iPad mini (6th generation) - 2022-08-07 at 22.16.55.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160605/f14c67a3-077e-05b8-49c9-b46af4e1738c.gif)


```swift
import SwiftUI

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

## ドラッグジェスチャーを使った遷移
■ iOS・iPad
![Simulator Screen Recording - iPhone 13 mini - 2022-08-08 at 09.39.55.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160605/d57b92fe-fea5-c87c-04a1-6260835b9313.gif)

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

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

https://capibara1969.com/2442/



## 参考
https://capibara1969.com/3774/

https://developer.apple.com/documentation/swiftui/view/popover(ispresented:attachmentanchor:arrowedge:content:)

https://yosshiblog.jp/swiftui_draggesture/

https://www.choge-blog.com/programming/swiftuipagenavigationslideupanimation/

https://qiita.com/maiyama18/items/bc55b38ffe2ff641f45b

https://qiita.com/masa7351/items/0567969f93cc88d714ac
 
https://inon29.hateblo.jp/entry/2020/03/28/175807