Question

I have a (float) rating value as a percentage from 0..100 (where 50 = Just OK, 0 = terrible and 100=best).

What’s a simple way to display this as a 5 star rating on the iphone, with the following requirements:

• simple (ideally just using drawing operations based on a png of a single star or five of them, and without needing to resort to photoshop.)
• reasonably fast (this is part of a cell in a table view)
• includes half stars (or more fine grained)
• displays something reasonable for a rating of 0 (or close to 0)

(This is display only so I don’t need it to respond to touch events, though that would be nice – currently I’m just using a slider to capture the rating in the first place)

Answer 1

I’ve come up with a simple way to do this without using any PNGs at all. I’ve subclassed a UIView and then in the drawRect I’ve done this:

- (void)drawRect:(CGRect)rect {
    // Drawing code
    CGContextRef context = UIGraphicsGetCurrentContext();
    [textColor set];
    NSString* stars=@"★★★★★";
    rect=self.bounds;
    UIFont *font = [UIFont boldSystemFontOfSize: 16];
    CGSize starSize = [stars sizeWithFont: font];
    rect.size=starSize;
    [@"☆☆☆☆☆" drawInRect:rect withFont: font];
    CGRect clip=rect;
    clip.size.width=clip.size.width*rating/100;
    CGContextClipToRect(context,clip);
    [stars drawInRect:rect withFont:font];
}

(those strings are 5 empty and 5 full stars, in case they are only displaying on my mac. I just entered them within IB using the ‘special characters’ menu)

I’ve added a textColor (UIColor*) and rating (int) property, so that is where those are coming from.

To add the view within IB, I just change the class type to the name of my UIView subclass. Then I can add the view to any container within IB.