Достижения Сетки расположения кнопок с Autolayout

Question

Я пытаюсь добиться расположения кнопок очень похоже на встроенное приложении Калькулятора компании Apple:

Я использую autolayout расположить кнопки, и рисунок 0.5px границы на каждом нажав кнопку «Пуск», нацелив на 1px зазор между кнопками (например, приложение calc, крупным планом, показывающим пиксели выше, с сетчатым устройством).

Border применяется:

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

и раскладка устанавливается с помощью Interface Builder.

Это почти работает; но существует некоторая изменчивость в промежутке между кнопками - например, разрыв между строками «1,2,3, thru» и «4,5,6» и «2», но разрыв между «7 , 8,9 "и" cl, 0, @ "- только один пиксель.

Ограничения:

• Top черная область имеет фиксированную высоту
• Все кнопки же высоты
• В числовых строк, цифровые кнопки устанавливаются в такой же ширины, THRU, AND, ALL OFF и Кнопки ENTER установлены на ту же фиксированную ширину
• Верхний ряд кнопок, прикрепленных к нижней части черной области, нижний ряд, прикрепленный к нижней части супервизора В IB все кнопки расположены друг против друга.

В построителе интерфейса и во время выполнения я не вижу ошибок автоопределения; и отладчик дамп информации autolayout дает мне:

po [[UIWindow keyWindow] _autolayoutTrace] 

*<UIWindow:0x10908a560> - AMBIGUOUS LAYOUT 
| *<UILayoutContainerView:0x109136140> 
| | *<UINavigationTransitionView:0x10908ef80> 
| | | *<UIViewControllerWrapperView:0x109138870> 
| | | | *<UIView:0x1090e6d10> 
| | | | | *<UILabel:0x1090d5bb0> 
| | | | | *<UIButton:0x1090d27e0> 
| | | | | | <UIButtonLabel:0x1091c9190> 
| | | | | *<UIButton:0x1090844c0> 
| | | | | | <UIButtonLabel:0x1091c7990> 
| | | | | *<UIButton:0x109088b60> 
| | | | | | <UIButtonLabel:0x1091c6190> 
| | | | | *<UIButton:0x1090e2ce0> 
| | | | | | <UIButtonLabel:0x1091c4990> 
| | | | | *<UIButton:0x1090e4e50> 
| | | | | | <UIButtonLabel:0x1091c3190> 
| | | | | *<UIButton:0x1090db730> 
| | | | | | <UIButtonLabel:0x1091c1990> 
| | | | | *<UIButton:0x109068f50> 
| | | | | | <UIButtonLabel:0x1091c0190> 
| | | | | *<UIButton:0x10906db80> 
| | | | | | <UIButtonLabel:0x1091be990> 
| | | | | *<UIButton:0x1090d23a0> 
| | | | | | <UIButtonLabel:0x1091bd190> 
| | | | | *<UIButton:0x1090c8520> 
| | | | | | <UIButtonLabel:0x1091bb990> 
| | | | | *<UIButton:0x1090c9090> 
| | | | | | <UIButtonLabel:0x1091ba190> 
| | | | | *<UIButton:0x1090c5680> 
| | | | | | <UIButtonLabel:0x1091b8990> 
| | | | | *<UIButton:0x1090d7fa0> 
| | | | | | <UIButtonLabel:0x1091b7190> 
| | | | | *<UIButton:0x1090cc820> 
| | | | | | <UIButtonLabel:0x1091b5990> 
| | | | | *<UIButton:0x10909dda0> 
| | | | | | <UIButtonLabel:0x1091b4190> 
| | | | | *<UIButton:0x1090c8090> 
| | | | | | <UIButtonLabel:0x1091b2990> 
| | | | | *<UIButton:0x1090c8e30> 
| | | | | | <UIButtonLabel:0x1091b1190> 
| | | | | *<UIButton:0x1090d5390> 
| | | | | | <UIButtonLabel:0x1091af990> 
| | | | | *<UIButton:0x10d30d260> 
| | | | | | <UIButtonLabel:0x1091ae190> 
| | | | | *<UIButton:0x10909a6a0> 
| | | | | | <UIButtonLabel:0x1091ac990> 
| | | | | *<UIButton:0x1090cca40> 
| | | | | | <UIButtonLabel:0x109161160> 
| | | | | *<UIButton:0x10d30ea90> 
| | | | | | <UIButtonLabel:0x109156460> 
| | | | | *<UIButton:0x1090da9e0> 
| | | | | | <UIButtonLabel:0x109177ad0> 
| | | | | *<_UILayoutGuide:0x1090e6dd0> - AMBIGUOUS LAYOUT 
| | | | | *<_UILayoutGuide:0x1090ce080> - AMBIGUOUS LAYOUT 
| | <UINavigationBar:0x10907da60> 
| | | <_UINavigationBarBackground:0x109087240> 
| | | | <_UIBackdropView:0x1090899f0> 
| | | | | <_UIBackdropEffectView:0x10908b110> 
| | | | | <UIView:0x10908bbb0> 
| | | | <UIImageView:0x1090877a0> 
| | | <UINavigationItemView:0x10916bc30> 
| | | | <UILabel:0x10917f810> 
| | | <UINavigationItemButtonView:0x1090ee060> 
| | | | <UILabel:0x1090ee5d0> 
| | | <_UINavigationBarBackIndicatorView:0x109098c80> 

Можно ли предлагать какие-либо намеки на то, как достичь «идеального» пикселя макет, как это с Autolayout? Или я должен делать это программно?

Answer 1

Я попытался установить горизонтальные/вертикальные пространства между представлениями равными 0,5. Цвет родительского представления действует как цвет границы. Он выглядит уродливым в IB, он не может правильно отображать макеты, но результирующий макет на устройстве выглядит идеально.

В интерфейсе строитель:

На тренажере:

Ограничения немного сложнее. Для каждая строка:

• набор высоты на 1-й кнопке
• устанавливается равной высоте для всех кнопок
• устанавливается равной ширины для всех кнопок (немного отличается для строк с оранжевыми кнопками)
• выравнивани верхние края всех кнопок
• выровнять нижние края всех кнопок
• установить ведущие и конечные пробелы между всеми кнопками (включая пробелы для наблюдения) до 0,5
• Абонентское пространство (к предыдущему ряду) 1-й кнопки 0,5

Вы можете применять ограничения на несколько элементов одновременно. Чтобы применить передние/конечные пробелы между кнопками, поместите их без пересечения в желаемом порядке перед применением.

Answer 2

Границы слоя рисуются внутри границ разрезов, поэтому вы не увидите «пробела» между кнопками, а эффект двух границ, примыкающих друг к другу. Это не будет работать в симуляторе или устройствах без сетчатки, так как он не может нарисовать полупиксель, а Autolayout не выравнивает представления на полупикселях.

Для макета, подобного выше, я бы установил фиксированную высоту для кнопок (или одной кнопки, а остальные равны ей) и позволил черному виду заняться оставшимся пространством. Всегда лучше иметь хотя бы один (идеально, точно один) переменный элемент в полноэкранном режиме, в основном для покрытия ошибок округления.

Звучит так, как будто у вас есть один фиксированный элемент (черный вид), а кнопки в основном «берут оставшуюся высоту и делят ее между собой», которая будет работать только в том случае, если оставшаяся высота будет идеально разделена.