Interface Builder 不遵守安全区域对齐约束
在 Interface Builder 中，如果我使对齐方式与安全区域成比例或与超级视图成比例，则为 UI 元素（假设是按钮）设置约束不会改变。
我有一个按钮，我将其水平对齐方式设置为： 
我有另一个按钮，我将其水平对齐方式设置为： 
两个按钮最终水平对齐： 
我希望随着安全区域的前缘从超级视图之一向右移动，与安全区域对齐的按钮会向右移动。我可能错过了一些东西，但不太明白这里发生了什么。
问题在于，高度和宽度与安全区域成比例是受到尊重的，因此，如果您使 UI 元素与安全区域或超级视图成比例，则它们的大小确实会发生变化。因此，当您尝试使用安全区域比例的高度和宽度来布局某些内容，并且还使用安全区域比例的水平和垂直放置时，UI 元素不会与带有凹口的 iPhone 对齐。他们为 iPad 和 iPhone 等没有缺口的设备提供了阵容，其中安全区域非常靠近 Superview 区域。
In Interface Builder, setting the constraints for a UI element (let's say a button) doesn't change if I make the aligment proportional to the Safe Area or proportional to the Superview.
I have a button which I set its horizontal alignment to be:
I have another button which I set its horizontal alignment to be:
Both buttons end up being aligned horizontally:
I would have expected the button aligned to the Safe Area to be shifted to the right as the Safe Area's leading edge is shifted to the right from the one of the Superview. I'm probably missing something but can't quite understand what is going on here.
The problem is that heights and widths proportional to the Safe Area are honored, so the size of UI elements does change if you make them proportional to the Safe Area or to the Superview. So when you try to layout something with Safe Area proportional heights and widths, and also use Safe Area proportional horizontal and vertical placements, UI Elements don't line up for iPhones with a notch. They kind of lineup for devices like iPads and iPhones with no notch where the Safe Area is very close to the Superview area.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
有几件事可能会导致混乱......
所有 4 个侧面限制在安全区域（使用 iPhone 13 Pro 布局）：
首先，它有助于添加一个（黄色）视图，将 sstatic.net/NC26A.png" rel="nofollow noreferrer">
如您所见，安全区域有 44 分领先和落后。
因此，在纵向方向中，超级视图和黄色视图的宽度均为
390.0，并且 CenterX 值均为195.0。旋转到横向时，超级视图宽度为
844.0，而黄色视图（仅限安全区域）宽度仅为756.0...即每侧 44 点。但是，CenterX 值是相同的：
422.0因此，当我们约束视图/标签导致 CenterX 为任一 em> 乘数为 0.5 的超级视图或安全区域，生成的 X / 前导值将为
422.0 * 0.5 == 211.0看一下使用这些约束的示例：
L1 领先的是
Superview.centerX * 0.5L2 领先是
SafeArea.centerX * 0.5L3 CenterX 是
Superview.centerXL4 领先为
L3.centerX * 0.5L5 CenterX 是
SafeArea.centerXL6 领先为
L5.centerX * 0.5L7 CenterX 是
Superview.centerX（但宽度：240而不是 120）L8 前导是
L7.centerX * 0.5正如我们所看到的，所有“CenterX 的 50%”标签都是对齐的。
并且，旋转时我们得到相同的对齐方式：
值得注意：如果您尝试对 Top 和 CenterY 约束执行相同的操作，您将会 看到直接的差异...因为当旋转到横向时，安全区域顶部和底部“填充”并不相同。
Couple things may be causing the confusion...
First, it helps to add a (yellow) view, constrained on all 4 sides to the Safe Area (using iPhone 13 Pro layout):
As you can see, the Safe Area has 44-pts Leading AND Trailing.
So, in Portrait Orientation, both the Superview and the Yellow view have a Width of
390.0and the CenterX value for both is195.0.When rotated to Landscape, the Superview Width is
844.0while the Yellow view (constrained to Safe Area) Width is only756.0... that is, 44-pts on each side.However, the CenterX value is the same:
422.0So, when we constrain a view / label Leading to CenterX of either the Superview or Safe Area with a 0.5 Multiplier, the resulting X / Leading value will be
422.0 * 0.5 == 211.0Take a look at this example using these constraints:
L1 Leading is
Superview.centerX * 0.5L2 Leading is
SafeArea.centerX * 0.5L3 CenterX is
Superview.centerXL4 Leading is
L3.centerX * 0.5L5 CenterX is
SafeArea.centerXL6 Leading is
L5.centerX * 0.5L7 CenterX is
Superview.centerX(but Width: 240 instead of 120)L8 Leading is
L7.centerX * 0.5As we see, all of the "50% of CenterX" labels are aligned.
And, we get the same alignment when rotated:
Worth noting: If you try to do the same thing with Top and CenterY constraints, you WILL see an immediate difference... because when rotated to Landscape Orientation, the Safe Area Top and Bottom "padding" are not the same.