title: How to layout three controls on iPhone so IB and simulator match?
body: <p>I'm trying to layout a simple UI for iPhone using Xcode's Interface Builder such that you have a text box and button at the top, and a tableview immediately beneath it filling the rest of the available space. There will be a top bar that I need to allow for as well. For the life of me though, I can't figure out how to lay it out so that it looks good in the simulator. I also find it looks radically different between simulator and IB.</p>
  
  <p>Here is what I currently have in IB. Notice how the top bar has space reserved, and the text box and send button is placed a solid inch or so below <em>that</em>, with very little space between those two controls and the tableview below. Note the huge gap between top bar and text box is only there because anything less causes the top bar in the simulator to overlap the text box.</p>
  
  <p><img src="https://i.stack.imgur.com/0w35C.png" alt="Interface Builder"></p>
  
  <p>And here is how it shows up in the simulator. Notice how the text box and button are now directly beneath the top bar, and there's a huge empty space between the text box and the tableview. </p>
  
  <p><img src="https://i.stack.imgur.com/zQ38W.png" alt="iPhone simulator"></p>
  
  <p>What's going on here? I know there are some anchor points, stretches (or whatever you call them) that may be at play here, but I've tried every combination I can think of and it still has various contorted effects. Yet it's so simple what I'm trying to do I'm sure I'm just missing something.</p>
  
  <p>How can I lay out these controls so they look right everywhere?</p>
  
  <p>Here is the source code for the .xib file:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
  &lt;document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="4514" systemVersion="13B42" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none"&gt;
      &lt;dependencies&gt;
          &lt;deployment defaultVersion="1792" identifier="iOS"/&gt;
          &lt;plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="3747"/&gt;
      &lt;/dependencies&gt;
      &lt;objects&gt;
          &lt;placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="DetailViewController"&gt;
              &lt;connections&gt;
                  &lt;outlet property="btnSend" destination="ZmR-ty-Pna" id="awD-N6-FnH"/&gt;
                  &lt;outlet property="conversationHistory" destination="hwz-En-aki" id="bzu-tE-l55"/&gt;
                  &lt;outlet property="txtMessage" destination="csI-Yi-U19" id="1fy-Bm-2Tr"/&gt;
                  &lt;outlet property="view" destination="1" id="3"/&gt;
              &lt;/connections&gt;
          &lt;/placeholder&gt;
          &lt;placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/&gt;
          &lt;view contentMode="scaleToFill" id="1"&gt;
              &lt;rect key="frame" x="0.0" y="64" width="320" height="416"/&gt;
              &lt;autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/&gt;
              &lt;subviews&gt;
                  &lt;button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" id="ZmR-ty-Pna"&gt;
                      &lt;rect key="frame" x="254" y="74" width="46" height="30"/&gt;
                      &lt;autoresizingMask key="autoresizingMask" flexibleMinX="YES" flexibleMaxY="YES"/&gt;
                      &lt;state key="normal" title="Send"&gt;
                          &lt;color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/&gt;
                      &lt;/state&gt;
                  &lt;/button&gt;
                  &lt;textField opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" borderStyle="roundedRect" minimumFontSize="17" id="csI-Yi-U19"&gt;
                      &lt;rect key="frame" x="20" y="75" width="226" height="30"/&gt;
                      &lt;autoresizingMask key="autoresizingMask" widthSizable="YES" flexibleMaxX="YES" flexibleMaxY="YES"/&gt;
                      &lt;fontDescription key="fontDescription" type="system" pointSize="14"/&gt;
                      &lt;textInputTraits key="textInputTraits"/&gt;
                  &lt;/textField&gt;
                  &lt;tableView clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" style="plain" separatorStyle="default" rowHeight="44" sectionHeaderHeight="22" sectionFooterHeight="22" id="hwz-En-aki"&gt;
                      &lt;rect key="frame" x="0.0" y="113" width="320" height="303"/&gt;
                      &lt;autoresizingMask key="autoresizingMask" flexibleMinX="YES" flexibleMaxX="YES" flexibleMinY="YES"/&gt;
                      &lt;color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/&gt;
                  &lt;/tableView&gt;
              &lt;/subviews&gt;
              &lt;color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/&gt;
              &lt;simulatedStatusBarMetrics key="simulatedStatusBarMetrics"/&gt;
              &lt;simulatedNavigationBarMetrics key="simulatedTopBarMetrics" translucent="NO" prompted="NO"/&gt;
              &lt;simulatedScreenMetrics key="simulatedDestinationMetrics"/&gt;
          &lt;/view&gt;
      &lt;/objects&gt;
  &lt;/document&gt;
  </code></pre>