Individual badge ui on tab bar item

Question

Created Nov ’21

Replies 2

Boosts 0

Views 2.2k

Participants 2

Hi, I am updating our app to use the UITabBarAppearance() to set the standardAppearance and scrollEdgeAppearance for our tab bar, since compiling with Xcode 13 on iOS 15 devices breaks our ui when using the old approach.

However I am running into a problem with setting the badge ui on the tab bar items.

I have two tabs that need to be able to show a badge, and we want the badge ui to be different. One tabs badge should have a black background with white text, and the other tabs badge should have a grey background with black text.

This used to work by just setting the

tabBarItem.badgeColor

and

tabBarItem.setBadgeTextAttributes()

but that no longer works with UITabBarAppearance().

So far I have only found a way to set the badge background and text color generally for all tabs by setting the stackedLayoutAppearance:

private func setupTabBar() {
     let tabBar = UITabBar.appearance()

     let tabBarAppearance = UITabBarAppearance()
     tabBarAppearance.configureWithOpaqueBackground()
     tabBarAppearance.backgroundColor = .white
        
     let tabBarItemAppearance = UITabBarItemAppearance()
     tabBarItemAppearance.normal.badgeTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
     tabBarItemAppearance.normal.badgeBackgroundColor = UIColor.black
     tabBarAppearance.stackedLayoutAppearance = tabBarItemAppearance
        
     tabBar.standardAppearance = tabBarAppearance
     if #available(iOS 15, *) {
         tabBar.scrollEdgeAppearance = tabBarAppearance
     }
 }

So I wanted to ask if it is even still possible to set individual badge colors on the tab bar items?

Boost

Answer 1

KM_AppleDev OP

Nov ’21

Just wanted to chime in and say I'm having the exact same issue (can only set badge styles for every tab at once). It doesn't seem to read the TabBarItem property appearance at all, i.e.viewController.TabBarItem.StandardAppearance = tabBarAppearance; is ignored

0

Answer 2

KM_AppleDev OP

Nov ’21

To clarify the above:

The currently active tab TabBarItem.StandardAppearance is used for ALL tabs (unless not specified, in which case it falls back on the TabBar.StandardAppearance of the main UITabBarController). So when switching between tabs which each have badge styles set, the badge styles of all tabs will change to the currently active tab's badge style.

Therefore with the current functionality it does NOT seem possible to set individual badge styles per tab, as when doing so activating each tab changes the style of the others. This is not consistent with the old way (TabBarItem.BadgeColor/TabBarItem.SetBadgeTextAttributes), which allowed you to set styles for each tab as they don't switch between styles when opening tabs.

0