iOS约束：4个按钮

Question

我想在屏幕上放置4个按钮。它们应该具有相同的高度和宽度。按钮之间的边距应为35px，视图边框的边距应为20px。

现在按钮应缩放到不同大小的屏幕。但是我对约束的所有尝试都失败了。

有人知道如何正确使用它们吗？

布局：

---------------
|             |
|   x     x   |
|             |
|   x     x   |
|             |
---------------

X是按钮

Answer 1

如果您想要的结果如下所示，请按照以下步骤操作：

  

始终牢记这种方法。在故事板（600x600）中设计您应该呈现的视图，然后然后应用您的约束。

• 按预期将四个按钮放置在600x600px上。视图：

• 选择所有按钮，然后在下限约束帮助器中选择“Equal Width”和“Equal Height”约束：

• 按住Ctrl键从B1拖动到B2，释放并选择“Horizo​​ntal Spacing”。在B3和B4之间做同样的事。

• 使用B1 / B3和B2 / B4重复上一步，但选择“垂直间距”。

• 对于B1，将其附加到20px。从左边和上边界如下所示：

  

在应用约束之前，取消选择约束到边距。

• 对B2（上/右），B3（左/下）和B4（右/下）执行相同操作。

您已经完成了设置，无论屏幕尺寸如何，您的视图现在都可以适当缩放。

Answer 2

您可以编写一个程序来计算按钮的大小。首先，获取你的屏幕宽度，比如320.然后：320 = 20 +按钮宽度+ 35 +按钮宽度+20 2 *按钮宽度= 245.按钮宽度= 122.5。

同样适用于身高。

Answer 3

我会做以下事情：

1）添加1x1视图，其背景颜色是明确的，并添加相对于包含视图居中的约束。这为你提供了一个中心点。

2）对于左侧按钮，将1x1视图的尾随距离设置为17.5。

3）对于正确的按钮。将前导距离设置为1x1视图为17.5。

4）对于顶部按钮，将1x1视图的底部距离设置为17.5。

5）对于底部按钮，将1x1视图的最大距离设置为17.5。

这将为您提供相对于此1x1视图的按钮。如果你想要顶部或底部的按钮等，你现在可以向上或向下移动它......现在你想要处理宽度的缩放。

6）为满足您需求的按钮添加宽高比。方块等1：1。

7）对于左侧按钮，将包含视图的前导距离设置为20pts。

8）对于右侧按钮，将包含视图的尾随距离设置为20pts。

如果设置了宽高比，按钮应按比例缩放宽度和高度，以满足20pt约束和约束到1x1中心点。