How do I add an ImageView into a table cell on button click?

Question

I am trying to do something like this:

When the user clicks "Add Page," a new grouping shows up below it. Now, I decided to use Table View cells in order to achieve this. After following various tutorials and looking up similar Q&As, I am able to add cells on button click with UILabel and have the cell height be dynamic depending on the content but now I am trying to figure out how to add ImageViews and place buttons within a cell.

I've created a custom cell class:

class PageCell : UITableViewCell {

    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        self.selectionStyle = UITableViewCellSelectionStyle.none

        setupViews()
    }

    ...
    ... // other random code here


    let imgView : UIImageView = {
        let imgview = UIImageView()
        imgview.frame = CGRect(x: 100, y: 150, width: 150, height: 140)
        imgview.tintColor = UIColor(red: 0.73, green: 0.2, blue: 0.3, alpha: 1.0)
        imgview.translatesAutoresizingMaskIntoConstraints = false
        return imgview
    }()

    func setupViews() {
        addSubview(pageLabel) // the label that I got working
        addSubview(imgView) // can't get this working
        ...
        // constraint info here
    }
}

And back in my TableViewController:

class TakePhotosVC: UITableViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.register(PageCell.self, forCellReuseIdentifier: "cellID")
    }

    // return the actual view for the cell
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let pagecell = tableView.dequeueReusableCell(withIdentifier: "cellID", for: indexPath) as! PageCell
        // set more stuff here
    }

    ... // more code
} 

My issue is that I am trying to get a box showing where the ImageView is that the user can click on to load in a picture. I am unsure how to do that and place all the relevant buttons as well (Trash, X, etc.)

Any help would be greatly appreciated.

EDIT

Okay, I was trying to follow this tutorial and I can't quite get it to work. In my prototype cell, I see this:

But the result is this:

I made the UIImageView have a background so I can see it. I have two constraints for the UIImageView which are: width = 240, height = 128 and two constraints for the Page Label which are: width = 240, height = 21. Two questions: why are my elements not placed correctly even though I have it correctly placed in the Storyboard? And why is the cell height not dynamically resizing to accommodate the elements?

I have these two lines in my viewDidLoad method of the TakePhotosVC but it doesn't seem to do anything.

tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 200

If it's relevant, I get this warning when I run the Simulator.

Warning once only: Detected a case where constraints ambiguously suggest a height of zero for a tableview cell's content view. We're considering the collapse unintentional and using standard height instead.

EDIT 2

I got it to work. For any poor souls reading this after me, you have to click on those dotted pink lines in the Constraints window editor and then click "Add X Constraints" in order to get the ImageView to center and stuff.

Answer 1

My issue is that I am trying to get a box showing where the ImageView is that the user can click on to load in a picture. I am unsure how to do that and place all the relevant buttons as well (Trash, X, etc.)

I am not sure if I understand you correctly. You have a cell with an UIImageView. But you want to show a box to visually indicate where the user should touch to add an UIImage (?)

Why not simply add a UIButton on top of the UIImageView with the exact same frame size, and on touch, you fire your action to add the image, and once the image is successfully added, you can set the UIButton to hidden.

If the user deletes the image with the trash button, you simply show the UIButton again by hidden = NO.

Other solution: Add a border to the UIImageView with custom colors and add a UITapGestureRecognizer to fire an action. (Make sure you set the UIImageView to userInteractionEnabled = YES;

You can allso add a Placeholder image to the UIImageView when there is no image set, with your custom design.

Answer 2

The easiest approach would be to use a xib instead of placing the buttons programmatically. To do this, add a new file and select xib. In a xib, you can pre-make a tableviewcell with the image view, and you buttons placed for you already with constraints. Then, you can subclass this table view cell and connect the image view and buttons with ib outlets and ib actions to access the buttons and image view. Then, in your cellForRow function, load the xib like this:

Bundle.main.loadNibNamed("NameOfNib", owner: self, options: nil).first as! NameOfSubclass

I would advise to read more on xibs and nibs.