swift - 如何实现多个PanGestures(Draggable views)？

Question

我想要多个可以拖放的对象。

这是我移动一个对象的代码(在@vacawama 的帮助下):

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var panView: UIView!

@IBOutlet weak var panViewCenterX: NSLayoutConstraint!
@IBOutlet weak var panViewCenterY: NSLayoutConstraint!

let panRec = UIPanGestureRecognizer()

override func viewDidLoad() {
    super.viewDidLoad()

    panRec.addTarget(self, action: "draggedView:")
    panView.addGestureRecognizer(panRec)

// Do any additional setup after loading the view, typically from a nib.
}

func draggedView(sender:UIPanGestureRecognizer){

    self.view.bringSubviewToFront(sender.view!)
    var translation = sender.translationInView(self.view)

    panViewCenterY.constant += translation.y
    panViewCenterX.constant += translation.x

    sender.setTranslation(CGPointZero, inView: self.view)
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}   

}

我想在我的项目中有更多对象:

 @IBOutlet weak var panView2: UIView!
 @IBOutlet weak var panView3: UIView!
 @IBOutlet weak var panView4: UIView!
 ...

那么，实现这个最简单的方法是什么，我可以拥有多个 panView，我可以独立移动(一次一个)？

Answer 1

如果您正在使用自动布局，您不应该仅仅通过改变其中心来移动 View 。任何导致 Auto Layout 运行的操作都会将您的 View 移回其原始位置。

这是一个名为 DraggableView 的新类的实现，它与 Auto Layout 一起提供可以拖动的 View 。它在代码中为 View 的宽度、高度、X 位置和 Y 位置创建约束。它使用自己的 UIPanGestureRecognizer 允许拖动 View 。

DraggableView.swift 可以放入任何需要可拖动 View 的项目中。查看下面的 ViewController.swift，了解它的易用性。

DraggableView.swift

import UIKit

class DraggableView: UIView {
    let superView: UIView!
    let xPosConstraint:  NSLayoutConstraint!
    let yPosConstraint:  NSLayoutConstraint!
    var constraints: [NSLayoutConstraint] {
        get {
            return [xPosConstraint, yPosConstraint]
        }
    }

    init(width: CGFloat, height: CGFloat, x: CGFloat, y: CGFloat, color: UIColor, superView: UIView) {
        super.init()

        self.superView = superView

        self.backgroundColor = color

        self.setTranslatesAutoresizingMaskIntoConstraints(false)

        let panGestureRecognizer = UIPanGestureRecognizer()
        panGestureRecognizer.addTarget(self, action: "draggedView:")
        self.addGestureRecognizer(panGestureRecognizer)

        let widthConstraint = NSLayoutConstraint(item: self, attribute: .Width, relatedBy: .Equal,
            toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: width)
        self.addConstraint(widthConstraint)

        let heightConstraint = NSLayoutConstraint(item: self, attribute: .Height, relatedBy: .Equal,
            toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: height)
        self.addConstraint(heightConstraint)

        xPosConstraint = NSLayoutConstraint(item: self, attribute: .CenterX, relatedBy: .Equal,
            toItem: superView, attribute: .Leading, multiplier: 1.0, constant: x)

        yPosConstraint = NSLayoutConstraint(item: self, attribute: .CenterY, relatedBy: .Equal,
            toItem: superView, attribute: .Top, multiplier: 1.0, constant: y)
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    required init(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func moveByDeltaX(deltaX: CGFloat, deltaY: CGFloat) {
        xPosConstraint.constant += deltaX
        yPosConstraint.constant += deltaY
    }

    func draggedView(sender:UIPanGestureRecognizer){
        if let dragView = sender.view as? DraggableView {
            superView.bringSubviewToFront(dragView)
            var translation = sender.translationInView(superView)
            sender.setTranslation(CGPointZero, inView: superView)
            dragView.moveByDeltaX(translation.x, deltaY: translation.y)
        }
    }
}

ViewController.swift

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let dragView1 = DraggableView(width: 75, height: 75, x: 50, y: 50,
            color: UIColor.redColor(), superView: self.view)
        self.view.addSubview(dragView1)
        self.view.addConstraints(dragView1.constraints)

        let dragView2 = DraggableView(width: 100, height: 100, x: 150, y: 50,
            color: UIColor.blueColor(), superView: self.view)
        self.view.addSubview(dragView2)
        self.view.addConstraints(dragView2.constraints)

        let dragView3 = DraggableView(width: 125, height: 125, x: 100, y: 175,
            color: UIColor.greenColor(), superView: self.view)
        self.view.addSubview(dragView3)
        self.view.addConstraints(dragView3.constraints)
    }
}

---

更新:

这是一个支持图像作为 subview 的 DraggableView.swift 版本。

import UIKit

class DraggableView: UIView {
    let superView: UIView!
    let xPosConstraint:  NSLayoutConstraint!
    let yPosConstraint:  NSLayoutConstraint!
    var constraints: [NSLayoutConstraint] {
        get {
            return [xPosConstraint, yPosConstraint]
        }
    }

    init(width: CGFloat, height: CGFloat, x: CGFloat, y: CGFloat, color: UIColor, superView: UIView, imageToUse: String? = nil, contentMode: UIViewContentMode = .ScaleAspectFill) {
        super.init()

        self.superView = superView

        self.backgroundColor = color

        self.setTranslatesAutoresizingMaskIntoConstraints(false)

        let panGestureRecognizer = UIPanGestureRecognizer()
        panGestureRecognizer.addTarget(self, action: "draggedView:")
        self.addGestureRecognizer(panGestureRecognizer)

        let widthConstraint = NSLayoutConstraint(item: self, attribute: .Width, relatedBy: .Equal,
            toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: width)
        self.addConstraint(widthConstraint)

        let heightConstraint = NSLayoutConstraint(item: self, attribute: .Height, relatedBy: .Equal,
            toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: height)
        self.addConstraint(heightConstraint)

        xPosConstraint = NSLayoutConstraint(item: self, attribute: .CenterX, relatedBy: .Equal,
            toItem: superView, attribute: .Leading, multiplier: 1.0, constant: x)

        yPosConstraint = NSLayoutConstraint(item: self, attribute: .CenterY, relatedBy: .Equal,
            toItem: superView, attribute: .Top, multiplier: 1.0, constant: y)

        if imageToUse != nil {
            if let image = UIImage(named: imageToUse!) {
                let imageView = UIImageView(image: image)
                imageView.contentMode = contentMode
                imageView.clipsToBounds = true
                imageView.setTranslatesAutoresizingMaskIntoConstraints(false)
                self.addSubview(imageView)
                self.addConstraint(NSLayoutConstraint(item: imageView, attribute: .Left, relatedBy: .Equal, toItem: self, attribute: .Left, multiplier: 1.0, constant: 0))
                self.addConstraint(NSLayoutConstraint(item: imageView, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1.0, constant: 0))
                self.addConstraint(NSLayoutConstraint(item: imageView, attribute: .Right, relatedBy: .Equal, toItem: self, attribute: .Right, multiplier: 1.0, constant: 0))
                self.addConstraint(NSLayoutConstraint(item: imageView, attribute: .Bottom, relatedBy: .Equal, toItem: self, attribute: .Bottom, multiplier: 1.0, constant: 0))
            }
        }
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    required init(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func moveByDeltaX(deltaX: CGFloat, deltaY: CGFloat) {
        xPosConstraint.constant += deltaX
        yPosConstraint.constant += deltaY
    }

    func draggedView(sender:UIPanGestureRecognizer){
        if let dragView = sender.view as? DraggableView {
            superView.bringSubviewToFront(dragView)
            var translation = sender.translationInView(superView)
            sender.setTranslation(CGPointZero, inView: superView)
            dragView.moveByDeltaX(translation.x, deltaY: translation.y)
        }
    }
}