Swift Eureka custom cell image full screen

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.