AutoLayout 的按钮相互重叠

Posted 2023-03-15

【中文标题】AutoLayout 的按钮相互重叠

【英文标题】：AutoLayout has buttons on top of each other

【发布时间】：2015-10-06 17:56:02

【问题描述】：

我对 iPad 应用程序中的 UIButtons 有限制，因此顶行按钮与 UIImageView 保持一定距离，因此底行按钮保持固定在非常靠近底部的位置。但是，当我旋转时，一切都出错了。这是纵向和横向时的图像。鉴于横向模式下的垂直空间较少，如何解决此问题？

【参考方案1】：

您需要在旋转时缩放子视图的大小，或者使用滚动视图。

由于您将按钮放置在距屏幕底部一定距离的位置，而不是保持一致的间距，因此当空间不足时它们会重叠。 （我从你的截图中假设它打破了两行按钮之间的约束，假设有一个）

您可以将每行按钮的可用空间与主视图的总垂直大小相关联。例如，让图像占总垂直空间的 50%，每行按钮占 25%（我将为每行设置一个容器视图，然后为容器添加约束）。确保您的图像/按钮正确缩放并保持其纵横比。

另一种选择可能是识别视图何时旋转，并修改所有约束，以便您的按钮全部布局在一行中，但这可能涉及大量编码来交换/更改大部分约束。

【讨论】：

目前每行按钮之间没有垂直约束间隙。如何添加，或者应该添加？对于这个特定的应用程序，我使用 XIB 而不是 Storyboard，因此它对现在为 AutoLayout 编写的大多数教程都有一定的影响。你认为最简单的方法是什么？我希望在旋转时只有一行，但不知道如何实现。

尝试在每行按钮之间放置一个垂直约束。例如，从一个按钮向下按住 ctrl 并拖动到其下方的一个按钮，然后选择“垂直间距”然后在 Size Inspector 中找到约束，将类型从“Equal”更改为“Greater than or Equal”并将常量设置为0. 看看这是否适合你。不过，根据其他约束的设置方式，这可能不起作用。

@user717452 我看到您的两个屏幕截图都来自 iPad。如果这是唯一的目标设备，那么需要考虑的另一件事是将所有 6 个按钮放在一行中，无论是纵向还是横向，因为在更大的 iPad 屏幕上会有足够的空间来执行此操作。