iPhone X 的“安全区域”（以像素为单位）是啥？

Posted 2023-03-15

【中文标题】iPhone X 的“安全区域”（以像素为单位）是啥？

【英文标题】：What is the 'safe region' for iPhone X (in pixels) that factors the top notch and bottom bar?iPhone X 的“安全区域”（以像素为单位）是什么？

【发布时间】：2017-09-23 06:45:14

【问题描述】：

我已经阅读了Human Interface Guidelines for iPhone X，它并没有具体说明“安全区域”（适用于 iPhone X 的***和底部栏的区域）。我想知道这个区域的像素尺寸，包括从顶部和底部移除的尺寸。

【参考方案1】：

纵向

顶部：44pt 底部：34pt 左/右：0pt

横向

顶部：0pt 底部：21pt 左/右：44pt

【讨论】：

其实是Landscape的底部21pt，不是24pt

这个常数值在每一个带有缺口的设备中吗？

不，你应该使用safeAreaInsets（来自UIViewController的道具）如果你正在编写一个ios或任何可以帮助的库（对于react-native/web github.com/th3rdwave/react-native-safe-area-context）

【参考方案2】：

通过以下代码打印当前窗口的安全区插图，可以得到上下安全区的点尺寸。

if #available(iOS 11.0, *) 
    UIApplication.shared.keyWindow?.safeAreaInsets
    // ...

纵向时，顶部区域为 44 点，底部区域为 34 点。

由于 iPhone X 具有 @3x 分辨率，因此顶部区域的长度为 132 像素，底部区域的长度为 102 像素。

【讨论】：

你怎么知道44像素？当我打电话给 safeareainsets.top 它给了我 88

@PabloMartinez ***.com/questions/46376860/…

【参考方案3】：

Xcode 9 在界面构建器中引入了安全区域布局指南。您可以通过进入情节提要的文件检查器和 ticking the checkbox labelled "Use Safe Area Layout Guides"

来打开它们

每当您向根视图添加约束时，您都可以选择将其约束到安全区域。 In this photo，橙色视图被限制在安全区域的边缘，而蓝色视图被限制在超级视图的边缘。

橙色视图的框架：(0.0, 44.0, 375.0, 734.0) 蓝色视图的框架：(0.0, 0.0, 375.0, 812.0)

从那里我们可以计算出 44 个点用于顶部安全区域，而 34 个点用于底部区域。

【讨论】：

你怎么知道44像素？当我打电话给 safeareainsets.top 它给了我 88

@PabloMartinez 获得 88 像素的原因是因为您的 UI 中有一个导航栏。保证安全区域布局指南不会被任何其他 UI 元素（如导航栏或选项卡栏）阻挡。欲了解更多信息，请查看今年 WWDC 的Auto Layout Techniques in Interface Builder。

你有类似的横向模式图片吗？

好的，这个模式下的状态栏应该在哪里？

@DeepakSharma 从我在模拟器上看到的内容来看，当您处于横向模式时，它根本不会显示。

【参考方案4】：

您可以从UIViewController 中视图的safeAreaInsets 属性获取它。

【参考方案5】：

您不需要调用单例UIApplication，也可以从您的视图布局中获取它们。

self.view.safeAreaInstes.（上、下、左、右）