iOS 9/10使用Safe Area Layout Guide时顶部空白的解决方法

这个问题我之前做兼容项目时也碰到过，核心原因很明确：Safe Area Layout Guide是iOS 11才正式推出的特性，在iOS 9/10系统中，Xcode会自动把Safe Area的约束映射到旧的Top/Bottom Layout Guide，但这个映射逻辑有时候不会完全匹配我们的预期，尤其是当我们希望主视图完全贴合屏幕顶部时，就会出现莫名的空白。

下面分享几种不需要关闭Safe Area Layout Guide的解决方案，你可以根据项目情况选最合适的：

方案一：Storyboard中添加版本条件约束 #

纯可视化操作，不用写代码，适合界面在Storyboard中搭建的场景：

• 先保留你已经设置好的主视图.top = Safe Area.top约束不变。
• 给主视图新增一个约束：主视图.top = Superview.top（让主视图顶部和父视图顶部完全对齐）。
• 选中这个新约束，在右侧Attributes Inspector里找到Installed选项，点击旁边的+号，选择iOS 9.0 and Later，然后取消默认的iOS 11.0 and Later勾选（简单说就是让这个约束只在iOS 9/10上生效）。
• 确保两个约束的优先级合理：iOS11+用Safe Area约束（优先级保持默认的1000就行），iOS9/10用父视图对齐约束（同样设为1000），因为安装条件已经帮我们做了版本隔离，不会有冲突。

这样设置后，iOS11+会自动使用Safe Area的约束，iOS9/10则会让主视图顶到屏幕顶部，空白自然就消失了。

方案二：代码中动态适配约束 #

如果你的界面是纯代码创建的，或者需要更灵活的布局控制，可以在代码里判断系统版本来调整约束：

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 先确保主视图的translatesAutoresizingMaskIntoConstraints设为false
    view.translatesAutoresizingMaskIntoConstraints = false
    
    if #available(iOS 11.0, *) {
        // iOS11+ 沿用Safe Area约束
        NSLayoutConstraint.activate([
            view.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            // 其他约束...
        ])
    } else {
        // iOS9/10 直接让主视图顶到父视图顶部
        NSLayoutConstraint.activate([
            view.topAnchor.constraint(equalTo: self.view.superview!.topAnchor),
            // 其他约束...
        ])
    }
}

如果是Storyboard创建的约束，你也可以把Safe Area的约束关联到代码中，在iOS9/10时修改它的constant值为负的状态栏高度，来抵消空白。

方案三：手动修正Top Layout Guide映射 #

还有一种思路是利用Xcode的自动映射逻辑，手动调整旧系统下的约束：

• 打开Storyboard，切换到iOS9/10的模拟器预览（顶部设备选择器里选对应系统的设备）。
• 此时你会看到主视图的顶部约束已经被自动映射到了Top Layout Guide上。
• 修改这个约束的constant值为-topLayoutGuide.length，这样就能抵消Top Layout Guide带来的偏移，让主视图顶到屏幕顶部。

不过这个方法要注意，别影响iOS11+的布局，所以最好还是结合版本条件来做约束的启用/禁用。

我个人最推荐方案一，纯可视化操作，不用写额外代码，版本隔离也做得很清晰，能完美解决问题。

内容的提问来源于stack exchange，提问作者Ne AS