Are there any standard way to implement the “blue badge” in iPhone?

Question

A lot of iPhone apps use a blue badge to indicate the number of items in the subviews, such as the Mail client:

iPhoto http://img.skitch.com/20081103-tjr9yupbhgr3sqf

Answer 1

There are a few methods in the NSBezierPath class called "appendBezierPathWithRoundedRect....".

I havent tried them out myself, but they might work. It's worth a try.

Answer 2

You can do it easily and flexibly by using a simple UILabel and changing the cornerRadius of its underlaying layer:

#import <QuartzCore/QuartzCore.h> // don't forget!
// ...
UILabel *badge = [[UILabel alloc] init];
badge.layer.backgroundColor = [UIColor blueColor].CGColor;
badge.layer.cornerRadius = badge.bounds.size.height / 2;

You can use my (small and simple) code for a BadgeLabel class and a matching BadgeTableViewCell class.

Answer 3

To my knowledge there's no API for this. However, using CoreGraphics (NSBezierPath is not available on iPhone), you can do it pretty easily. It's just two arcs in a CGPath and some text:

CGContextRef        context = UIGraphicsGetCurrentContext();
float               radius = bounds.size.height / 2.0;
NSString            *countString = [NSString stringWithFormat: @"%d", count];

CGContextClearRect(context, bounds);

CGContextSetFillColorWithColor(context, ovalColor);
CGContextBeginPath(context);
CGContextAddArc(context, radius, radius, radius, M_PI / 2 , 3 * M_PI / 2, NO);
CGContextAddArc(context, bounds.size.width - radius, radius, radius, 3 * M_PI / 2, M_PI / 2, NO);
CGContextClosePath(context);
CGContextFillPath(context);

[[UIColor whiteColor] set];

UIFont              *font = [UIFont boldSystemFontOfSize: 14];
CGSize              numberSize = [countString sizeWithFont: font];

bounds.origin.x = (bounds.size.width - numberSize.width) / 2;

[countString drawInRect: bounds withFont: font];

Answer 4

I think a better way to implement something very close to the UITabBarItem badge is to use the UIImage stretchableImageWithLeftCapWidth:topCapHeight: method where both end caps could be a fancier image and the middle will be strech automatically (using the 1px wide image) to fit the NSString size that would be overlaid on top.

Still need to get the proper images but that could be easily pulled from a screenshot or constructed from PS.

Answer 5

There is also another type of badge that you might already know, it's the "red" one that is on the application icon. They are created by doing something like:

NSDate *now = [NSDate dateWithTimeIntervalSinceNow:0];
NSString *caldate = [[now 
        dateWithCalendarFormat:@"%b" 
        timeZone:nil] description];
[self setApplicationBadge:caldate];"

this will set the badge with a 3 letter abbreviation for the current month.