使用自动布局实现按钮的网格布局-AchievingGridLayoutofButtonswithAutolayout

I am trying to achieve a layout of buttons very similar to Apple's inbuilt Calculator app:

我正在尝试实现与苹果内置的计算器应用非常相似的按钮布局:

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).

我使用autolayout来定位按钮，并在每个按钮上画一个0.5像素的边框，目标是在按钮之间有一个1px的间隙(像calc app，上面显示的是一个视网膜设备上的像素)。

Border applied by :

边界采用:

    btn.layer.borderWidth=0.5f;
    btn.layer.borderColor=[[UIColor blackColor] CGColor];

and the layout is set up using Interface Builder.

布局是用接口构建器建立的。

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.

它几乎作品;但是在按钮之间的间隔中有一些变化——例如“1、2、3、thru”行和“4、5、6”和“row是2像素的，但是“7、8、9”和“cl、0、@”行之间的间隔只有一个像素。

Constraints are :

约束:

• Top black area has a fixed height
• 顶部黑色区域有一个固定的高度
• All buttons same height
• 所有按钮一样高
• In the numeric rows, numeric buttons are set to same width, THRU, AND, ALL OFF and ENTER buttons are set to same fixed width
• 在数字行中，数值按钮被设置为相同的宽度，通过，和，全部关闭和输入按钮被设置为相同的固定宽度
• 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.
• 顶部的一排按钮被固定在黑色区域的底部，底部的一排按钮被固定在ibin的父视图的底部。

In interface builder and at runtime I don't see any autolayout errors; and a debugger dump of the autolayout info gives me:

在接口构建器和运行时，我没有看到任何自动布局错误;一个调试器转储的自动布局信息给了我:

po [[UIWindow keyWindow] _autolayoutTrace]

* - AMBIGUOUS LAYOUT
|   *
|   |   *
|   |   |   *
|   |   |   |   *
|   |   |   |   |   *
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *
|   |   |   |   |   |   
|   |   |   |   |   *<_UILayoutGuide:0x1090e6dd0> - AMBIGUOUS LAYOUT
|   |   |   |   |   *<_UILayoutGuide:0x1090ce080> - AMBIGUOUS LAYOUT
|   |   
|   |   |   <_UINavigationBarBackground:0x109087240>
|   |   |   |   <_UIBackdropView:0x1090899f0>
|   |   |   |   |   <_UIBackdropEffectView:0x10908b110>
|   |   |   |   |   
|   |   |   |   
|   |   |   
|   |   |   |   
|   |   |   
|   |   |   |   
|   |   |   <_UINavigationBarBackIndicatorView:0x109098c80>

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?

有没有人能提供一些关于如何实现像这样的“像素完美”布局的提示?或者我应该按程序来做?

2 个解决方案