title: Manipulate view hierarchy using XIBs and auto-layout
body: <p>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.</p>
  
  <p>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 <code>UILabel</code> and a generic <code>UIView</code>. The second XIB (B) has just 5 <code>UIButton</code>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.</p>
  
  <p>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.</p>
  
  <p>With the following code, though, it does not work:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>This gives me the following:</p>
  
  <p><img src="https://i.stack.imgur.com/BtwVN.png" alt="enter image description here"></p>
  
  <p>(The white area is the scroll view, the red area view A, the green area view B.)</p>
  
  <p>I tried adding a constraint that should let view B take up the whole width of its superview:</p>
  
  <pre><code>[viewA.customView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[viewB]|" options:0 metrics:0 views:NSDictionaryOfVariableBindings(viewB)]];
  </code></pre>
  
  <p>But that results into this:</p>
  
  <p><img src="https://i.stack.imgur.com/ZfkcC.png" alt="enter image description here"></p>
  
  <p>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.</p>