19

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

leonho
  • 3,563
  • 2
  • 21
  • 16

5 Answers5

22

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];
Ben Gottlieb
  • 85,404
  • 22
  • 176
  • 172
3

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.

kleinman
  • 39
  • 3
1

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.

Yonat
  • 4,382
  • 2
  • 28
  • 37
0

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.

Kristian
  • 733
  • 1
  • 6
  • 11
-7

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.

Kristian
  • 733
  • 1
  • 6
  • 11