自动布局无法正确处理 iPhone X 缺口

Posted 2023-03-14

【中文标题】自动布局无法正确处理 iPhone X 缺口

【英文标题】：Auto Layout not properly handling iPhone X notch

【发布时间】：2018-02-03 19:09:49

【问题描述】：

我已经使用 swift 在我的应用程序顶部实现了一个 pageViewIndicator。我一直在我的个人 iPhone 上测试它，它已经工作了，但是在使用 iPhone X 模拟器时，我注意到它消失在凹口后面，仅仅是因为我没有提到将它放在安全区域或安全区域是尚未正确配置。这是比较：

这似乎是一个简单的问题，但我目前还没有找到有关如何处理此问题的任何适当支持：主要建议是调整 safeAreaInsets，但我不明白如何将其应用于 AutoLayout 功能。我已经尝试向 pageController 添加一个 topAnchor 约束，但是否可以使用基本算法对其进行编辑？

pageControl.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true

【问题讨论】：

使用这个解决方案，然后你检查 hasNotch ***.com/a/68289931/7110147

【参考方案1】：

没有必要“调整”任何东西。安全区域的全部点在于它的顶部在非 X iPhone 上位于状态栏下方，在 iPhone X 上位于“缺口”下方。这就是安全区域的作用 .

因此，只需将页面控件的顶部固定到安全区域的顶部即可。这是它在 iPhone 5s 模拟器上的样子：

这是它在 iPhone X 模拟器上的样子：

【讨论】：

这确实有道理，但是如何将其“固定”到安全区域。在定义 y 位置时，有什么方法可以将其分配到安全区域内的最高点？

是的，只需将页面控件的顶部设置为等于安全区域的顶部（常数为零）。听起来您可能对自动布局一无所知。您最好开始了解它，因为如果您希望您的界面适用于所有尺寸的手机，这一点至关重要。

pageControl = UIPageControl(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 0)) 是我用来定义 pageControl 的代码。然而，这样做的问题是，它将 iPhone X 的 pageControl 定位在耳朵的边缘，就在中间，完全忽略了缺口。将 50 分配给 y 值会将其设置在此不可见区域之外，但会使所有其他设备在视觉上不适合。

对，因为那不是我说要做的。 UIPageControl(frame: 是不是自动布局。它不将任何东西“固定”到任何东西上。了解自动布局。尝试谷歌搜索；这并不多，但这是一个开始。

【参考方案2】：

我发现了我的问题，这实际上是我刚刚监督的：我忘了添加

pageControl.translatesAutoresizingMaskIntoConstraints = false

在将其添加为子视图之前添加到 pageControl。有了这个，我能够分配以下约束以正确地将我的 pageController 定位在我想要的位置：

let safeViewMargins = self.view.safeAreaLayoutGuide
pageControl.topAnchor.constraint(equalTo: safeViewMargins.topAnchor).isActive = true
pageControl.leadingAnchor.constraint(equalTo: safeViewMargins.leadingAnchor).isActive = true
pageControl.trailingAnchor.constraint(equalTo: safeViewMargins.trailingAnchor).isActive = true

然后它可以在所有设备上完美运行。

【参考方案3】：

我目前正在升级的应用程序中遇到了同样的问题。它在主屏幕的右侧有一列按钮。在右侧带有凹槽的横向方向中，按钮被部分切断。如果不需要，我不想移动按钮，因为这会显着减小左侧消息区域的尺寸，尤其是在纵向模式下。

我在 Xcode 中没有看到与“安全区域”相对应的约束，并且不想进入动态定位的兔子洞，所以我的解决方案是将方向限制为纵向和横向右（表示左边的缺口）。

如果我们有针对每个设备类型的方向限制，那就太好了，但不要为此屏住呼吸。

希望几年后，这种丑陋的时尚潮流会消失。