tabBarItem use setBadgeTextAttributes only change color but not font

Question

I want to change the badge text color and font of my tab bar item using setBadgeTextAttributes in my tabBarViewController. So I use my code:

for (UITabBarItem *tabBarItem in self.tabBar.items){
        [tabBarItem setBadgeColor:[UIColor redColor];
        [tabBarItem setBadgeTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                        [UIFont fontWithName:@"Helvetica-Bold" size:26.0], NSFontAttributeName,
                                        [UIColor greenColor], NSForegroundColorAttributeName,
                                        nil] forState:UIControlStateNormal];
}

But it only change the badge text color, but not the font. How can I fix it?

Please and thanks~

What is the state of the tab bar item? Did you try to set it for the other states? — Amin Negm-Awad, Jan 19 '17 at 04:50
The state is normal. And the color attribute works in normal state, but not font. — star chen, Jan 20 '17 at 02:35

score 3 · Answer 1 · answered Jul 03 '18 at 10:20

3

let attribute : [String : Any] = [NSAttributedStringKey.foregroundColor.rawValue : UIColor.black]
self.tabBarController?.tabBar.items?[tabBarIndex].setBadgeTextAttributes(attribute, for: .normal)

This is how I did it

Use the rawValue

answered Jul 03 '18 at 10:20

Kelvin Fok

621
7
9

score 0 · Accepted Answer · answered Jun 21 '17 at 12:50

Try put your code inside viewDidAppear like this:

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    if let notificationItem = self.tabBar.items?.last {
        notificationItem.badgeValue = "\(12)"

        if #available(iOS 10.0, *) {
            notificationItem.badgeColor = .red
            notificationItem.setBadgeTextAttributes([
                NSForegroundColorAttributeName: UIColor.green,
                NSFontAttributeName: UIFont(name: "Helvetica-Bold", size: 10)!
                ], for: .normal)
        }
    }
}

Dear Buxik thanks, this works fine for changing badge font color, but it doesn't change font. is there anyway to change the font? — Niloufar, Jan 20 '19 at 08:55

score 0 · Answer 3 · answered Mar 06 '19 at 06:50

On iOS 12, it seems setting the font using setBadgeTextAttributes does not work. Here is a solution based on this answer:

extension UITabBar {
        func setBadge(value: String?, at index: Int, withConfiguration configuration: TabBarBadgeConfiguration = TabBarBadgeConfiguration()) {
            let existingBadge = subviews.first { ($0 as? TabBarBadge)?.hasIdentifier(for: index) == true }
            existingBadge?.removeFromSuperview()

            guard let tabBarItems = items,
                let value = value else { return }

            let itemPosition = CGFloat(index + 1)
            let itemWidth = frame.width / CGFloat(tabBarItems.count)
            let itemHeight = frame.height

            let badge = TabBarBadge(for: index)
            badge.frame.size = configuration.size
            badge.center = CGPoint(x: (itemWidth * itemPosition) - (0.5 * itemWidth) + configuration.centerOffset.x,
                                   y: (0.5 * itemHeight) + configuration.centerOffset.y)
            badge.layer.cornerRadius = 0.5 * configuration.size.height
            badge.clipsToBounds = true
            badge.textAlignment = .center
            badge.backgroundColor = configuration.backgroundColor
            badge.font = configuration.font
            badge.textColor = configuration.textColor
            badge.text = value

            addSubview(badge)
        }
    }

    class TabBarBadge: UILabel {
        var identifier: String = String(describing: TabBarBadge.self)

        private func identifier(for index: Int) -> String {
            return "\(String(describing: TabBarBadge.self))-\(index)"
        }

        convenience init(for index: Int) {
            self.init()
            identifier = identifier(for: index)
        }

        func hasIdentifier(for index: Int) -> Bool {
            let has = identifier == identifier(for: index)
            return has
        }
    }

    class TabBarBadgeConfiguration {
        var backgroundColor: UIColor = .red
        var centerOffset: CGPoint = .init(x: 12, y: -9)
        var size: CGSize = .init(width: 17, height: 17)
        var textColor: UIColor = .white
        var font: UIFont! = .systemFont(ofSize: 11) {
            didSet { font = font ?? .systemFont(ofSize: 11) }
        }

        static func construct(_ block: (TabBarBadgeConfiguration) -> Void) -> TabBarBadgeConfiguration {
            let new = TabBarBadgeConfiguration()
            block(new)
            return new
        }
    }

This will only work in horizontally compact device. iPad OS or landscape orientation in iOS have different item spacing and it seems there's no way to figure how big that is unless I use private APIs. — Ryan, Jun 15 '20 at 16:40

tabBarItem use setBadgeTextAttributes only change color but not font

3 Answers3