iPhone X的"安全区域"(以像素为单位)是什么因素影响顶级和底部条形图？

Question

我已经阅读了iPhone X的人机界面指南,并没有明确说明"安全区域"(适用于iPhone X上的顶部和底部条的区域).我想知道这个区域的像素尺寸,包括从顶部和底部移除的尺寸.

Answer 1

TL;博士:

在肖像

• 上:44pt
• 下图:34pt
• 左/右:0pt

在景观

• 上:0pt
• 下图:24pt
• 左/右:44pt

资料来源:挖掘20个关于这个维度的资源和...在iOS模拟器中练习:)

Answer 2

通过使用以下代码打印当前窗口的安全区域插入,您可以获得顶部和底部安全区域的点尺寸.

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

在纵向中,顶部区域长44个,底部区域长34个.

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

Answer 3

Xcode 9在界面构建器中引入了安全区域布局指南.您可以通过进入故事板的文件检查器并勾选标记为"使用安全区域布局指南"的复选框来打开它们.

每当您向根视图添加约束时,您都可以选择将其约束到安全区域.在此照片中,橙色视图被约束到安全区域的边缘,而蓝色视图被约束到超视图的边缘.

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

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