子类化UITabBarController后UITabBarItems不显示，渐变与图标共存方案咨询

你碰到的这个问题太常见了——给UITabBar加渐变后Item看不到但功能正常，本质是你添加的渐变层默认盖在了TabBar的内容视图（也就是承载TabBarItem的那层）上面，把图标和文字都挡住了。下面给你两种靠谱的解决思路：

方法一：把渐变层插入到TabBar层的最底部 #

直接调整渐变层的层级，让它在所有内容层的下面，这样既保留渐变背景，又不会遮挡Item。代码示例：

// 在你的TabBarController或相关ViewController里
override func viewDidLoad() {
    super.viewDidLoad()
    
    let gradientLayer = CAGradientLayer()
    // 替换成你需要的渐变颜色
    gradientLayer.colors = [UIColor.systemBlue.cgColor, UIColor.systemPurple.cgColor]
    gradientLayer.startPoint = CGPoint(x: 0, y: 0)
    gradientLayer.endPoint = CGPoint(x: 1, y: 0)
    gradientLayer.frame = tabBar.bounds
    
    // 关键操作：把渐变层插入到tabBar层的最底层
    tabBar.layer.insertSublayer(gradientLayer, at: 0)
}

⚠️ 注意：如果你的App支持屏幕旋转，记得在viewDidLayoutSubviews里更新渐变层的frame，不然旋转后渐变会错位：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    tabBar.layer.sublayers?.forEach { layer in
        if layer is CAGradientLayer {
            layer.frame = tabBar.bounds
        }
    }
}

方法二：用渐变图片作为TabBar的背景图 #

这种方法更稳妥，因为UITabBar的backgroundImage属性本来就是用来设置背景的，不会干扰内容层。先写一个生成渐变图片的工具方法，再赋值给TabBar：

// 生成渐变图片的工具函数
private func generateGradientImage(with bounds: CGRect, colors: [UIColor]) -> UIImage? {
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = bounds
    gradientLayer.colors = colors.map { $0.cgColor }
    gradientLayer.startPoint = CGPoint(x: 0, y: 0)
    gradientLayer.endPoint = CGPoint(x: 1, y: 0)
    
    UIGraphicsBeginImageContextWithOptions(gradientLayer.bounds.size, false, UIScreen.main.scale)
    guard let context = UIGraphicsGetCurrentContext() else { return nil }
    gradientLayer.render(in: context)
    let gradientImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    
    return gradientImage
}

// 在viewDidLoad里使用
override func viewDidLoad() {
    super.viewDidLoad()
    
    if let gradientImage = generateGradientImage(with: tabBar.bounds, colors: [.systemBlue, .systemPurple]) {
        tabBar.backgroundImage = gradientImage
        // 如果不需要TabBar默认的底部阴影，可以设置为空
        tabBar.shadowImage = UIImage()
    }
}

额外排查点 #

如果你是在Interface Builder里做的自定义，记得检查：

• 有没有不小心把TabBar的alpha值设成了小于1的数值
• 有没有给TabBar添加了其他覆盖性的子视图

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