UIView Tutorial for iOS: How To Make a Custom UIView in iOS 5: A 5 Star Rating View

Touch Detection

Finally the fun stuff: touch detection! Add this to the bottom of your file:

- (void)handleTouchAtLocation:(CGPoint)touchLocation {
    if (!self.editable) return;
    
    int newRating = 0;
    for(int i = self.imageViews.count - 1; i >= 0; i--) {
        UIImageView *imageView = [self.imageViews objectAtIndex:i];        
        if (touchLocation.x > imageView.frame.origin.x) {
            newRating = i+1;
            break;
        }
    }
    
    self.rating = newRating;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint touchLocation = [touch locationInView:self];
    [self handleTouchAtLocation:touchLocation];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint touchLocation = [touch locationInView:self];
    [self handleTouchAtLocation:touchLocation];
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    [self.delegate rateView:self ratingDidChange:self.rating];
}

Our main code is in handleTouchAtLocation, the rest of the methods either call this or notify our delegate that something has changed.

In handleTouchAtLocation, we simply loop through our subviews (backwards) and compare the x coordinate to that of our subviews. If the x coordinate is greater than the current subview, we know the rating is the index of the subview+1.

Note this doesn't support "half-star" ratings but could easily be modified to do so.

Using the 5 Star Rating View

Now finally time to try this out! Open MainStoryboard.storyboard and go to Editor\Canvas\Show Bounds Rectangles (this will make it easier to see what we're doing).

Then drag a UIView and a UILabel from the Object Library into the view controller, and resize them to look like the following:

Then click on the UIView you added and go to the Identity Inspector. Set the class to RateView:

Now let's connect these to outlets. Bring up the Assistant editor, and make sure that ViewController.h is visible. Control-drag from the UIView down between the @interface and @end lines, and connect it to an Outlet named rateView.

Repeat this for the label, but connect it to an outlet called statusLabel.

We want to make the View Controller implement the RateViewDelegate protocol, so also import the RateViewHeader and mark it as doing so. At this point ViewController.h should look like the following:

#import <UIKit/UIKit.h>
#import "RateView.h"

@interface ViewController : UIViewController <RateViewDelegate>

@property (weak, nonatomic) IBOutlet RateView *rateView;
@property (weak, nonatomic) IBOutlet UILabel *statusLabel;

@end

Next switch to ViewController.m and make the following changes:

// Replace viewDidLoad with the following:
- (void)viewDidLoad
{
    [super viewDidLoad];
    self.rateView.notSelectedImage = [UIImage imageNamed:@"kermit_empty.png"];
    self.rateView.halfSelectedImage = [UIImage imageNamed:@"kermit_half.png"];
    self.rateView.fullSelectedImage = [UIImage imageNamed:@"kermit_full.png"];
    self.rateView.rating = 0;
    self.rateView.editable = YES;
    self.rateView.maxRating = 5;
    self.rateView.delegate = self;
}

// Add to bottom
- (void)rateView:(RateView *)rateView ratingDidChange:(float)rating {
    self.statusLabel.text = [NSString stringWithFormat:@"Rating: %f", rating];
}

What about the star images, you might ask? Well feel free to snag a copy of these kermit stars made by my lovely wife, or use your own!

Once you have the images, add them to your project, compile and run, and if all works well you should be able to happily rate away!

Where To Go From Here?

Here is a sample project with all of the code from the above UIView tutorial.

Note that you can also set the other options on the view like dynamically setting the rating or making it editable or not. And feel free to customize it for your own needs as well!

What I didn't cover was custom drawing inside the drawRect for the UIView - a very common case as well. Perhaps I'll cover that in a future UIView tutorial!

Let me know how you've been using custom UIViews in your apps!