How do I zoom an image from a UICollectionView?

Question

I've created a UICollectionView in Swift with photos taken from an API: https://jsonplaceholder.typicode.com/photos

I've created a window where my images can be set to fullscreen here:

extension ViewController: UICollectionViewDataSource, UICollectionViewDelegate{
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return posts.count
    }
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = myCollectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! MyCollectionViewCell
        let url = URL(string: "https://via.placeholder.com/600/\(posts[indexPath.row].thumbnailUrl)")
        cell.myImageView.downaloadImage(from: url!)
        cell.myImageView.layer.cornerRadius = 25
        cell.myLabelName.text = posts[indexPath.row].title
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        let cell = collectionView.cellForItem(at: indexPath)
        let alert = UIAlertController(title: "FullScreen", message: "Are you sure you want to see the image fullscreen?", preferredStyle: .alert)
        let actionyes = UIAlertAction(title: "Yes", style: .default) { action in
            cell?.frame = UIScreen.main.bounds
            cell?.backgroundColor = .magenta
            cell?.contentMode = .scaleAspectFit
            //de schimbat imagine thumbnailURL cu url
            cell?.isUserInteractionEnabled = true
            let tap = UITapGestureRecognizer(target: self, action: #selector(self.dismissFullscreenImage))
            cell?.addGestureRecognizer(tap)
            self.view.addSubview((cell)!)
            self.navigationController?.isNavigationBarHidden = true
            self.tabBarController?.tabBar.isHidden = true
        }
        let actionno = UIAlertAction(title: "No", style: .default) { action in
            
        }
        alert.addAction(actionno)
        alert.addAction(actionyes)
        present(alert, animated: true)
        
    }
    
    @objc func dismissFullscreenImage(sender: UITapGestureRecognizer) {
        let alert2 = UIAlertController(title: "Go Back", message: "Are you sure you want to go back?", preferredStyle: .alert)
        let actionyes2 = UIAlertAction(title: "Yes", style: .default) { action in
            self.navigationController?.isNavigationBarHidden = false
            self.tabBarController?.tabBar.isHidden = false
            sender.view?.removeFromSuperview()
        }
        let actionno2 = UIAlertAction(title: "No", style: .default) { action in
            
        }
        alert2.addAction(actionno2)
        alert2.addAction(actionyes2)
        self.present(alert2, animated: true)
    }

}

I'm trying to zoom the image that's in fullscreen but I don't really know where to start. My structures are here:

import Foundation

struct Post : Codable
{
    let albumId : Int
    let id : Int
    let title : String
    let url : String
    let thumbnailUrl : String
}

Also, when I exit full screen my image disappears and I don't know how to keep it there. I think the problem is from here:

sender.view?.removeFromSuperview()

Can I make the image zoom from code? Or do I need something else? I've seen a lot of people using a scrollview but my images are in a collection view cell as shown here:

import UIKit

class MyCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet var myImageView: UIImageView!
    
    @IBOutlet var myLabelName: UILabel!
}

Answer 1

Yes, calling sender.view?.removeFromSuperview() is bad because you are removing the collection view cell from the collection view. You must not do that.

You should not be doing anything to the collection view cell when you want to show the image fullscreen. Instead, create a new UIImageView with the image from the cell's image view, and show that new image view fullscreen. When you want to dismiss it, simply remove that image view. This will leave the original collection view cell and its image view untouched and still visible after the zoom.

It would also be a nice effect if you create the new image view with the same size and position of the cell's image view and then animate the new image view to fullscreen.

You could put the new image view into a UIScrollView if you want to allow the user to zoom in on the image but that's beyond the scope of your original question.

Answer 2

You can use ImageScrollView in place of ImageView in your cell. Below is the link for the same.

https://github.com/huynguyencong/ImageScrollView