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.

If you're adding a "heighAnchor" do not add a top and bottom anchor. Just add a top anchor, bottom anchor, or center it. If you add a top and bottom it has the potential to overwrite your existing height. — xTwisteDx, Jul 28 '20 at 21:37
You can set the top and bottom anchors *or* one of those and the height, but you can't set all three. Setting top and bottom implies a height. Perhaps you want to set the center and the height? Also you should use leading/trailing rather than left/right unless you need a specific layout in RTL locales — Paulw11, Jul 28 '20 at 21:38
@Paulw11 I think he's working with the height, he didn't explicitly define that but based on the commented out constraints he's referring to the height. Same principle for the width as well, however. — xTwisteDx, Jul 28 '20 at 21:39
@xTwisteDx as you can clearly see, topanchor and bottom anchor is commented out. So my question still stands exactly as is. — coderq, Jul 28 '20 at 21:40
@coderq height alone is not enough. You need to specify a vertical position via a top, bottom or center constraint. — Paulw11, Jul 28 '20 at 21:41
Now set a top, bottom, or center anchor. You still have to have anchors for X & Y and currently, you only have X and some arbitrary height for "Y" but you're not telling where to start at. — xTwisteDx, Jul 28 '20 at 21:42

score 0 · Answer 1 · answered Jul 28 '20 at 21:47

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.

@coderq have you done any auto-layout with this project? Is it possible you have a conflicting constraint, not in code? This solution should work based on the information you've provided. — xTwisteDx, Jul 28 '20 at 21:52

Constraints on Child Container

1 Answers1