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-tjr9yupbhgr3sqfh7u56if4rsn.preview.jpg

Are there any standards way (or even an API) do this?

UPDATE: I have created a class called BlueBadge to do this. It is available at http://github.com/leonho/iphone-libs/tree/master

Answer 1

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 2

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 3

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.