CODEWITHSUNDEEP
iosswiftuiswift5draggesture
SandeepAggarwal
SandeepAggarwal

Reputation: 1293

SwiftUI drag gesture freezes with multi-touch

I am trying to drag a view in SwiftUI.

The drag works perfectly until I place my second finger on screen, after that the drag stops and neither of the code blocks (onChanged, onEnded) gets called.

But, when I again start dragging with a single finger, it again starts working.

Is there any work around to fix this or I am missing something?

struct Pager: View {
  func drag(geometry: GeometryProxy) -> some Gesture {
    DragGesture()
    .onChanged({ (value) in
      //some code
    })
    .onEnded({ (value) in
      //some code
    })
  }

  var body: some View {
    GeometryReader { (geometry) in
      ZStack {
        ForEach(self.items.indices.reversed(), id: \.self) { index in
          Card(index: index, item: self.items[index])
            .offset(x: 0, y: self.offset(index: index, geometry: geometry))
            .animation(.linear)
        }
      }
      .background(Color.black)
      .gesture(self.drag(geometry: geometry))
    }
  }
}

Upvotes: 8

Views: 2009

Answers (2)

Sufiyan Yusuf
Sufiyan Yusuf

Reputation: 51

This approach is pretty helpful :

Detect DragGesture cancelation in SwiftUI

So basically, you compose the drag gesture with pinch & rotation gestures(combine them using .simultaneously).

When either pinch or rotation gets triggered, you can use it to signal a cancellation for your drag gesture and update your state accordingly

Upvotes: 2

Adam Dama
Adam Dama

Reputation: 11

You can use the same solution as this post, as I believe it is the same underlying problem. The solution employs a GestureState, which (as stated in the linked post) is a temporary value, and returns back to its initial state (0, 0) when the gesture is completed/interrupted.

Your code should look something like this when using the GestureState (though you may be able to adapt it to use a separate drag method like in your original post):

struct Pager: View {
  @GestureState private var dragPosition = CGSize.zero

  var body: some View {
      ZStack {
        ForEach(self.items.indices.reversed(), id: \.self) { index in
          Card(index: index, item: self.items[index])
            .offset(x: 0, y: self.dragPosition.height) // This will now map the y offset of the card to the dragPosition GestureState. If you want the x offset use self.dragPosition.width
            .animation(.linear)
        }
      }
      .background(Color.black)
      .gesture(
          DragGesture()
             .updating($dragPosition) { (value, gestureState, transaction) in
                 gestureState = CGSize(width: value.location.x - value.startLocation.x, height: value.location.y - value.startLocation.y)
              }
              .onChanged { value in
                  print("I'm changing")
              }
              .onEnded { value in
                  print("I've ended")
              }
      )
    }
}

Upvotes: 1

Related Questions