参考

【iOS】遷移方法まとめとエンジニア1年生の独り言
 上部左右から出現するメニューを作る
 SwiftUIのGestureについてまとめ

画面遷移について

モーダル ... 下から画面が出現
プッシュ ... 右から画面が出現
タブ ... 瞬時の切り替わり(タブアイテムのタップ)
ページ ... 左右から画面が出現(左右スワイプ) ※サイドメニューと同義

ページ遷移(左部)の実装

動画

ページ遷移(左部) pic.twitter.com/0uWsH7ef0R
— APPLE (@applecoder6) April 13, 2021

コード

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State private var showingModal = false
    
    @State private var vOffset = CGFloat.zero    // 現在のオフセット(y軸方向)
    @State private var vCloseOffset = CGFloat.zero   // 閉状態のオフセット(y軸方向)
    @State private var vOpenOffset = CGFloat.zero    // 開状態のオフセット(y軸方向)
    @State private var hOffset = CGFloat.zero    // 現在のオフセット(x軸方向)
    @State private var hCloseOffset = CGFloat.zero   // 閉状態のオフセット(x軸方向)
    @State private var hOpenOffset = CGFloat.zero    // 開状態のオフセット(x軸方向)
   
    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .leading) {
                // メインコンテンツ
                VStack {
                    Button("Show ModalView.") {
                        self.showingModal.toggle()
                    }.sheet(isPresented: $showingModal) {
                        ModalView()
                    }
                    
                    Divider()
                    
                    NavigationView {
                        NavigationLink(destination: PushView()) {
                            Text("Show PushView.")
                        }.navigationBarTitle("ContentView", displayMode: .automatic)
                    }
                    
                    Divider()
                    
                    TabView {
                        TabAView()
                            .tabItem {
                                Image(systemName: "moon")
                                Text("Tab A")
                            }
                        
                        TabBView()
                            .tabItem {
                                Image(systemName: "moon.fill")
                                Text("Tab B")
                            }
                    }
                }
                // 上部メニュー
                PageUpView()
                    .foregroundColor(Color.red)
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    // View描画時に呼び出すメソッド
                    .onAppear(perform: {
                        // PageUpViewのオフセット初期値として負の方向(上方向)に[Safe Areaの高さ]+[PageUpView自体の高さ]分ずらす
                        self.vOffset = -1 * (geometry.frame(in: .global).origin.y + geometry.size.height)
                        // 閉状態のオフセット = 初期状態のオフセット
                        self.vCloseOffset = self.vOffset
                        // 開状態のオフセット = 0
                        self.vOpenOffset = .zero
                    })
                    // オフセット
                    .offset(y: self.vOffset)
                    // アニメーション
                    .animation(.default)
                
                // 左部メニュー
                PageLeftView()
                    .foregroundColor(Color.blue)
                    .frame(width: geometry.size.width)
                    .edgesIgnoringSafeArea(.all)
                    // View描画時に呼び出すメソッド
                    .onAppear(perform: {
                        self.hOffset = -1 * geometry.size.width
                        self.hCloseOffset = self.hOffset
                        self.hOpenOffset = .zero
                    })
                    .offset(x: self.hOffset)
                    .animation(.default)
            }
            //ジェスチャーに関する実装
            .gesture(DragGesture(minimumDistance: 5)
                        // DragGestureの入力開始時の呼び出しメソッド
                        .onChanged { value in
                            // ContentViewのy軸方向の現在のオフセットが初期値でない かつ DragGestureの開始位置のy座標が30未満の場合
                            if (self.vOffset != self.vOpenOffset && value.startLocation.y < 30) {
                                // ContentViewの現在のオフセット = 初期状態からy軸方向にDragされた距離
                                self.vOffset = self.vCloseOffset + value.translation.height
                            }
                            // ContentViewのx軸方向の現在のオフセットが0未満(常に満たす) かつ DragGestureの開始位置のx座標が30未満の場合
                            else if (self.hOffset < self.hOpenOffset && value.startLocation.x < 30) {
                                // ContentViewの現在のオフセット = 初期値からx方向にDragされた距離
                                self.hOffset = self.hCloseOffset + value.translation.width
                            }
                        }
                        // DragGestureの入力終了時の呼び出しメソッド
                        .onEnded { value in
                            //Gesture終了時のViewのy座標がGesture開始時よりも高い(Viewが下方向に動いた場合)
                            if (value.startLocation.y < value.location.y) {
                                // Gestureの開始位置のy座標が30未満の場合
                                if (value.startLocation.y < 30) {
                                    // PageUpViewを開状態にする
                                    self.vOffset = self.vOpenOffset
                                }
                            }
                            // Gesture終了時のViewのx座標がGesture開始時よりも高い(Viewが右方向に動いた場合)
                            else if (value.location.x > value.startLocation.x) {
                                if (value.startLocation.x < 30) {
                                    // PageLeftViewを開状態にする
                                    self.hOffset = self.hOpenOffset
                                }
                            }
                            else {
                                // PageUpView, PageLeftViewを閉状態にする
                                self.hOffset = self.hCloseOffset
                                self.vOffset = self.vCloseOffset
                            }
                        }
            )
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

PageLeftView.swift

import SwiftUI

struct PageLeftView: View {
    var body: some View {
        ZStack {
            Color.blue
            Text("This is Left Side.")
        }
    }
}

struct PageLeftView_Previews: PreviewProvider {
    static var previews: some View {
        PageLeftView()
    }
}

学習結果

オフセット変数

offset変数はContentView自身で管理している、ContentViewのオフセットを指す。
上下左右のサイドメニューを実装する際はx軸/y軸方向それぞれにオフセット変数を設定する必要がある。

不具合

DragGesture時にPageLeftViewが完全な開状態にならず、
スライドした分だけで画面が止まってしまう場合がある。(動画の冒頭参照)
→ 考察: Gesture時に、onChanged修飾子内のself.hOffset = self.hCloseOffset + value.translation.widthが動作している?