Creating a custom badge for a UITabBarItem

Question

I have a blue star (UIImage) which I want to add to a UITabBarItem whenever the user receives an in-app message.

Right now, I am using the standard dot:

self.tabs.tabBar.items[0].badgeValue = "1";
self.tabs.tabBar.items[0].badgeColor = UIColor.blueColor;

To my knowledge, it is only possible to customize the badge's number and the badge's color. However, I want to use the UIImage as the badge.

I have heard this is possible to do by subclassing the UITabBarItem class and drawing it myself: How to use a custom UIImage as an UITabBarItem Badge?

However, I am new to objective-c. Does anyone have an example of how I can accomplish this with a subclass?

@zeytin had originally coded this in swift -- and then switched to objective-c. Edited. Thx — Shawn Morrison, Oct 31 '20 at 21:10
Yes you would have to subclass NSTabBarItem with a custom Badge if you want to go far out of the given UI-Design. But there is also `setBadgeTextAttributes:forState:` handling the badges NSAttributedString, which you could style with its attributes. — Ol Sen, Oct 31 '20 at 21:53

score 0 · Accepted Answer · answered Oct 31 '20 at 22:24

Yes you can subclass UITabBarItem to fullfil the style on it's Badge as you want but you can also use the setBadgeTextAttributes:forState: method of UITabBarItem.

this would look something like..

UITabBarItem *item = [[UITabBarItem alloc] initWithTitle:@"Atabbar" image:nil tag:0];
item.badgeValue = @"1";
item.badgeColor = UIColor.redColor;

NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc] init];
style.lineSpacing = 0.00001;
style.lineBreakMode = NSLineBreakByWordWrapping;
style.alignment = NSTextAlignmentLeft;
style.paragraphSpacing = 0.00001;
style.minimumLineHeight = 22.5f;
style.maximumLineHeight = 22.5f;
style.lineHeightMultiple = 1.0;
style.headIndent = 0.0;
style.tailIndent = 0.0;
    
NSDictionary<NSAttributedStringKey,id> *attr = @{
     NSParagraphStyleAttributeName:style,
     NSFontAttributeName:[UIFont fontWithName:@"HelveticaNeue-Thin" size:28.0],
     NSForegroundColorAttributeName:UIColor.grayColor
};
    
[item setBadgeTextAttributes:attr forState:UIControlStateNormal];
[item setBadgeTextAttributes:attr forState:UIControlStateHighlighted];
[item setBadgeTextAttributes:attr forState:UIControlStateDisabled];
[item setBadgeTextAttributes:attr forState:UIControlStateSelected];
item.titlePositionAdjustment = UIOffsetMake(0.0, 0.0);

self.tabs.tabBar.items[0] = item;

beware not all NSAttributedString values make sense, cause i don't know what design you wish to achieve.

The endless possiblities are explained in this apple doc

Note you could make your own OTF-Font, copy into your projects Resources and edit info.plist to make this font available in your app and then use it when setting the NSFontAttributeName. But how to make and handle your own font is a completely different question. It may be still more convenient to go on with UIImage out of your App's Asset to make what you want.

Creating a custom badge for a UITabBarItem

1 Answers1