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];

友情链接