Xcode的安全区域

当视图在屏幕上可见时,本指南将反映该视图未被其他内容覆盖的部分。 视图的安全区域反映了导航栏,标签栏,工具栏和其他祖先覆盖的区域,这些区域使视图控制器的视图变得模糊。 (在tvOS中,安全区域合并了屏幕的边框,如UIScreen的overscanCompensationInsets属性所定义。)它还覆盖了视图控制器的overscanCompensationInsets属性所定义的任何其他空间。 如果视图当前未安装在视图层次结构中,或者在屏幕上尚不可见,则布局指南始终与视图的边缘匹配。

对于视图控制器的根视图,此属性中的安全区域表示被遮盖的视图控制器内容的整个部分,以及您指定的任何其他插图。 对于视图层次结构中的其他视图,安全区域仅反映该视图中被遮盖的部分。 例如,如果视图完全在其视图控制器的根视图的安全区域内,则此属性中的边插入为0。

根据苹果的说法, Xcode 9 —发行说明
Interface Builder使用UIView.safeAreaLayoutGuide代替了UIViewController中已弃用的顶部和底部布局指南。 要使用新的安全区域,请在文件检查器中为视图控制器选择“安全区域布局指南”,然后在内容和新的安全区域锚点之间添加约束。 这样可以防止您的内容被顶部和底部的条以及tvOS上的过扫描区域所遮盖。 部署到早期版本的iOS时,对安全区域的约束将转换为“顶部”和“底部”。

这是现有(顶部和底部)布局指南和“安全区域布局指南”之间的比较(以产生类似的视觉效果),仅供参考。

自动版式

如何使用安全区域布局?

请按照以下步骤查找解决方案:

  • 如果未启用,请启用“安全区域布局”。
  • 如果它们显示与Super View的连接,则删除“所有约束”,然后使用安全的布局锚点重新附加所有约束。 或双击约束并编辑从超级视图到SafeArea锚点的连接

这是示例快照,如何启用安全区域布局和编辑约束。

这是上述更改的结果

使用SafeArea进行布局设计
为iPhone X设计时,必须确保布局充满屏幕,并且不会被设备的圆角,传感器外壳或用于访问主屏幕的指示器所遮盖。

使用标准的,系统提供的UI元素(例如导航栏,表格和集合)的大多数应用会自动适应设备的新尺寸。 背景材料延伸到显示器的边缘,并且UI元素已适当插入和放置。

对于具有自定义布局的应用程序,支持iPhone X也应该相对容易一些,尤其是如果您的应用程序使用自动布局并遵守安全区域和边距布局指南。

这是示例代码(请参阅: 安全区域布局指南
如果您在代码中创建约束,请使用UIView的safeAreaLayoutGuide属性获取相关的布局锚点。 让我们在代码中重新创建上面的Interface Builder示例,以查看其外观:

假设我们在视图控制器中将绿色视图作为属性:

 私人让greenView = UIView() 

我们可能有一个函数来设置从viewDidLoad调用的视图和约束:

 私人功能setupView(){ 
greenView.translatesAutoresizingMaskIntoConstraints =否
greenView.backgroundColor = .green
view.addSubview(greenView)
}

像往常一样使用根视图的layoutMarginsGuide创建前缘和尾缘边距约束:

 让margins = view.layoutMarginsGuide 
NSLayoutConstraint.activate([
greenView.leadingAnchor.constraint(equalTo:margins.leadingAnchor),
greenView.trailingAnchor.constraint(等于:margins.trailingAnchor)
])

现在,除非您仅以iOS 11为目标,否则您将需要使用#available来包装安全区域布局指南约束,并退回到iOS早期版本的顶部和底部布局指南:

 如果#available(iOS 11,*){ 
让指南= view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
greenView.topAnchor.constraintEqualToSystemSpacingBelow(guide.topAnchor,乘数:1.0),
guide.bottomAnchor.constraintEqualToSystemSpacingBelow(greenView.bottomAnchor,乘数:1.0)
])}其他{
let standardSpacing:CGFloat = 8.0
NSLayoutConstraint.activate([
greenView.topAnchor.constraint(等于:topLayoutGuide.bottomAnchor,常量:standardSpacing),
bottomLayoutGuide.topAnchor.constraint(等于:greenView.bottomAnchor,常数:standardSpacing)
])
}

结果:

我希望本文可以帮助您更好地了解XCode中的安全区域。