When I worked on the latest update of my iOS app Veggie in China, I needed a way to enable my users to rate restaurants. I wanted to have a rating view which displays five stars, and that user can tap on any of the stars to rate.

I googled a bit and found this tutorial written by Ray Wenderlich. It worked great. However, there were a few things that I really needed missing from that tutorial:

• I need the rating view to display decimals. For example, it needs to display not only 5 but also 4.3, 2.7, etc.
• I need the rating view to align in more than one way. In one screen of my app, I want it to align to the right, while in another screen, I want it to align in the center.
• I need the rating view to display in two sizes: A smaller size to show readonly data, and a bigger size for users to tap (it’s quite difficult for user to tap within a small area to rate).
• I want user to tap any of the empty space to the left of the rating view to set it to zero, and tap any of the empty space to the right of the rating view to set it to five. This is how the rating view in Apple’s App Store app works, and I think it’s a handy feature that makes a lot of sense.

Based on these ideas, and since imitation is the greatest form of flattery (thanks Ray!), I decided to create my own one. So DYRateView was born. :)

This is how it’s used in Veggie in China:

Usage

It’s very simple to use DYRateView in your project. All you need to do is to download the source code from Github, and add the following two files to your project:

• DYRateView.h
• DYRateView.m

I’ve also made a few images myself for the stars. You are welcome to use them if you don’t want to create your own ones. Just drag them from the Resources folder into your project and make sure the files are copied over.

When you are done adding DYRateView to your project, you can start using it. The following shows an example:

DYRateView *rateView = [[[DYRateView alloc] initWithFrame:CGRectMake(x, y, 100, 14)] autorelease];
rateView.rate = 4.7;
rateView.alignment = RateViewAlignmentRight;
[self.view addSubview:rateView];

You can make it editable:

rateView.editable = YES;

and then hook it up to a delegate in order to receive updated rate whenever user makes a change:

rateView.delegate = self;
// ….

#pragma mark - DYRateViewDelegate

- (void)changedToNewRate:(NSNumber *)rate {
    self.rateLabel.text = [NSString stringWithFormat:@"Rate: %d", rate.intValue];
}

I’ve added a sample project in Github to demonstrate its usage:

Feedback

That’s it. I’ll be more than happy if you find DYRateView useful. Feel free to let me know any code related issues on Github or in the comments below.

Enjoy!