自定义底部视图Autolayout布局后iPhoneX底部栏被遮挡的解决方法

嘿，很高兴你已经搞定了图标布局的问题！现在碰到iPhoneX系列设备底部栏被遮挡的情况，这是因为这类全面屏设备带有底部安全区域（Safe Area），咱们的自定义底部视图得适配这个区域才行。下面给你几个实用的解决方案：

方案一：直接将底部视图约束到安全区域底部 #

这是最直接的解决办法，让底部视图的底部对齐父视图的安全区域，而不是父视图本身：

• 代码实现：如果是用代码添加约束，把原来绑定到view.bottomAnchor的约束改成绑定到view.safeAreaLayoutGuide.bottomAnchor。示例代码如下：

  // 原来的错误约束
  // bottomView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
  
  // 修改后的正确约束
  bottomView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
  

• Storyboard/XIB实现：选中你的自定义底部视图，在添加底部约束时，将约束的“Item”选择为「Safe Area」而非「Superview」，这样约束会自动适配设备的安全区域。

方案二：给底部栏内容添加安全区域内边距 #

如果你的底部栏需要全屏宽度（比如背景色铺满底部），但内部图标不能被遮挡，可以给底部栏的内容容器添加内边距，让内容避开安全区域：

if #available(iOS 11.0, *) {
    // 设置底部栏的布局内边距，底部值等于安全区域的底部间距
    bottomView.layoutMargins = UIEdgeInsets(top: 0, left: 0, bottom: view.safeAreaInsets.bottom, right: 0)
    // 让图标容器的底部约束对齐bottomView的layoutMarginsGuide.bottomAnchor
    iconContainer.bottomAnchor.constraint(equalTo: bottomView.layoutMarginsGuide.bottomAnchor).isActive = true
}

这样底部栏背景可以铺满屏幕，而内部图标会自动避开底部的指示器区域。

方案三：兼容iOS 11以下设备的适配方案 #

如果你的App需要支持iOS 11之前的系统，可以手动计算底部安全区域的高度，然后给约束添加对应偏移：

var bottomSafeAreaHeight: CGFloat = 0
if #available(iOS 11.0, *) {
    bottomSafeAreaHeight = view.safeAreaInsets.bottom
}
// 给底部栏的底部约束添加constant值，或者给内容容器设置底部内边距
bottomView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -bottomSafeAreaHeight).isActive = true

核心思路总结 #

本质上就是利用苹果引入的Safe Area Layout Guide，它会自动识别设备的安全区域范围（避开刘海、底部指示器等系统UI），只要把底部栏或者内部内容的约束关联到这个Guide，就能彻底解决全面屏设备的遮挡问题。你之前已经完成了图标的布局，只需要调整底部栏的底部约束逻辑，就能快速修复这个问题啦！

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