自定义标签栏底部安全区域

Question

我尝试制作CustomTabbar。然而，安全区并没有像我想象的那样发挥作用。我的 Custom Tabbar 下有 UIKit 自己的 Tabbar，我将其颜色设置为红色以区分它。 UIKit 自己的 Tabbar 延伸到了 safeArea。然而，iPhone SE 机型的情况有所不同。标签栏又回到了它应该在的地方。但是，我的自定义选项卡栏没有进入安全区域。从哪里 ？你能帮我修复约束吗？在 CustomTab 中，我希望它像 UIKit 的选项卡栏（视图层次结构中的红色选项卡栏）一样填充安全区域。

自定义选项卡（XIB）：

TestTabBarController（视图层次结构）：

测试TabBarController：

class TestTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let customTab = CustomTab()

        let aVC = AViewController()
        let bVC = BViewController()
        let cVC = CViewController()
        aVC.title = "Kategoriler"
        bVC.title = "Görseller"
        cVC.title = "Profil"
        self.setViewControllers([aVC, bVC, cVC], animated: true)
        self.tabBar.backgroundColor = UIColor.systemRed
        
        // MARK: - Added Custom Tab
        view.addSubview(customTab) // added CustomTab
        
        customTab.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            customTab.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: 34),
            customTab.heightAnchor.constraint(equalToConstant: 104),
            customTab.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0),
            customTab.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0)
        ])
        
        guard let items = self.tabBar.items else { return }
        let images = ["line.3.horizontal.decrease.circle", "photo.on.rectangle.angled", "person"]
        
        for (index, image) in images.enumerated() {
            items[index].image = UIImage(systemName: image)
        }
    }
}

Answer 1

您使用 safeArea 硬编码底部约束，如果 safeArea 更改，则不安全。正如@Leo在他的评论中所说，将底部约束更改为superView并将约束高度设置为等于系统

tabBar

可以修复：

NSLayoutConstraint.activate([
    custom.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0), //<- here
    custom.heightAnchor.constraint(equalTo: tabBar.heightAnchor), //<- and here
    custom.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0),
    custom.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0)
])