How do I make new image views movable? - ios

Question

I have been trying to piece together a project that contains a collection view that scrolls on the side, and when a cell is tapped it will add a new image view to the scene. I would like this new image to be draggable.
My code currently shows the collection view and when tapped adds a new image (which I call stickers).
I haven't quite figured out how to make it place the correct sticker yet, but my first goal is to make sure what appears can be moved.
import UIKit
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
#IBOutlet weak var collectionView: UICollectionView!
let stickers: [UIImage] = [
UIImage(named: "cow")!,
UIImage(named: "chicken")!,
UIImage(named: "pig")!,
UIImage(named: "cow")!,
UIImage(named: "chicken")!,
UIImage(named: "pig")!,
UIImage(named: "cow")!,
UIImage(named: "chicken")!,
UIImage(named: "pig")!,
]
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return stickers.count
}
var activeSticker = UIImage(named: "cow")
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
cell.stickerImage.image = stickers[indexPath.item]
cell.backgroundColor = UIColor(white: 1, alpha: 0.9)
cell.translatesAutoresizingMaskIntoConstraints = false
cell.contentMode = .scaleAspectFill
cell.clipsToBounds = true
cell.layer.cornerRadius = 7
let addSticker = UIButton(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
addSticker.addTarget(self, action: #selector(addStickerTapped), for: UIControl.Event.touchUpInside)
activeSticker = cell.stickerImage.image
cell.addSubview(addSticker)
return cell
}
#IBAction func addStickerTapped() -> Void {
print("Hello Sticker Button")
let image = activeSticker //UIImage(named: imageName)
let imageView = UIImageView(image: image!)
imageView.frame = CGRect(x: 100, y: 100, width: 100, height: 200)
imageView.contentMode = .scaleAspectFit
imageView.isUserInteractionEnabled = true
self.view.addSubview(imageView)
//Imageview on Top of View
self.view.bringSubviewToFront(imageView)
}
}

Answer 1

To move the imageView around inside self.view you can use UIPanGestureRecognizer. Add the gesture recognizer, for example, in viewDidLoad:
class ViewController: UIViewController {
var selectedImageView: UIImageView?
override func viewDidLoad() {
super.viewDidLoad()
addPanGestureRecognizer()
}
func addPanGestureRecognizer() {
let pan = UIPanGestureRecognizer(target: self, action: #selector(moveImageView(_:)))
// set up and optimize pan gesture options here if you need to
self.view.addGestureRecognizer(pan)
}
#objc func moveImageView(_ sender: UIPanGestureRecognizer) {
// assign one of your image views to selectedImageView to ensure you only move one image view at a time
// for example in func addStickerTapped() you could assign selectedImageView = imageView
guard let selectedImageView = selectedImageView else {
return
}
switch sender.state {
case .changed, .ended:
selectedImageView.center = selectedImageView.center.offset(by: sender.translation(in: self.view))
sender.setTranslation(.zero, in: self.view)
default:
break
}
}
}
extension CGPoint {
func offset(by point: CGPoint) -> CGPoint {
return CGPoint(x: self.x + point.x, y: self.y + point.y)
}
}