TableView oval button for Index/counts - iphone

Question

Can someone help me create an index/count button for a UITableView, like this one?
iTunes http://img.skitch.com/20091107-nwyci84114dxg76wshqwgtauwn.preview.jpg
Is there an Apple example, or other tutorial? Thanks, Jordan

Answer 1

Wow... aaa... ok... I've got an easier way:
#import <QuartzCore/QuartzCore.h>
.....
UILabel *label = [[UILabel alloc] initWithFrame:
CGRectMake(cell.contentView.frame.size.width - 50, 0, 35, 35)];
label.layer.cornerRadius = 5;
label.backgroundColor = [UIColor blueColor]; //feel free to be creative
label.clipToBounds = YES;
label.text = #"7"; //Your text here
[cell.contentView addSubview: label];
[label release];
Basically, you're making a UILabel with rounded corners using the QuartzCore framework - don't forget to include it. Extra note: it only works on OS > 3.0.

Answer 2

You need to create a custom view, and then draw the oval and number in manually. Finally, assign that custom view as the accessory view of the cell. Here's the drawing code, using Core Graphics. It's not too tricky:
CGRect bounds = self.bounds;
CGContextRef context = UIGraphicsGetCurrentContext();
float radius = bounds.size.height / 2.0;
NSString *countString = [NSString stringWithFormat: #"%d", _count];
if (_count < 100) bounds = CGRectMake(5, 0, bounds.size.width - 10, bounds.size.height);
CGContextClearRect(context, bounds);
CGContextSetFillColorWithColor(context, _color.CGColor);
CGContextBeginPath(context);
CGContextAddArc(context, radius + bounds.origin.x, radius, radius, M_PI / 2 , 3 * M_PI / 2, NO);
CGContextAddArc(context, (bounds.size.width + bounds.origin.x) - 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];