Swift移除UITabBar底部白色区域问题求助

问题描述 #

编写的TabbarViewController运行后，TabBar底部出现白色区域，尝试清除阴影、设置底部偏移-3像素等方法均无效。

原代码 #

class TabbarViewController: UITabBarController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
   
        tabBar.layer.masksToBounds = true
        tabBar.clipsToBounds = true
        tabBar.layer.borderWidth = 0.6
        tabBar.layer.borderColor = UIColor.tabBarBorderColor
        tabBar.backgroundColor = UIColor.tabBarBackgroundColor

        tabBar.shadowImage = UIImage()
        tabBar.backgroundImage = UIImage()

        let cornerRadius: CGFloat = 30
        tabBar.layer.cornerRadius = cornerRadius
        tabBar.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner] 
        tabBar.layer.shadowColor = UIColor.clear.cgColor
    }
    
    override func viewWillAppear(_ animated: Bool) {
        setupVCs()
        UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.white], for: .selected)
        UITabBar.appearance().barTintColor = UIColor.white
    }
    
}

修复步骤 #

1. 移除全局白色barTintColor设置 #

viewWillAppear中的UITabBar.appearance().barTintColor = UIColor.white是核心问题点，这行代码会全局强制设置TabBar的barTintColor为白色，直接覆盖你自定义的背景色。删除这行代码即可消除全局背景的干扰。

2. 替换空白背景图片为纯色背景 #

原代码中tabBar.backgroundImage = UIImage()设置为空图片时，系统会 fallback 到默认的半透明/白色背景。需要生成与自定义背景色一致的纯色图片替换：

先添加UIImage扩展：

extension UIImage {
    static func solidColor(_ color: UIColor) -> UIImage {
        let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
        UIGraphicsBeginImageContext(rect.size)
        guard let context = UIGraphicsGetCurrentContext() else { return UIImage() }
        context.setFillColor(color.cgColor)
        context.fill(rect)
        let image = UIGraphicsGetImageFromCurrentImageContext() ?? UIImage()
        UIGraphicsEndImageContext()
        return image
    }
}

然后修改viewDidLoad中的背景图片设置：

tabBar.backgroundImage = UIImage.solidColor(UIColor.tabBarBackgroundColor)

3. 调整布局覆盖安全区域（可选） #

如果底部白色区域是安全区域背景导致，在viewDidLoad中添加以下代码，确保TabBar完全覆盖底部安全区域：

extendedLayoutIncludesOpaqueBars = true
edgesForExtendedLayout = [.top, .left, .right]
tabBar.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    tabBar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    tabBar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    tabBar.bottomAnchor.constraint(equalTo: view.bottomAnchor),
    tabBar.heightAnchor.constraint(equalToConstant: 83) // 可根据需求自定义TabBar高度
])

修复后完整代码示例 #

extension UIImage {
    static func solidColor(_ color: UIColor) -> UIImage {
        let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
        UIGraphicsBeginImageContext(rect.size)
        guard let context = UIGraphicsGetCurrentContext() else { return UIImage() }
        context.setFillColor(color.cgColor)
        context.fill(rect)
        let image = UIGraphicsGetImageFromCurrentImageContext() ?? UIImage()
        UIGraphicsEndImageContext()
        return image
    }
}

class TabbarViewController: UITabBarController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
   
        tabBar.layer.masksToBounds = true
        tabBar.clipsToBounds = true
        tabBar.layer.borderWidth = 0.6
        tabBar.layer.borderColor = UIColor.tabBarBorderColor
        tabBar.backgroundColor = UIColor.tabBarBackgroundColor

        tabBar.shadowImage = UIImage()
        tabBar.backgroundImage = UIImage.solidColor(UIColor.tabBarBackgroundColor)

        let cornerRadius: CGFloat = 30
        tabBar.layer.cornerRadius = cornerRadius
        tabBar.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner] 
        tabBar.layer.shadowColor = UIColor.clear.cgColor
        
        // 可选：布局调整
        extendedLayoutIncludesOpaqueBars = true
        edgesForExtendedLayout = [.top, .left, .right]
        tabBar.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            tabBar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            tabBar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            tabBar.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            tabBar.heightAnchor.constraint(equalToConstant: 83)
        ])
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        setupVCs()
        UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.white], for: .selected)
    }
    
}

内容的提问来源于stack exchange，提问作者Arda Emin Çimen