使用XIB和自动布局来操纵视图层次结构

Question

What I'm trying to accomplish seems pretty straight-forward, but I've been on this for an entire day now and I can't figure it out.

I have a storyboard (which does not yet use auto-layout) with a scene that has a paged scroll view. I also have 2 XIBs that I instantiate in code. The first XIB (A) has a UILabel and a generic UIView . The second XIB (B) has just 5 UIButton s in a + arrangement. The ultimate goal is to load B into the generic view in A (horizontally centered and the "default value" below the label), and to make A take up a whole page in the scroll view.

When I resize the view of XIB A, the generic view's size expands and shrinks, but always stays the default value below the label. When I resize the view of XIB B, the button arrangement stays centered (which is what I want). This is the behavior that I want.

With the following code, though, it does not work:

View A *viewA = [[ViewA alloc] initWithFrame:CGRectZero];
viewA.textLabel.text = @"A label with a rather long text";

ViewB *viewB = [[ViewB alloc] initWithFrame:CGRectZero];

[viewA setTranslatesAutoresizingMaskIntoConstraints:NO];
[viewB setTranslatesAutoresizingMaskIntoConstraints:NO];

[viewA.customView addSubview:viewB]; // customView is the generic view

This gives me the following:

(The white area is the scroll view, the red area view A, the green area view B.)

I tried adding a constraint that should let view B take up the whole width of its superview:

[viewA.customView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[viewB]|" options:0 metrics:0 views:NSDictionaryOfVariableBindings(viewB)]];

But that results into this:

What can I do to get the buttons centered in the green area? I don't care if the green area is completely covered by the red area, or if the red area is just centered over the green area.

Answer 1

You mentioned not using auto-layout in the xibs, so i would assume adding constraints in code has zero effect. You should try using the appropriate AutoresizingMasks for views added in code. Try to use Auto-Layout (correctly) in xibs unless there is a good reason not to.

An example of a Mask is below, you need to figure out which ones you need, cant really tell by your example.

yourView.translatesAutoresizingMaskIntoConstraints = NO;
[yourView setAutoresizingMask:UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight];