UIView平移拖拽超出限制：skinView向下拖拽越界问题

我有两个UIView：skinView（紫色）和bottomView（粉色），skinView位于bottomView上方，二者尺寸与约束完全一致。我为skinView添加了UIPanGestureRecognizer，通过调整center Y约束实现仅上下拖拽，限制其向上拖拽至一半位置后可向下返回。我添加逻辑仅允许当skinView的Y原点小于bottomView的Y原点时向下拖拽，但有时skinView会拖拽至bottomView的Y原点下方。添加日志后发现，向下拖拽完成后skinView的Y原点偏差较大：

Skin View y position: 77.0
Bottom View y position: 1.6666666666666856

相关代码如下：

override func viewDidLoad() {
    super.viewDidLoad()
    panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(didPan(_:)))
    skinView.addGestureRecognizer(panGestureRecognizer!)
}

@objc private func didPan(_ sender: UIPanGestureRecognizer) {
    let height = self.skinView.frame.size.height/2
    let skinViewBottomY = self.skinView.frame.origin.y + self.skinView.frame.size.height
    let bottomViewBottomY = self.bottomView.frame.origin.y + self.bottomView.frame.size.height
    

    if panGestureRecognizer!.state == .began {
        print("Pan started")
     } else if panGestureRecognizer!.state == .changed {
         let translation = panGestureRecognizer!.translation(in: self.skinView)
         if (translation.y < 0 && skinViewBottomY >= bottomViewBottomY/2) {
             self.verticalConstraint?.constant += translation.y
             panGestureRecognizer!.setTranslation(.zero, in: self.skinView)
             print("UP")
         } else if (translation.y > 0 && self.skinView.frame.origin.y < self.bottomView.frame.origin.y) {
             self.verticalConstraint?.constant += translation.y
             panGestureRecognizer!.setTranslation(.zero, in: self.skinView)
             print("DOWN")
         }
     }
}

相关截图：

问题原因与修复方案 #

核心问题 #

1. frame时效性问题：在手势.changed状态中直接使用frame判断位置，此时约束更新后frame并未立即同步刷新，导致逻辑判断基于旧数据，出现越界。
2. 边界约束缺失：仅判断向下拖拽的触发条件，但未限制拖拽的下限，手势的单次translation可能产生较大偏移，直接累加约束会导致位置超出预期。
3. 未处理结束状态：拖拽结束后没有将位置修正到合法范围，最终停留在偏差值。

修复后的代码 #

override func viewDidLoad() {
    super.viewDidLoad()
    panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(didPan(_:)))
    skinView.addGestureRecognizer(panGestureRecognizer!)
    // 保存初始center Y约束值，作为下边界基准
    originalVerticalConstant = self.verticalConstraint?.constant ?? 0
}

private var originalVerticalConstant: CGFloat = 0

@objc private func didPan(_ sender: UIPanGestureRecognizer) {
    guard let verticalConstraint = self.verticalConstraint else { return }
    let viewHeight = skinView.bounds.height
    
    // 计算合法约束的上下限
    // 上边界：skinView上移一半高度，约束值减少viewHeight/2
    let upperBoundConstant = originalVerticalConstant - viewHeight/2
    // 下边界：skinView回到初始位置，约束值等于初始值
    let lowerBoundConstant = originalVerticalConstant

    switch sender.state {
    case .began:
        print("Pan started")
    case .changed:
        // 以父视图为参考计算位移，避免自身位置变化干扰
        let translation = sender.translation(in: self.view)
        // 临时计算新约束值并限制在合法区间内
        var newConstant = verticalConstraint.constant + translation.y
        newConstant = max(upperBoundConstant, min(newConstant, lowerBoundConstant))
        verticalConstraint.constant = newConstant
        sender.setTranslation(.zero, in: self.view)
    case .ended, .cancelled:
        // 拖拽结束后修正位置到合法范围，添加动画提升体验
        verticalConstraint.constant = max(upperBoundConstant, min(verticalConstraint.constant, lowerBoundConstant))
        UIView.animate(withDuration: 0.2) {
            self.view.layoutIfNeeded()
        }
    default:
        break
    }
}

关键优化点 #

• 切换位移参考系：以父视图为translation的参考，避免skinView自身位置变化导致的位移计算误差。
• 基于约束值做边界控制：直接操作约束的上下限，比依赖动态变化的frame更准确，符合AutoLayout的布局逻辑。
• 处理结束状态：拖拽结束后强制修正位置，确保最终停留在合法范围内，同时添加动画优化交互。

内容的提问来源于stack exchange，提问作者Brosef