Adding NSLayoutConstraint from code - xcode

Question

I am having a lot of problems understanding constraints made in code. I have this container view that is created and set in IB and then in that container NSView's initWithFrame I add the child NSView like this (self is the container view):
childView = [[NSView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, tabContainerHeight + tabContainerTopSpace)];
[childView setTranslatesAutoresizingMaskIntoConstraints:NO];
[self addSubview:childView];
NSLayoutConstraint *tabContainerConstraint = [NSLayoutConstraint constraintWithItem:childView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeTop multiplier:1.0f constant:0.0f];
[childView addConstraint:tabContainerConstraint];
tabContainerConstraint = [NSLayoutConstraint constraintWithItem:childView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeLeading multiplier:1.0f constant:0.0f];
[childView addConstraint:tabContainerConstraint];
tabContainerConstraint = [NSLayoutConstraint constraintWithItem:childView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeTrailing multiplier:1.0f constant:0.0f];
[childView addConstraint:tabContainerConstraint];
The problem right now is that the child view is not visible at all, I don't know what happens to it. What I want to do is to have the child view to always have its top exactly at the container view's top and the same goes for left and right, so the child view must have a fixed height but always placed at the top of the container view and then stretch to the sides with the container view (like in the attached image if it explains it).
How is this done from code?
Thank you
Søren

Answer 1

There are a few problems here.
First, you're using initWithFrame: and then turning on autolayout - this means your frame information is going to get discarded. You need a height constraint for your child view.
Second, you're adding the constraints to the child view instead of its superview. The autolayout system may be able to figure this out but the constraints should really be added to self in this case.
You can check the frames of your views in the debugger or an introspection tool like Reveal to see where things might be going wrong - I'd guess in this case you have a height of zero in your child view.
Thirdly (this one isn't necessarily a problem), the code you're using is unnecessarily verbose. The individual creation format is good to help understand the constraints you are making and good for complex cross-hierarchy constraints but it can leave you with ambiguous layouts or adding constraints to the wrong views. The layout you are after is well suited to using the visual format language - it would only be two statements:
For your horizontal layout:
#"|[childView]|"
For your vertical layout:
#"V:|[childView(==height)]"
Where height is either a key in your metrics dictionary, or you replace it with the hard coded height number.
I've written in tedious detail about the various ways to create constraints in code: visual format language and individual constraints. These are iOS focused but autolayout is very similar on both frameworks.