iOS 18中UITabBar单个Item角标颜色自定义方案求助

在iOS 17及Xcode 15中，我们可以直接通过UITabBarItem的badgeColor和setBadgeTextAttributes(_:for:)方法单独设置某个tab的角标颜色，但这套API在iOS 18/Xcode 16中已失效。全局配置UITabBarAppearance只能统一修改所有tab的角标样式，无法实现单个item的定制需求，以下是两种可行的解决方案：

方案一：利用系统UITabBarAppearance的itemAppearance数组单独配置 #

通过UITabBarAppearance的布局样式（stacked/inline/compactInline）下的itemAppearance数组，可以为指定索引的tabItem设置独立的外观配置，完全基于系统API实现，兼容性更好。

代码示例 #

func setupIndividualTabBadgeStyle() {
    guard let tabBar = tabBarController?.tabBar else { return }
    
    // 复制全局外观配置，避免修改原有的全局样式
    let customizedAppearance = tabBar.standardAppearance.copy()
    
    // 为索引为1的TabItem创建专属外观（可根据需求修改索引）
    let individualItemAppearance = UITabBarItemAppearance(style: .default)
    
    // 配置未选中状态的角标
    individualItemAppearance.normal.badgeBackgroundColor = .systemOrange
    individualItemAppearance.normal.badgeTextAttributes = [
        NSAttributedString.Key.foregroundColor: UIColor.white,
        NSAttributedString.Key.font: UIFont.systemFont(ofSize: 12, weight: .semibold)
    ]
    
    // 配置选中状态的角标（可选）
    individualItemAppearance.selected.badgeBackgroundColor = .systemPurple
    individualItemAppearance.selected.badgeTextAttributes = [
        NSAttributedString.Key.foregroundColor: UIColor.white
    ]
    
    // 将专属外观赋值给对应索引的item
    customizedAppearance.stackedLayoutAppearance.itemAppearance[1] = individualItemAppearance
    
    // 应用修改后的外观，同时适配滚动边缘的情况
    tabBar.standardAppearance = customizedAppearance
    tabBar.scrollEdgeAppearance = customizedAppearance
}

注意事项 #

• 如果你的tabBar使用的是inline或compactInline布局，需要对应修改customizedAppearance.inlineLayoutAppearance.itemAppearance或customizedAppearance.compactInlineLayoutAppearance.itemAppearance数组
• 确保索引值在tabBar.items?.count的范围内，避免数组越界

方案二：自定义Badge视图直接添加到TabBar #

如果系统API的定制能力无法满足需求（比如需要特殊形状、动画的角标），可以直接创建自定义视图，手动定位到目标tab的位置，完全不受系统API限制。

代码示例 #

func addCustomBadge(toTabIndex index: Int, badgeText: String) {
    guard let tabBar = tabBarController?.tabBar,
          let tabCount = tabBar.items?.count, index < tabCount else { return }
    
    // 先移除该tab已存在的自定义角标，避免重复添加
    tabBar.subviews.filter { $0.tag == 1000 + index }.forEach { $0.removeFromSuperview() }
    
    // 创建自定义角标视图
    let badgeView = UILabel()
    badgeView.text = badgeText
    badgeView.font = UIFont.systemFont(ofSize: 11, weight: .bold)
    badgeView.textColor = .white
    badgeView.backgroundColor = .systemRed
    badgeView.textAlignment = .center
    badgeView.layer.cornerRadius = 9
    badgeView.clipsToBounds = true
    badgeView.tag = 1000 + index // 标记tab索引，方便后续管理
    
    tabBar.addSubview(badgeView)
    
    // 自动布局定位到目标tab的右上角
    badgeView.translatesAutoresizingMaskIntoConstraints = false
    // tabBar的子视图中，索引0是背景视图，1及以后是tabItem的容器视图
    let tabContainerView = tabBar.subviews[index + 1]
    NSLayoutConstraint.activate([
        badgeView.trailingAnchor.constraint(equalTo: tabContainerView.trailingAnchor, constant: -4),
        badgeView.topAnchor.constraint(equalTo: tabContainerView.topAnchor, constant: 4),
        badgeView.widthAnchor.constraint(greaterThanOrEqualToConstant: 18),
        badgeView.heightAnchor.constraint(equalToConstant: 18)
    ])
}

// 在视图布局更新时重新调整角标位置（比如屏幕旋转）
override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    // 重新添加角标，自动更新位置
    addCustomBadge(toTabIndex: 1, badgeText: "3")
}

注意事项 #

• tabBar的子视图索引可能因系统版本或自定义tabBar有所变化，建议通过打印tabBar.subviews确认目标tab的容器视图索引
• 自定义角标需要自己处理显示/隐藏逻辑，比如当badgeText为空时移除视图

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