Swift中使用UIPanGestureRecognizer实现多图片移动问题咨询

嘿，我完全懂你现在的困扰——刚上手Swift和Xcode，想做类似Buzzle的拖拽图片功能，结果加了手势后只有最后一张图能响应，这绝对是新手常踩的坑，咱们一步步把它搞定！

问题根源 #

你遇到的情况大概率是两个原因之一：

1. UIImageView默认关闭了用户交互：UIImageView的isUserInteractionEnabled默认是false，手势根本没法触发。
2. 重复使用同一个手势识别器实例：一个手势识别器只能绑定到一个视图上，如果你把同一个手势对象加到多个图片视图，最后只有最后一个绑定的视图会生效。

解决方案 #

下面是具体的实现步骤，包含代码示例：

1. 确保使用UIImageView并开启用户交互

记住：UIImage只是图片数据，不能响应触摸，必须把它放到UIImageView里。而且一定要给每个UIImageView开启用户交互：

imageView.isUserInteractionEnabled = true

2. 给每个图片视图单独添加手势识别器

你可以复用同一个回调方法，但每个图片视图都需要自己的手势实例。比如批量创建图片并添加手势：

// 示例：创建5张可拖拽的图片视图
for index in 0..<5 {
    // 创建图片视图
    let imageView = UIImageView(image: UIImage(named: "your-image-name-\(index)"))
    imageView.frame = CGRect(x: 60 + index*70, y: 150, width: 60, height: 60)
    // 必须开启用户交互
    imageView.isUserInteractionEnabled = true
    
    // 添加平移手势
    let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handleImagePan(_:)))
    imageView.addGestureRecognizer(panGesture)
    
    // 如果需要点击手势，同理添加
    let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleImageTap(_:)))
    imageView.addGestureRecognizer(tapGesture)
    
    // 添加到主视图
    view.addSubview(imageView)
}

3. 在回调中获取当前被操作的图片视图

通过手势对象的view属性，就能准确拿到当前被触摸的UIImageView，这样不管操作哪张图，都能正确响应：

// 平移手势回调
@objc func handleImagePan(_ gesture: UIPanGestureRecognizer) {
    // 确保当前视图是UIImageView
    guard let targetImageView = gesture.view as? UIImageView else { return }
    
    // 获取平移量
    let translation = gesture.translation(in: view)
    // 更新图片视图的位置
    targetImageView.center = CGPoint(
        x: targetImageView.center.x + translation.x,
        y: targetImageView.center.y + translation.y
    )
    // 重置平移量，保证下次计算准确
    gesture.setTranslation(.zero, in: view)
}

// 点击手势回调
@objc func handleImageTap(_ gesture: UITapGestureRecognizer) {
    guard let targetImageView = gesture.view as? UIImageView else { return }
    // 这里可以处理点击逻辑，比如标记选中状态
    print("你点击了图片：\(targetImageView.image?.description ?? "未知图片")")
}

额外注意事项 #

• 如果你是用Storyboard创建的图片视图，记得在Attributes Inspector里勾选「User Interaction Enabled」选项。
• 不要试图把同一个手势识别器实例添加到多个视图，每个视图都需要自己的手势对象。

这样修改后，所有添加了手势的图片视图都能正常响应触摸和拖拽操作啦！

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