【SwiftUI】スワイプ処理を実装するには？

2023年11月27日2023年12月30日

記事内に商品プロモーションが含まれる場合があります

SwiftUIを使用して画面のスワイプ処理を実装するにはDragGestureを使用します。

以下は、簡単な例として、画面を上下にスワイプしたときにラベルのテキストが変更されるようなコードです。

struct ContentView: View {
    @State private var labelText = "スワイプしてください"
    
    var body: some View {
        ZStack {
            // 画面全体の背景色
            Color.blue.edgesIgnoringSafeArea(.all)
          
            // 表示するテキスト
            Text(labelText)
                .font(.largeTitle)
                .foregroundColor(.white)
                .padding()

        }
        .gesture(
            DragGesture()
                .onEnded { gesture in  
                    if gesture.translation.height > 0 {
                        // 下にスワイプした場合の処理
                        self.labelText = "下にスワイプしました"
                    } else {
                        // 上にスワイプした場合の処理
                        self.labelText = "上にスワイプしました"
                    }
                }
        )
    }
}

上記の例ではスワイプが終わった後に、上にスワイプしたか、下にスワイプしたかを検知しています。

左右のスワイプを検知したい場合は、次のようにwidthのサイズが0より大きかで判断してください。

 DragGesture()
     .onEnded { gesture in
         if gesture.translation.width > 0 {
             // 右にスワイプした場合の処理
             self.labelText = "右にスワイプしました"
         } else {
             // 左にスワイプした場合の処理
             self.labelText = "左にスワイプしました"
         }
      }

上下左右の４方向のスワイプを判別したい場合は？

上下左右のスワイプを判別したい場合、まず水平方向の変位と垂直方向の変位のどちらが大きいかを判別します。

水平方向の変位が大きい場合は、横スワイプ、垂直方向の変位が大きい場合は縦スワイプとします。

その後、横スワイプであれば、左右のどちらなのか、縦スワイプであれば上下のどちらなのかを判定します。

DragGesture()
    .onEnded { gesture in
        let horizontalTranslation = gesture.translation.width
        let verticalTranslation = gesture.translation.height
        
        if abs(horizontalTranslation) > abs(verticalTranslation) {
            // 水平方向のスワイプ
            if horizontalTranslation > 0 {
                // 右にスワイプした場合の処理
                self.labelText = "右にスワイプしました"
            } else {
                // 左にスワイプした場合の処理
                self.labelText = "左にスワイプしました"
            }
        } else {
            // 垂直方向のスワイプ
            if verticalTranslation > 0 {
                // 下にスワイプした場合の処理
                self.labelText = "下にスワイプしました"
            } else {
                // 上にスワイプした場合の処理
                self.labelText = "上にスワイプしました"
            }
        }
    }