Constraints on Child Container

Question

I am adding a child view using the View.addChild method

The containing view is clearly 350 pixels. However, the child view takes up ALL the space of the containing view....so my idea is to force the child view to be smaller than its parent...but my code does not work. I can tell you that if I uncomment the two lines it almost works, but then the child view does not occupy the size that I want it to and it blocks other elements. Here is where I am:

  child.view.translatesAutoresizingMaskIntoConstraints = false
  let safeArea = view.layoutMarginsGuide
  //child.view.topAnchor.constraint(equalTo: tableContainer.topAnchor).isActive = true
  // child.view.bottomAnchor.constraint(equalTo: tableContainer.bottomAnchor).isActive = true
        
  child.view.leftAnchor.constraint(equalTo: tableContainer.leftAnchor).isActive = true
  child.view.rightAnchor.constraint(equalTo: tableContainer.rightAnchor).isActive = true
  child.view.heightAnchor.constraint(equalToConstant: 250).isActive = true
        
  self.addChild(child)

Let me state very clearly, my goal is to get the child view to 250 pixels. Thank you.

Answer 1

Your solution might look something like this.

 child.view.translatesAutoresizingMaskIntoConstraints = false
  let safeArea = view.layoutMarginsGuide
  
  //Your left and right anchors tell the compiler exactly how wide the view should be.
  //If you have it set to equal both then the view MUST be exactly the width of parent.      
  child.view.leftAnchor.constraint(equalTo: tableContainer.leftAnchor).isActive = true
  child.view.rightAnchor.constraint(equalTo: tableContainer.rightAnchor).isActive = true

  //Since you're defining your own height here you need to explicitly state where the 
  //view starts at. If you don't define a top, center, bottom or some other constraint
  //it's impossible to know where to put the view.
  child.view.heightAnchor.constraint(equalToConstant: 250).isActive = true
  child.view.topAnchor.constraint(equalTo: safeArea.topAnchor).isActive = true
        
  self.addChild(child)

The reason for this is that when creating anchors, you MUST have an X & Y anchors for all views, even logically. For example if you define a width of 100 and a height of 100 you've created a square, but where does that square go? You don't have an X or a Y in that example. However, if you define a width to match the parent view using the left and right anchor then it knows the width of the view just by the anchors on the left and right. The same principle applies to a top and bottom anchor. If you define a top and bottom anchor then it will be the size of the view (Given that you set them equalTo) and it will know the height.

In your instance, you've defined height of 250 however it doesn't know where to start at. Does it start at the top, middle, bottom, it doesn't have a clue because you haven't set it. The IDE is very literal with constraints and no obscurity will work.