ios - 处理 iPhoneX 的自定义标签栏

Question

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

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

iPhone X：

带主页按钮的 iPhone：

当我使用bottomAnchor视图时：

在代码中，我有一个自定义栏视图，我将其添加为子视图并添加约束以将其固定在底部：

    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)
    ])

我可以使用一些技巧来修复它，比如添加视图以覆盖底部，或检查设备版本等，但我希望我tabbarview的班级足够聪明，可以自行处理它，而不是依赖于tabbarviewcontroller修复它。

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

标签： iosswiftautolayoutiphone-x

Answer 1

试试下面的代码：

将 tabView 的类替换为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
])