如何用AutoLayout处理iPhone X刘海？ImageView布局适配求助

嘿，这个问题我太熟悉了！iPhone X及之后的刘海屏确实会给顶部布局带来坑，不过有几个简单靠谱的方法能帮你搞定，让你的ImageView在所有设备上都完美对齐，不会被刘海裁切：

• 优先用Safe Area（安全区域）做约束
  这是苹果官方推荐的适配方式，iOS 11之后引入的Safe Area会自动避开刘海、底部Home条这些系统占用的区域，完美适配所有设备。

  • 如果你用Storyboard/XIB：选中你的ImageView，把原来绑定到「Top Layout Guide」的顶部约束，改成绑定到「Safe Area Top」就行，这样ImageView会自动贴在刘海的下方，非刘海屏设备也会正常贴屏幕顶部。
  • 如果你用代码写Auto Layout：直接用view.safeAreaLayoutGuide.topAnchor来创建顶部约束，示例代码如下：

    // 先确保ImageView开启了自动布局
    imageView.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        imageView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
        imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        // 根据需求添加宽高约束
        imageView.widthAnchor.constraint(equalToConstant: 100),
        imageView.heightAnchor.constraint(equalToConstant: 100)
    ])
    

• 手动获取安全区域间距做布局
  如果需要更灵活的控制（比如要在安全区域基础上再加额外间距），可以通过视图的safeAreaInsets属性获取顶部的安全区域高度，然后动态调整布局。记得要在视图布局完成后获取这个值，比如在viewDidLayoutSubviews里：

  override func viewDidLayoutSubviews() {
      super.viewDidLayoutSubviews()
      let topSafeHeight = view.safeAreaInsets.top
      // 手动调整ImageView的frame
      imageView.frame.origin.y = topSafeHeight
      // 保持水平居中
      imageView.center.x = view.center.x
  }
  

• 别用硬编码的顶部数值
  如果你之前是写死了顶部间距（比如y = 20），那在刘海屏上肯定会被裁切，一定要把固定数值换成基于安全区域的动态值，这样才能保证所有设备的布局一致性。

另外，如果你的项目需要兼容iOS 10及以下系统，可以加个版本判断，兼容旧的topLayoutGuide：

let topAnchor: NSLayoutYAxisAnchor
if #available(iOS 11.0, *) {
    topAnchor = view.safeAreaLayoutGuide.topAnchor
} else {
    topAnchor = topLayoutGuide.bottomAnchor
}

NSLayoutConstraint.activate([
    imageView.topAnchor.constraint(equalTo: topAnchor),
    imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor)
])

这样调整后，你的ImageView就能在所有设备上保持顶部中央的布局，再也不会被刘海裁切啦！

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