ios - UIPanGestureRecognizer 当滑动单元格以获得更多按钮时如果用户滑动不到一半如何使 View 反弹

Question

我希望如果用户滑动的宽度小于按钮宽度的一半，那么它会弹回并且不显示任何按钮，但是如果用户滑动的宽度超过按钮宽度的一半，那么单元格就会弹回正确的位置。

这就是我目前所拥有的，可以左右滑动。

private func swipeBothButtonsBothPresent(gesture: UIPanGestureRecognizer) {
    let translation = gesture.translation(in: swipeAbleView)
    guard let gestureView = gesture.view else {
        return
    }
    let center: CGPoint = CGPoint(x: gestureView.center.x + translation.x, y: gestureView.center.y)

    let velocity: CGPoint = gesture.velocity(in: swipeAbleView)
    if velocity.x > 0 {
        //right
        if center.x < swipeAbleView.frame.width / 2 + leftButton.frame.size.width {
            swipeAbleView.center = center
        } else {
            swipeAbleView.center = CGPoint(x: swipeAbleView.frame.width / 2 + leftButton.frame.size.width, y: swipeAbleView.center.y)
        }
    } else {
        //left
        if center.x > swipeAbleView.frame.width / 2 - rightButton.frame.size.width {
            swipeAbleView.center = center
        } else if  isRightButtonThere {
            swipeAbleView.center = CGPoint(x: swipeAbleView.frame.width / 2 - rightButton.frame.size.width, y: swipeAbleView.center.y)
        }
    }
    gesture.setTranslation(CGPoint.zero, in: swipeAbleView)
}

Answer 1

您必须使用 UIPangesture 状态，这样您才能找出您所处的状态。您可以使用开关执行此操作并检查 .changed、.ended、.cancelled 状态。

private func swipteBothButtonsBothPresent(with gesture: UIPanGestureRecognizer) {
let translation = recognizer.translation(in: swipeAbleView)

// you can use the center point+velocity to compare to the gestureView center but there is another way as well directly access the translation.x
let center: CGPoint = CGPoint(x: gestureView.center.x + translation.x, y: gestureView.center.y)
let velocity: CGPoint = gesture.velocity(in: swipeAbleView)


// Pan gesture has state which you can access using the gesture you have passed
switch gesture.state {
case .changed:
    // Here you can directly check for translation.x
    /*
    if translation.x < 0 {
        // Do you're calculations
     } else {

     }
    */
    // Your logic to show left or right button
    if velocity.x > 0 {
        //right
        if center.x < swipeAbleView.frame.width / 2 + leftButton.frame.size.width {
            swipeAbleView.center = center
        } else {
            swipeAbleView.center = CGPoint(x: swipeAbleView.frame.width / 2 + leftButton.frame.size.width, y: swipeAbleView.center.y)
        }
    } else {
        //left
        if center.x > swipeAbleView.frame.width / 2 - rightButton.frame.size.width {
            swipeAbleView.center = center
        } else if  isRightButtonThere {
            swipeAbleView.center = CGPoint(x: swipeAbleView.frame.width / 2 - rightButton.frame.size.width, y: swipeAbleView.center.y)
        }
    }

    gesture.setTranslation(CGPoint.zero, in: swipeAbleView)

case .ended:
    // Check here if you have swiped more than buttons half width or lesss you can do it easily using the translation value you have
    // Check if user was swiping left or right you already has the velocity parameter or you can check translation.x to see if the value is negitive or positive (left or right)
    // I cast the translation.x to abs() so even if the value was negitive it will change it back to positive
    // do the check for left or right I have directly added the check for rightButton

    if abs(translation.x) > (rightButton.frame.size.width / 2) {
        // you have dragged more than half of the right button
        // even you can add spring animation to get the bounce effect
        UIView.animate(withDuration: 0.3) {
            // animate back to orignal place
        }
    }

case .cancelled:
    // Do the same dance for cancelled because there can be this state through some times reset add the same code from ended here
    // create a function move the code from .ended state to the function and call the function here
    //
    resetButtons(x: abs(translation.x))
default:
    // there are 3 more states but you can skip them .began, .failed, .possible
    break

}

func resetButtons(x: Int) {
    // Move the code from .ended state of the switch here
}