title: Use autolayout to set dynamic UIView to match container view
body: <p>I have a UIView in IB that has another UIView within it, which I am using as a container view.  In code, I create three different views and then animate the appropriate one into the container's view depending on the state of the app.  Only one of the three different views will be valid at any given time.  The problem is, when I run on different iPhone's in the simulator, my new subviews are not scaled to match the container view.  I am using autolayout.  For testing purposes, I've set up my subviews to just be a big button that has all it's edges constrained to the superview.  And the container view also has it's edges constrained to it's superview.  What I want is for the subview to match the container's view. i.e the button stretches the entire size of the container view.  When run on different iPhones the size of the container view and therefore the subview should scale proportionally relative to the different iPhone's screen sizes.</p>
  
  <p>Below is the code I use to init my subview and set up it's constraints relative to the container view.</p>
  
  <pre><code>UIView *containerView = self.subView;
  UIView *newSubview = [[mySubview alloc] init];
  [newSubview setTranslatesAutoresizingMaskIntoConstraints:NO];
  [self.containerView addSubview:newSubview];
  
  [self.containerView addConstraint:[NSLayoutConstraint constraintWithItem:newSubview attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.containerView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0]];
  
  [self.containerView addConstraint:[NSLayoutConstraint constraintWithItem:newSubview attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.containerView attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0]];
  
  [self.containerView addConstraint:[NSLayoutConstraint constraintWithItem:newSubview attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.containerView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0]];
  
  [self.containerView addConstraint:[NSLayoutConstraint constraintWithItem:newSubview attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.containerView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0]];  
  </code></pre>
  
  <p>I just can't seem to get this to work.  I'm fairly new to autolayout and am not sure what I am doing wrong and would like to stop banging my head against this wall.  Any help would be terrific.  :)</p>
  
  <hr>
  
  <p>************* ADDITIONAL INFO **************</p>
  
  <hr>
  
  <p>Sorry, I've not stated my problem as clearly as I could have.  So here is some more info with screen shots. First, I'll describe what I've done code-wise.</p>
  
  <p>In didFinishLaunchingWithOptions in AppDelegate.m, I create MyViewController like this,</p>
  
  <pre><code>self.myViewController = [[MyViewController alloc] initWithNibName:@"MyViewController" bundle:nil];
  </code></pre>
  
  <p>In viewDidLoad in MyViewController.m, I create mySubview and add it to my containerView and create constraints for it like this,</p>
  
  <pre><code>UIView *containerView = self.containerView;
  UIView *mySubview = [[MySubview alloc] init];
  [mySubview setTranslatesAutoresizingMaskIntoConstraints:NO];
  [containerView addSubview:mySubview];
  
  NSDictionary *views = NSDictionaryOfVariableBindings(mySubview);
  [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[mySubview]|"
                                                                   options:0
                                                                   metrics:nil
                                                                     views:views]];
  [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[mySubview]|"
                                                                    options:0
                                                                    metrics:nil
                                                                      views:views]];
  </code></pre>
  
  <p>And finally in init in MySubview.h I add the nib as a subview like this,</p>
  
  <pre><code>- (id)init
  {
      if(self = [super init])
      {
          NSArray *nibArray = [[NSBundle mainBundle]loadNibNamed:@"MySubview" owner:self options:nil];
          [self addSubview:[nibArray objectAtIndex:0]];
      }
      return self;
  }
  </code></pre>
  
  <p>A couple of things to note that may help, </p>
  
  <p>In MyViewController.xib, I have a UIView that I am using as the containerView. It has an IBOutlet to UIView* containerView and is the one referenced above.  The only constraints I have for the containerView in IB are, leading, trailing and bottom space to Superview and top space to Superview = 44.</p>
  
  <p>For MySubview.xib, the height and width are 300, (no constraints are used for height or width).  I feel like these sizes should not matter since mySubview is supposed to get constrained to containerView.  </p>
  
  <p>In MySubview.xib I have 3 objects, topButton: height = 29, middleView: height = 242 and bottomButton: height = 29. (see attached image) TopButton has leading, trailing and top to Superview constraints and a bottom to middleView constraint.  MiddleView has leading and trailing to Superview constraints and a top to topButton constraint and a bottom to bottomButton constraints. And finally bottomButton has leading, trailing and bottom to Superview constraints and a top to middleView constraint.</p>
  
  <p>What I want to happen is for mySubview to scale to fit the containerView since constraints have been create and added but instead, mySubview gets very large and clips containerView.  </p>
  
  <p>Here are some screen shots:</p>
  
  <p>MyViewController.xib, the blue rectangle below the title is my container view and has the IBOutlet containerView.  </p>
  
  <p><img src="https://i.stack.imgur.com/Yxejs.png" alt="http://i33.tinypic.com/14o3lmd.png"></p>
  
  <p>MySubview.xib  </p>
  
  <p><img src="https://i.stack.imgur.com/xszS3.png" alt="http://i37.tinypic.com/344ukk3.png"></p>
  
  <p>And finally, the result, which are incorrect.  </p>
  
  <p><img src="https://i.stack.imgur.com/KmfKl.png" alt="http://i34.tinypic.com/nbyqua.png"></p>
  
  <p>Instead I would want this, which I have faked just to get the screen shot.</p>
  
  <p>On iPhone 4,</p>
  
  <p><img src="https://i.stack.imgur.com/kv2Vn.png" alt="http://tinypic.com/r/w9fp5e/4"></p>
  
  <p>On iPhone 5,</p>
  
  <p><img src="https://i.stack.imgur.com/P1cfx.png" alt="http://tinypic.com/r/2z8nldv/4"></p>
  
  <p>As you can see in the fake screen shots, mySubview scales to fit the containerView, even as containerView scales a bit to adjust for the different phone screen sizes.</p>
  
  <p>Hope I did not go overboard with the info.  Any help would be terrific.  I feel like I am close but must be missing one key step.  Grrrrr.</p>