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!
}
2
Answers
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.
You can use ImageScrollView in place of ImageView in your cell.
Below is the link for the same.
https://github.com/huynguyencong/ImageScrollView