Setting constraints on UITableView inside UIView

Question

I have a UIViewController that has some base controls and in the center has a UIView (as container of swappable ui controls). I swap out the UI controls in this center UIView (container) depending on what the user is trying to do. All of the UI controls that go in to the UIView container are defined programmatically and I use programatic constraints to place them inside the UIView container.

This works fine for all of the sets of UI controls I have done so far. Now I am adding a set of controls to the UIView container that includes a UITableView

I cant figure out how to get the TableView to show up inside the UIView programatically. I can define say a button and label and run the app and see the container with the button and the label. If I add the UITableView as below then the container just does not show up at all.

// tableView
tableView.leftAnchor.constraint(equalTo: inputsContainerView.leftAnchor).isActive = true
tableView.bottomAnchor.constraint(equalTo: inputsContainerView.bottomAnchor).isActive = true
tableView.widthAnchor.constraint(equalTo: inputsContainerView.widthAnchor).isActive = true
tableView.heightAnchor.constraint(equalTo: inputsContainerView.heightAnchor, multiplier: 1/2).isActive = true

prior to the above code I have already added all of the needed controls to the container subview ...

// Add controls to the view
inputsContainerView.addSubview(listTextView)
inputsContainerView.addSubview(listImageButton)
inputsContainerView.addSubview(listImageClear)
inputsContainerView.addSubview(tableView)

If I leave off the tableview then the container shows up with the other three fields. If I add the tableview then the container and all the other three controls are gone.

How do I add the tableView to the UIView and have it show up?

Here is how I defined the UITable view

let tableView: UITableView =  {
    let tv = UITableView()
    return tv
}()

as a compare, when I define others controls like this they show up fine after adding to the subview and setting the constraints programatically

e.g.

// DEFINE
let listTextView: UITextView = {
    let textView = UITextView()
    textView.translatesAutoresizingMaskIntoConstraints = false
    textView.text = ""
    textView.textColor = defaultTextColor
    textView.font = subtitleFont
    textView.layer.borderColor = UIColor.black.cgColor
    textView.layer.borderWidth = 1
    textView.textAlignment = NSTextAlignment.left
    return textView
}()

then later

// Place - with constraints
// listTextView
listTextView.leftAnchor.constraint(equalTo: inputsContainerView.leftAnchor, constant: padFromLeft).isActive = true
listTextView.topAnchor.constraint(equalTo: inputsContainerView.topAnchor, constant: 10).isActive = true
listTextView.widthAnchor.constraint(equalTo: inputsContainerView.widthAnchor, multiplier: 9/16).isActive = true
listTextView.heightAnchor.constraint(equalTo: inputsContainerView.widthAnchor, multiplier: 5/16).isActive = true

Answer 1

Just added my comment as detailed answer, so others can see the solution faster and benefit from it.

So taken from the apple documentation, to set your own constraints programmatically, you need to set translatesAutoresizingMaskIntoConstraints to false:

Note that the autoresizing mask constraints fully specify the view’s size and position; therefore, you cannot add additional constraints to modify this size or position without introducing conflicts. If you want to use Auto Layout to dynamically calculate the size and position of your view, you must set this property to false, and then provide a non ambiguous, nonconflicting set of constraints for the view.

So in your case you miss to set it for your table view, when you define it. Just add this line to it:

tv.translatesAutoresizingMaskIntoConstraints = false