没有为所有屏幕设备正确调整大小的约束

Posted 2023-03-12

【中文标题】没有为所有屏幕设备正确调整大小的约束

【英文标题】：Constraints not resizing properly for all screen devices

【发布时间】：2017-01-04 08:54:22

【问题描述】：

我正在尝试对这些水平按钮进行约束。我希望按钮的大小比例相同，并且图标的宽度和高度相同。

知道如何做到这一点，以便这些按钮根据屏幕尺寸正确调整大小吗？谢谢！

【问题讨论】：

你尝试过哪些限制条件？

两条规则 1. 将 Text 和 Image 放在一个 View 中，这样你最终就有了四个容器视图 2. 将比例高度和宽度添加到一个容器视图中，并链接其他高度和宽度相等的视图。

【参考方案1】：

将包含图标和文本的UIView 分组。让我们称之为容器视图

将所有 n 个容器视图放置在故事板中，就像您希望它们出现一样。现在：

在最左边的容器视图向超级视图添加前导和底部约束。 现在向第二个容器视图添加前导空格 0（或任何您想要的）。 Control + 将您的第二个按钮拖动到第一个按钮。按住 shift 并选择等宽、等高和底部对齐。

现在将与第二个容器视图相同的约束应用于所有 n - 1 个容器视图。 n 是您要添加的 容器视图 的数量。现在为您的最后一个（第 n 个）容器视图添加一个额外的约束，这将是 superView 的尾随空格。现在你所有的 container view 应该有一个相等的宽度，这将取决于屏幕的宽度！

如果您希望所有 容器视图 具有特定的高度或纵横比。只需将 height 或 aspect ratio 约束添加到您的 first container view，您的所有后续视图都会相应更新.

或

如果您希望高度取决于屏幕尺寸并且不保持特定的纵横比，那么您必须为第一个 容器视图使用特定乘数（例如 0.15）到整个视图的高度。

您还必须为每个UIView 中的图标和标签添加适当的约束

编辑：您更容易做的事情是将图标作为图像添加到UIButton，然后像往常一样将文本添加到UIButton。 UIButton 将与您发布的屏幕截图非常相似。然后只需应用我上面提到的约束。

【讨论】：

感谢您的回答！我制作了容器视图。如何约束每个容器视图内的按钮？

只需在按钮的超级视图中添加尾随、顶部和底部，并在图标的超级视图中添加前导、顶部和底部以及按钮和图标之间的水平间距。

【参考方案2】：

设置宽度和高度为 SuperView 的比例。设置是否为一个按钮和其余按钮使高度和宽度等于您根据超级视图高度和大小为其定义高度和宽度的第一个按钮。使用此SO Post 了解如何将高度和宽度设置为超级视图的比例。

希望这会有所帮助。

【参考方案3】：

这很简单，因为您的所有按钮都是单向的，因此您可以使用 StackView。 很简单，首先将相等的高度和相等的宽度应用于所有按钮

现在选择所有按钮并将它们添加到堆栈视图中

它将位于右侧底部。 （带有约束图标）

现在简单的应用添加缺少的约束。它会自己完成工作并给出更好的结果。 （但请注意在 View Controller 部分的所有视图中应用它）

现在 Bingo 试试这个，每个大小都会显示相同。

这在模拟器中也同样有效。

【讨论】：

感谢您的回答！但我不希望所有这些按钮都具有恒定的高度和宽度，因为它们不适合较小的屏幕。

所以你也可以给他们一个比例。它也可以在约束部分中找到。

【参考方案4】：

解决方法很简单。

见下图（5 个按钮）

第一个（蓝色）按钮固定在超级视图的左侧和底部 其他 4 个按钮（红色、黑色、绿色、粉色）中的每一个都与第一个（蓝色）按钮顶部对齐 每个按钮都使用与前一个按钮的水平间距（常数为 0）。所以红色按钮与蓝色的水平间距为 0，黑色与红色的水平间距为 0，等等 最后一个（粉红色）按钮也固定在超级视图的右侧 最后，所有其他 4 个按钮都设置为与第一个（蓝色）按钮具有相同的宽度

就是这样！

至于您的图标，您只需将它们设置为与您拥有的第一个图标具有相同的宽度和高度