Interface Builder 不遵守安全区域对齐约束

Question

在 Interface Builder 中，如果我使对齐与安全区域成比例或与超级视图成比例，则为 UI 元素（比方说按钮）设置约束不会改变。

我有一个按钮，我将其水平对齐设置为：

我有另一个按钮，我将其水平对齐方式设置为：

两个按钮最终水平对齐：

我原以为与安全区域对齐的按钮会向右移动，因为安全区域的前缘从超级视图之一向右移动。我可能遗漏了一些东西，但不太明白这里发生了什么。

问题是与安全区域成比例的高度和宽度受到尊重，因此如果您使 UI 元素与安全区域或超级视图成比例，它们的大小确实会改变。因此，当您尝试使用安全区域比例高度和宽度来布局某些内容，并且还使用安全区域比例水平和垂直放置时，UI 元素不会与带有缺口的 iPhone 对齐。他们是 iPad 和 iPhone 等设备的阵容，没有缺口，安全区域非常靠近 Superview 区域。

Answer 1

一些事情可能会造成混乱...

首先，它有助于添加一个（黄色）视图，将所有 4 个边都限制到安全区域（使用 iPhone 13 Pro 布局）：

如您所见，安全区有 44 点 前导 AND 尾随 .

因此，在纵向方向中，超级视图和黄色视图的宽度均为 390.0，两者的 CenterX 值均为 195.0。

当旋转到横向时，超级视图宽度为 844.0，而黄色视图（受限于安全区域）宽度仅为 756.0 ... 即每侧 44 磅。

但是，CenterX 值是相同的：422.0

因此，当我们使用 0.5 乘数约束通向 超级视图或安全区域的 CenterX 的视图/标签时，生成的 X / 前导值将为 422.0 * 0.5 == 211.0

使用这些约束查看此示例：

• L1 前导是 Superview.centerX * 0.5

• L2 前导是 SafeArea.centerX * 0.5

• L3 CenterX 是 Superview.centerX

• L4 前导是 L3.centerX * 0.5

• L5 CenterX 是 SafeArea.centerX

• L6 前导是 L5.centerX * 0.5

• L7 CenterX 是 Superview.centerX（但宽度：240 而不是 120）

• L8 前导是 L7.centerX * 0.5

正如我们所见，所有 个“50% 的 CenterX”标签已对齐。

并且，我们在旋转时得到相同的对齐方式：

值得注意：如果您尝试对 Top 和 CenterY 约束做同样的事情，您 将 立即看到差异。 . 因为当旋转到 Landscape Orientation 时，Safe Area Top 和 Bottom “padding” 是不一样的。