SwiftUIで画面遷移を実装した際に、
iPadとiPhoneで微妙に遷移時の表示が異なる場合があったので、まとめました。
■ 動作環境
iOS15.8
iPadPro mini(6th Generation)
※iPadPro(12.9inch)(5th Generation)も一部あり
iPhone13 mini
タブ遷移
■ ソースコード
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によって、表示方法が異なる
■ iPad navigationViewStyle(.stack)の場合
■ iPad navigationViewStyle(.columns)の場合
■ 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)
}
}
アラート表示
■ ソースコード
import SwiftUI
struct AlertTest: View {
@State var isActive = false
var body: some View {
Button("アラート表示") {
isActive.toggle()
}.alert("アラート表示", isPresented: $isActive, actions: {})
}
}
シート表示
※ 今回はiPad miniを基準にして比較していますが、iPad Pro(12.9-inch)の場合は以下の表示
■ ソースコード
import SwiftUI
struct SheetTest: View {
@State var isActive = false
var body: some View {
Button("シート表示") {
isActive.toggle()
}
.sheet(isPresented: $isActive, onDismiss: {}) {
SheetTest2()
}
}
}
コンファメーションダイアログ
■ ソースコード
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("詳細メッセージ")
}
}
}
ポップオーバー表示
import SwiftUI
struct PopOverTest: View {
@State var isActive = false
var body: some View {
Button("ポップオーバーテスト") {
isActive.toggle()
}
.popover(isPresented: $isActive) {
Text("ポップオーバー表示")
}
}
}
ドラッグジェスチャーを使った遷移
■ ソースコード
以下を参照
https://yosshiblog.jp/swiftui_draggesture/
その他、トランジッション、アニメーションを使った遷移
参考