UIImageViews / Adding Multiple Stickers To A View. - ios

Question

Intro:
Functionality of adding multiple stickers/emoji to a view.
Setup:
There are 2 view controllers - one to which we're adding stickers, and another with a collectionview of stickers.
Stickers themselves are passed in arrays in 'prepareForSegue' func.
There are 2 arrays, one with just sticker images, another - with UIImageViews - stickers that were already panned, pinched and rotated.
Bug:
After adding 2nd sticker, the AddingStickersVC reappears but previous sticker isn't where we left if. It is pinched and zoomed, but not panned. Also new stickers are sticked to the first one (same frame?).
We can pinch and zoom previous stickers separately from new ones - (nope, they have their own frames), but we can't separate them.
End up having a stack of UIImageViews that takes rotating and pinching separately but pans all together.
Also, speed of panning is increasing after each additional sticker (the panning gesture is added multiple time?).
Hierarchy of views
Stickers are added to 'viewForEmoji' view (viewForImgAndEmoji).
AddingStickersVC:
#IBOutlet weak var viewForImgAndEmoji: UIView!
#IBOutlet weak var mainImg: UIImageView!
#IBOutlet weak var viewForSnapshot: UIView!
var imageData: Data!
var imageItself: UIImage!
var currentUserPostRef: FIRDatabaseReference!
var emojiImage: UIImage!
var geoFire: GeoFire!
var arrayOfEmojis = [UIImage]()
var arrayOfEmojiViews = [UIImageView]()
var n:Int = 1
override func viewDidLoad() {
super.viewDidLoad()
if imageData != nil {
let img = UIImage(data: imageData)
let fixedImg = img!.fixOrientation(img: img!)
mainImg.image = fixedImg
} else if imageItself != nil {
mainImg.image = imageItself
}
if arrayOfEmojiViews.count != 0 {
for emojiView1 in arrayOfEmojiViews {
viewForImgAndEmoji.addSubview(emojiView1)
}
}
// get image out of array.
if arrayOfEmojis.count != 0 {
for emoji in arrayOfEmojis {
let emojiView = UIImageView(image: emoji)
emojiView.tag = n
emojiView.frame = CGRect(x: 153, y: 299, width: 70, height: 70)
emojiView.isUserInteractionEnabled = true
let pan = UIPanGestureRecognizer(target: self, action: #selector(self.handlePan(recognizer:)))
pan.delegate = self
viewForImgAndEmoji.addGestureRecognizer(pan)
let pinch = UIPinchGestureRecognizer(target: self, action: #selector(self.handlePinch(recognizer:)))
pinch.delegate = self
viewForImgAndEmoji.addGestureRecognizer(pinch)
let rotate = UIRotationGestureRecognizer(target: self, action: #selector(self.handleRotate(recognizer:)))
rotate.delegate = self
viewForImgAndEmoji.addGestureRecognizer(rotate)
// check so we won't add previous emoji. only new.
if viewForImgAndEmoji.viewWithTag(n) == nil {
viewForImgAndEmoji.addSubview(emojiView)
}
n += 1
}
}
}
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
if arrayOfEmojis.count != 0 {
for j in 1...n {
if var view1 = self.viewForImgAndEmoji.viewWithTag(j) as? UIImageView {
arrayOfEmojiViews.append(view1)
print("Zhenya: views frame is \(view1.frame)")
}
}
}
if segue.identifier == "EmojiCollectionVC" {
if let emojiCollection = segue.destination as? EmojiCollectionVC{
if let image = sender as? UIImage {
emojiCollection.userImage = image
if arrayOfEmojis.count != 0 {
//arrayToStoreEmojis
emojiCollection.arrayToStoreEmojis = arrayOfEmojis
emojiCollection.arrayToStoreEmojiViews = arrayOfEmojiViews
}
}
}
}
}
#IBAction func handlePan(recognizer: UIPanGestureRecognizer) {
let translation = recognizer.translation(in: self.viewForImgAndEmoji)
if let view = recognizer.view {
view.center = CGPoint(x:view.center.x + translation.x,
y:view.center.y + translation.y)
}
recognizer.setTranslation(CGPoint.zero, in: self.viewForImgAndEmoji)
}
#IBAction func handlePinch(recognizer: UIPinchGestureRecognizer) {
let pinchPoint = recognizer.location(in: viewForImgAndEmoji)
let ourEmojiView = viewForImgAndEmoji.hitTest(pinchPoint, with: nil)
ourEmojiView!.transform = ourEmojiView!.transform.scaledBy(x: recognizer.scale, y: recognizer.scale)
recognizer.scale = 1
}
#IBAction func handleRotate(recognizer: UIRotationGestureRecognizer){
let rotatePoint = recognizer.location(in: viewForImgAndEmoji)
let ourEmojiView = viewForImgAndEmoji.hitTest(rotatePoint, with: nil)
ourEmojiView!.transform = ourEmojiView!.transform.rotated(by: recognizer.rotation)
recognizer.rotation = 0
}
func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
return true
}
And EmojiCollectionVC:
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath) as! EmojiCollectionCell
let chosenEmoji = cell.emojiView.image as UIImage!
arrayToStoreEmojis.append(chosenEmoji!)
performSegue(withIdentifier: "backToEmojiVC", sender: arrayToStoreEmojis)
}
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
if segue.identifier == "backToEmojiVC"{
if let destinationVC = segue.destination as? EmojiVC {
if let array = sender as? [UIImage] {
destinationVC.arrayOfEmojis = arrayToStoreEmojis
destinationVC.arrayOfEmojiViews = arrayToStoreEmojiViews
let data = UIImagePNGRepresentation(userImage)
destinationVC.imageData = data
}
}
}
}

Answer 1

Found solution.
There reason why all new imageViews were stacked - because after panning imageViews didn't change their location in view. The whole f view was moving.
(to find this, spent 8hours tracking changes of frame origins with 'prints' at every step of the program).
And the reason the whole view was moving - because panning gesture was added to the whole view.
So instead of
let pan = UIPanGestureRecognizer(target: self, action: #selector(self.handlePan(recognizer:)))
pan.delegate = self
viewForImgAndEmoji.addGestureRecognizer(pan)
i needed:
let pan = UIPanGestureRecognizer(target: self, action: #selector(self.handlePan(recognizer:)))
pan.delegate = self
emojiView.addGestureRecognizer(pan)
What is interesting, for pinching and rotating - we still add them to the whole view that contains emojiView:
viewForImgAndEmoji.addGestureRecognizer(pinch)
...
viewForImgAndEmoji.addGestureRecognizer(rotate)