iOS 限制：4 个按钮

Posted 2023-02-23

【中文标题】iOS 限制：4 个按钮

【英文标题】：iOS constraints: 4 Buttons

【发布时间】：2015-03-16 12:54:11

【问题描述】：

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

现在按钮应该可以缩放到不同的屏幕尺寸。但是我所有的约束尝试都失败了。

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

布局：

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

X 是按钮

【问题讨论】：

按钮需要填满整个空间（矩形）还是一些方形按钮？

按钮和边距的大小应随屏幕大小缩放。但边距的缩放速度应该比按钮慢。

我不明白。阅读您的问题，只有按钮必须缩放，内边距为 35px。 （固定）和外部是 20px。 （固定），是你想要的结果吗？

是的，边距应该保持不变。我错了，对不起。

【参考方案1】：

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

始终牢记这种方法。在情节提要 (600x600) 中按应呈现方式设计视图，然后然后应用您的约束。

按预期放置 600x600 像素的四个按钮。查看：

选择所有按钮，然后在下部约束助手中选择“等宽”和“等高”约束：

按住 Ctrl 键从 B1 拖放到 B2，松开并选择“水平间距”。在 B3 和 B4 之间执行相同的操作。

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

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

在应用约束之前取消选择对边距的约束。

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

一切就绪，无论屏幕大小如何，您的视图现在都会适当缩放。

【讨论】：

感谢您的帮助。但我希望他们改进约束系统。

【参考方案2】：

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

同样适用于高度。

【讨论】：

此方法不使用约束，使用和调试难度较大。

【参考方案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 中心点的约束。