iOS 约束条件：4 个按钮
iOS constraints: 4 Buttons
我想在屏幕上放置 4 个按钮。它们应该具有相同的高度和宽度。按钮之间的边距应为 35px，视图边框的外边距应为 20px。
现在按钮应该可以缩放到不同的屏幕尺寸。但是我对约束的所有尝试都失败了。
有人知道如何正确使用它们吗？
布局：
---------------
| |
| x x |
| |
| x x |
| |
---------------
X 是按钮
您可以编写一个程序来计算按钮的大小。首先，获取屏幕宽度，比如 320。然后：320 = 20 + 按钮宽度 + 35 + 按钮宽度 + 20
2 * 按钮宽度 = 245。按钮宽度 = 122.5.
同样适用于高度。
我会做以下事情：
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 中心点的约束。
如果您想要的结果是下面呈现的结果，请按照以下步骤操作：
Always keep in mind this method. Design your view as-it-should-render in your storyboard (600x600) and then apply your constraints.
- 按 600x600 像素的预期放置四个按钮。查看：
- Select所有按钮，然后在下方的Constraint helper中选择"Equal Width"和"Equal Height"约束：
- Drag-n-drop 从 B1 到 B2，按住 Ctrl 键，松开并 select "Horizontal Spacing"。在B3和B4之间做同样的事情。
使用 B1/B3 和 B2/B4 重复上一步，但选择 "Vertical Spacing"。
对于 B1，attach-it 到 20px。从左边界和上边界如下所示：
Deselect Constraint to margins before applying constraint.
- 对 B2 (top/right)、B3 (left/bottom) 和 B4 (right/bottom) 执行相同的操作。
大功告成，现在无论屏幕大小如何，您的视图都会适当缩放。
我想在屏幕上放置 4 个按钮。它们应该具有相同的高度和宽度。按钮之间的边距应为 35px，视图边框的外边距应为 20px。
现在按钮应该可以缩放到不同的屏幕尺寸。但是我对约束的所有尝试都失败了。
有人知道如何正确使用它们吗？
布局：
---------------
| |
| x x |
| |
| x x |
| |
---------------
X 是按钮
您可以编写一个程序来计算按钮的大小。首先，获取屏幕宽度，比如 320。然后：320 = 20 + 按钮宽度 + 35 + 按钮宽度 + 20 2 * 按钮宽度 = 245。按钮宽度 = 122.5.
同样适用于高度。
我会做以下事情：
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 中心点的约束。
如果您想要的结果是下面呈现的结果，请按照以下步骤操作：
Always keep in mind this method. Design your view as-it-should-render in your storyboard (600x600) and then apply your constraints.
- 按 600x600 像素的预期放置四个按钮。查看：
- Select所有按钮，然后在下方的Constraint helper中选择"Equal Width"和"Equal Height"约束：
- Drag-n-drop 从 B1 到 B2，按住 Ctrl 键，松开并 select "Horizontal Spacing"。在B3和B4之间做同样的事情。
使用 B1/B3 和 B2/B4 重复上一步，但选择 "Vertical Spacing"。
对于 B1，attach-it 到 20px。从左边界和上边界如下所示：
Deselect Constraint to margins before applying constraint.
- 对 B2 (top/right)、B3 (left/bottom) 和 B4 (right/bottom) 执行相同的操作。
大功告成，现在无论屏幕大小如何，您的视图都会适当缩放。