Swift Eureka custom cell image full screen - ios

Question

I am trying to create a custom cell in Eureka that display an Image. When tap the image, the image displays full screen with black background.
Usually you do it with view.addSubview(newImageView), but it does not seem like Eureka cell has view class.
Here is what I got so far for the cell:
final class ImageViewCell: Cell<ImageView>, CellType {
#IBOutlet weak var viewImage: UIImageView!
//let storage = Storage.storage().reference()
required init(style: UITableViewCellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override func setup() {
super.setup()
//cell not selectable
selectionStyle = .none
viewImage.contentMode = .scaleAspectFill
viewImage.clipsToBounds = true
height = {return 300 }
//make userImage reconize tapping
let tapRec = UITapGestureRecognizer(target: self, action: #selector(imageTapHandler(tapGestureRecognizer:)))
viewImage.addGestureRecognizer(tapRec)
viewImage.isUserInteractionEnabled = true
}
#objc func imageTapHandler(tapGestureRecognizer: UITapGestureRecognizer) {
let imageView = tapGestureRecognizer.view as! UIImageView
let newImageView = UIImageView(image: imageView.image)
newImageView.frame = UIScreen.main.bounds
newImageView.backgroundColor = .black
newImageView.contentMode = .scaleAspectFit
newImageView.isUserInteractionEnabled = true
let tap = UITapGestureRecognizer(target: self, action: #selector(dismissFullscreenImage))
newImageView.addGestureRecognizer(tap)
view.addSubview(newImageView)
}
#objc func dismissFullscreenImage(_ sender: UITapGestureRecognizer) {
sender.view?.removeFromSuperview()
}
override func update() {
super.update()
// we do not want to show the default UITableViewCell's textLabel
textLabel?.text = nil
// get the value from our row
guard let imageData = row.value else { return }
// get user image data from value
let downloadData = imageData.pictureData
viewImage.image = UIImage(data: downloadData)
}
}
I am getting "Use of unresolved identifier 'view'" when trying to addSubview.
I have tried to use contentView instead of view, and the result is like this:
Screenshot for the View

Answer 1

If you want to show the image in fullScreen, cell's contentView or the viewController subView that holds this cell are not the right places to add this image as subview.
A proper solution to this is to use the onCellSelection(something as shown below) callback in your container ViewController and present a new ViewController that display's only image fullscreen or whatever customization you want.
imageCell.onCellSelection({[weak self] (cell, row) in
let imageVC = DisplayViewController()
imageVC.image = cell.viewImage.image
self?.present(imageVC, animated: true, completion: nil)
})
If you want to show fullscreen only when user taps the image in cell then you should get the tapGesture callback in container ViewController and show the image as above.

Answer 2

Thanks for Kamran, I think I found the solution.
for Eureka rows, you can always use row.onCellSelection call back.
in my case I can do this when calling the custom row:
<<< ImageViewCellRow(){ row in
row.value = ImageView(pictureData: data!)
row.onCellSelection(showMe)
}
then create a showMe function like this:
func showMe(cell: ImageViewCell, row: (ImageViewCellRow)) {
print("tapped my ImageViewCell!")
}
now you should be able to present a full screen image as Kamran's code.