title: Achieving Grid Layout of Buttons with Autolayout
body: <p>I am trying to achieve a layout of buttons very similar to Apple's inbuilt Calculator app:
  <img src="https://i.stack.imgur.com/QqSE9.png" alt="Closeup of calc application"></p>
  
  <p>I am using autolayout to position the buttons, and drawing a 0.5px border on each button, aiming for a 1px gap between buttons (like the calc app, closeup showing pixels above, from a retina device).</p>
  
  <p>Border applied by :</p>
  
  <pre><code>    btn.layer.borderWidth=0.5f;
      btn.layer.borderColor=[[UIColor blackColor] CGColor];
  </code></pre>
  
  <p>and the layout is set up using Interface Builder.</p>
  
  <p><img src="https://i.stack.imgur.com/pGnYh.png" alt="app screenshot"></p>
  
  <p>It almost works; but there is some variability in the gap between buttons - for example the gap between the "1,2,3,thru" row and the "4,5,6,and" row is 2 pixels, but the gap between the "7,8,9" and "cl,0,@" rows is only one pixel.</p>
  
  <p>Constraints are :</p>
  
  <ul>
  <li>Top black area has a fixed height</li>
  <li>All buttons same height</li>
  <li>In the numeric rows, numeric buttons are set to same width, THRU, AND, ALL OFF and ENTER buttons are set to same fixed width</li>
  <li>Top row of buttons pinned to bottom of black area, bottom row pinned to bottom of superview
  In IB the buttons are all positioned butting up against each other.</li>
  </ul>
  
  <p>In interface builder and at runtime I don't see any autolayout errors; and a debugger dump of the autolayout info gives me:</p>
  
  <pre><code>po [[UIWindow keyWindow] _autolayoutTrace]
  
  *&lt;UIWindow:0x10908a560&gt; - AMBIGUOUS LAYOUT
  |   *&lt;UILayoutContainerView:0x109136140&gt;
  |   |   *&lt;UINavigationTransitionView:0x10908ef80&gt;
  |   |   |   *&lt;UIViewControllerWrapperView:0x109138870&gt;
  |   |   |   |   *&lt;UIView:0x1090e6d10&gt;
  |   |   |   |   |   *&lt;UILabel:0x1090d5bb0&gt;
  |   |   |   |   |   *&lt;UIButton:0x1090d27e0&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091c9190&gt;
  |   |   |   |   |   *&lt;UIButton:0x1090844c0&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091c7990&gt;
  |   |   |   |   |   *&lt;UIButton:0x109088b60&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091c6190&gt;
  |   |   |   |   |   *&lt;UIButton:0x1090e2ce0&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091c4990&gt;
  |   |   |   |   |   *&lt;UIButton:0x1090e4e50&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091c3190&gt;
  |   |   |   |   |   *&lt;UIButton:0x1090db730&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091c1990&gt;
  |   |   |   |   |   *&lt;UIButton:0x109068f50&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091c0190&gt;
  |   |   |   |   |   *&lt;UIButton:0x10906db80&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091be990&gt;
  |   |   |   |   |   *&lt;UIButton:0x1090d23a0&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091bd190&gt;
  |   |   |   |   |   *&lt;UIButton:0x1090c8520&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091bb990&gt;
  |   |   |   |   |   *&lt;UIButton:0x1090c9090&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091ba190&gt;
  |   |   |   |   |   *&lt;UIButton:0x1090c5680&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091b8990&gt;
  |   |   |   |   |   *&lt;UIButton:0x1090d7fa0&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091b7190&gt;
  |   |   |   |   |   *&lt;UIButton:0x1090cc820&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091b5990&gt;
  |   |   |   |   |   *&lt;UIButton:0x10909dda0&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091b4190&gt;
  |   |   |   |   |   *&lt;UIButton:0x1090c8090&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091b2990&gt;
  |   |   |   |   |   *&lt;UIButton:0x1090c8e30&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091b1190&gt;
  |   |   |   |   |   *&lt;UIButton:0x1090d5390&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091af990&gt;
  |   |   |   |   |   *&lt;UIButton:0x10d30d260&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091ae190&gt;
  |   |   |   |   |   *&lt;UIButton:0x10909a6a0&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x1091ac990&gt;
  |   |   |   |   |   *&lt;UIButton:0x1090cca40&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x109161160&gt;
  |   |   |   |   |   *&lt;UIButton:0x10d30ea90&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x109156460&gt;
  |   |   |   |   |   *&lt;UIButton:0x1090da9e0&gt;
  |   |   |   |   |   |   &lt;UIButtonLabel:0x109177ad0&gt;
  |   |   |   |   |   *&lt;_UILayoutGuide:0x1090e6dd0&gt; - AMBIGUOUS LAYOUT
  |   |   |   |   |   *&lt;_UILayoutGuide:0x1090ce080&gt; - AMBIGUOUS LAYOUT
  |   |   &lt;UINavigationBar:0x10907da60&gt;
  |   |   |   &lt;_UINavigationBarBackground:0x109087240&gt;
  |   |   |   |   &lt;_UIBackdropView:0x1090899f0&gt;
  |   |   |   |   |   &lt;_UIBackdropEffectView:0x10908b110&gt;
  |   |   |   |   |   &lt;UIView:0x10908bbb0&gt;
  |   |   |   |   &lt;UIImageView:0x1090877a0&gt;
  |   |   |   &lt;UINavigationItemView:0x10916bc30&gt;
  |   |   |   |   &lt;UILabel:0x10917f810&gt;
  |   |   |   &lt;UINavigationItemButtonView:0x1090ee060&gt;
  |   |   |   |   &lt;UILabel:0x1090ee5d0&gt;
  |   |   |   &lt;_UINavigationBarBackIndicatorView:0x109098c80&gt;
  </code></pre>
  
  <p>Can anyone offer any hints on how to achieve a "pixel perfect" layout like this with Autolayout? Or should I be doing this programatically instead?</p>