如何为选中的TabBarItem图标添加胶囊形状背景（代码实现）

我想要实现一个TabBar，要求选中的TabBarItem仅在其图标周围显示胶囊形状。目前我通过代码创建TabBar，已经完成了部分基础效果，现有代码如下：

class TabBarViewController: UITabBarController {

override func viewDidLoad() {
    super.viewDidLoad()

    //MARK: Initializing tab-bar viewControllers
    let prayerVC = initiateViewController.initiatePrayerVC()
    let alarmVC = initiateViewController.initiateAlarmVC()
    let settingsVC = initiateViewController.initiateSettingsVC()
    
    //MARK: tab bar item text attributes
    let attributes: [NSAttributedString.Key: Any] = [
        .font: UIFont(name: "Roboto-Medium", size: UIFont.systemFont(ofSize: 12).pointSize) as Any
]

    //MARK: edit tab bar appearance & attributes
    UITabBarItem.appearance().setTitleTextAttributes(attributes, for: .normal)
    
    //MARK: adding Title and image for each Tab bar item (viewcontroller)
    prayerVC.tabBarItem.title = text_international.prayer_times
    alarmVC.tabBarItem.title = text_international.alarm
    settingsVC.tabBarItem.title = text_international.settings

    prayerVC.tabBarItem.image = UIImage(named: "IconPrayer")
    alarmVC.tabBarItem.image = UIImage(named: "IconAlarm")
    settingsVC.tabBarItem.image = UIImage(named: "IconSettings")
    
    
    //MARK: adding View Controllers to the tab bar
    self.setViewControllers([prayerVC,alarmVC,settingsVC], animated: false)
    
    
}

请帮助补充代码实现该胶囊形状效果。

你可以通过UITabBarAppearance配置选中项的胶囊样式，以下是具体实现代码：

1. 完整修改后的viewDidLoad方法 #

将原有代码补充为如下内容，直接实现图标周围的胶囊选中效果：

class TabBarViewController: UITabBarController {

override func viewDidLoad() {
    super.viewDidLoad()

    //MARK: Initializing tab-bar viewControllers
    let prayerVC = initiateViewController.initiatePrayerVC()
    let alarmVC = initiateViewController.initiateAlarmVC()
    let settingsVC = initiateViewController.initiateSettingsVC()
    
    //MARK: tab bar item text attributes
    let attributes: [NSAttributedString.Key: Any] = [
        .font: UIFont(name: "Roboto-Medium", size: UIFont.systemFont(ofSize: 12).pointSize) as Any
    ]

    //MARK: edit tab bar appearance & attributes
    UITabBarItem.appearance().setTitleTextAttributes(attributes, for: .normal)
    
    //MARK: adding Title and image for each Tab bar item (viewcontroller)
    prayerVC.tabBarItem.title = text_international.prayer_times
    alarmVC.tabBarItem.title = text_international.alarm
    settingsVC.tabBarItem.title = text_international.settings

    prayerVC.tabBarItem.image = UIImage(named: "IconPrayer")
    alarmVC.tabBarItem.image = UIImage(named: "IconAlarm")
    settingsVC.tabBarItem.image = UIImage(named: "IconSettings")
    
    //MARK: 配置选中项胶囊样式
    let tabBarAppearance = UITabBarAppearance()
    // 隐藏默认选中指示器
    tabBarAppearance.stackedLayoutAppearance.selected.selectedIndicatorImage = nil
    tabBarAppearance.stackedLayoutAppearance.selected.selectedIndicatorTintColor = .clear
    
    // 自定义选中项外观
    let selectedItemAppearance = UITabBarItemAppearance()
    selectedItemAppearance.normal.iconColor = .darkGray // 未选中图标颜色，按需修改
    selectedItemAppearance.selected.iconColor = .white // 选中图标颜色，按需修改
    selectedItemAppearance.selected.backgroundColor = UIColor.systemBlue // 胶囊背景色，按需修改
    selectedItemAppearance.selected.backgroundInsets = UIEdgeInsets(top: 4, left: 12, bottom: 4, right: 12) // 胶囊内边距，适配图标大小
    selectedItemAppearance.selected.cornerRadius = 16 // 胶囊圆角大小，按需修改
    
    tabBarAppearance.stackedLayoutAppearance.selected = selectedItemAppearance
    tabBarAppearance.stackedLayoutAppearance.normal = selectedItemAppearance // 统一未选中项图标颜色
    
    // 应用外观配置
    tabBar.standardAppearance = tabBarAppearance
    if #available(iOS 15.0, *) {
        tabBar.scrollEdgeAppearance = tabBarAppearance
    }
    
    // 可选：隐藏文字（如果不需要显示TabBarItem标题）
    prayerVC.tabBarItem.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: 20)
    alarmVC.tabBarItem.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: 20)
    settingsVC.tabBarItem.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: 20)
    
    //MARK: adding View Controllers to the tab bar
    self.setViewControllers([prayerVC,alarmVC,settingsVC], animated: false)
}
}

2. 关键配置说明 #

• backgroundInsets：控制胶囊的整体大小，根据你的图标尺寸调整上下左右的内边距，确保图标完全包裹在胶囊内
• cornerRadius：设置胶囊的圆角弧度，数值越大胶囊越圆润
• backgroundColor：替换为你需要的胶囊背景色
• 如果需要保留TabBarItem文字，只需删除titlePositionAdjustment的设置即可，胶囊会自动适配图标+文字的布局

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