ios - 为 iPhone X 处理自定义标签栏

Question

我正在创建一个自定义标签栏。我正在努力将它正确地放置在 View Controller 中，以便它适合 iPhoneX 和带有主页按钮的 iPhone。

当我使用 SafeAreaLayoutGuide 将其锚定在底部时，我得到以下结果:

iPhone X:

带主屏幕按钮的 iPhone:

当我使用 View 的 bottomAnchor 时:

在代码中，我有一个自定义条形 View ，我将其添加为 subview 并添加约束以将其固定在底部:

    let tabView = WoofTabBarView(barItems: barItems)
    tabView.backgroundColor = UIColor.white

    tabView.delegate = self
    tabView.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(tabView)
    NSLayoutConstraint.activate([
        tabView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
        tabView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
        tabView.topAnchor.constraint(equalTo: tabContainerView.bottomAnchor),
        tabView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor),
        tabView.heightAnchor.constraint(equalToConstant: 60.0)
    ])

我可以使用一些 hack 来修复它，比如添加 View 以覆盖底部，或者检查设备版本等。但我希望我的 tabbarview 类足够智能，可以自行处理它依靠 tabbarviewcontroller 来修复它。

为了更好地理解代码，您可以查看 Github 上的 repo: WoofTabBarController

Answer 1

试试下面的代码:

Replace tabView's class to with WoofTabBarView

let parentView = UIView()
parentView.backgroundColor = UIColor.green
parentView.translatesAutoresizingMaskIntoConstraints = false
let tabView = UIView()
parentView.addSubview(tabView)
tabView.backgroundColor = UIColor.red
tabView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(parentView)
NSLayoutConstraint.activate([
    parentView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
    parentView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
    parentView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor), // Add parentView's Bottom Constraint to View's Bottom
    tabView.topAnchor.constraint(equalTo: parentView.topAnchor),
    tabView.heightAnchor.constraint(equalToConstant: 60.0),
    tabView.leadingAnchor.constraint(equalTo: parentView.leadingAnchor),
    tabView.trailingAnchor.constraint(equalTo: parentView.trailingAnchor),
    tabView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor) // Add tabView bottom constraint to Safe Area
])