iOS拖动UIImageView

iOS拖动UIImageView实现详解

基础概念

在iOS中实现UIImageView的拖动功能主要涉及触摸事件处理和视图变换。UIImageView是UIView的子类，因此可以通过处理触摸事件来实现拖动效果。

实现方法

1. 使用UIPanGestureRecognizer（推荐方法）

这是最简洁和现代的实现方式：

import UIKit

class DraggableImageView: UIImageView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setup()
    }
    
    private func setup() {
        isUserInteractionEnabled = true
        let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePan(_:)))
        addGestureRecognizer(panGesture)
    }
    
    @objc private func handlePan(_ recognizer: UIPanGestureRecognizer) {
        let translation = recognizer.translation(in: self.superview)
        self.center = CGPoint(x: self.center.x + translation.x, 
                             y: self.center.y + translation.y)
        recognizer.setTranslation(.zero, in: self.superview)
    }
}

2. 手动处理触摸事件

如果需要更精细的控制，可以重写触摸方法：

class DraggableImageView: UIImageView {
    private var initialLocation = CGPoint.zero
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        isUserInteractionEnabled = true
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        isUserInteractionEnabled = true
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesBegan(touches, with: event)
        initialLocation = touches.first?.location(in: self.superview) ?? .zero
    }
    
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesMoved(touches, with: event)
        guard let touch = touches.first else { return }
        let location = touch.location(in: self.superview)
        
        UIView.animate(withDuration: 0.1) {
            self.center = CGPoint(
                x: self.center.x + (location.x - self.initialLocation.x),
                y: self.center.y + (location.y - self.initialLocation.y)
            )
        }
        
        initialLocation = location
    }
}

关键点说明

isUserInteractionEnabled: UIImageView默认是false，必须设为true才能接收触摸事件
坐标系转换: 确保在正确的视图坐标系中计算位置
动画效果: 使用UIView.animate可以添加平滑的移动效果

高级功能扩展

限制拖动范围

@objc private func handlePan(_ recognizer: UIPanGestureRecognizer) {
    guard let superview = self.superview else { return }
    let translation = recognizer.translation(in: superview)
    
    var newCenter = CGPoint(x: center.x + translation.x, y: center.y + translation.y)
    
    // 限制在父视图范围内
    let halfWidth = bounds.width / 2
    let halfHeight = bounds.height / 2
    
    newCenter.x = max(halfWidth, min(newCenter.x, superview.bounds.width - halfWidth))
    newCenter.y = max(halfHeight, min(newCenter.y, superview.bounds.height - halfHeight))
    
    center = newCenter
    recognizer.setTranslation(.zero, in: superview)
}

添加边界弹性效果

@objc private func handlePan(_ recognizer: UIPanGestureRecognizer) {
    guard let superview = self.superview else { return }
    let translation = recognizer.translation(in: superview)
    
    let newCenter = CGPoint(x: center.x + translation.x, y: center.y + translation.y)
    
    // 计算弹性效果
    let damping: CGFloat = 0.5
    let velocity = recognizer.velocity(in: superview)
    
    UIView.animate(withDuration: 0.5, 
                   delay: 0, 
                   usingSpringWithDamping: damping, 
                   initialSpringVelocity: abs(velocity.x + velocity.y) / 1000, 
                   options: [.allowUserInteraction, .beginFromCurrentState], 
                   animations: {
        self.center = newCenter
    })
    
    recognizer.setTranslation(.zero, in: superview)
}