What's a simple/fast way to display half-star ratings in an iphone view

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 would consider having two UIImageViews layered directly on top of each other. The bottom image view would contain a PNG of five 'empty' stars - the top layer a PNG of five 'full' stars. I would resize the width of the top layer depending on the rating to expose the empty starts underneath.

You can determine a suitable width of the top layer with something like the following:

newStarLayerWidth = fullStarLayerWidth * (percentage / 100)

You would need to ensure that the image in the top layer is not resized and is aligned left by setting the views contentMode to UIViewContentModeLeft.

If this is not fast enough I would take the same approach but draw the cell directly as described here - however you may find that this is not necessary.

Answer 2

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.