duyojiぶろぐ

技術系ときどき日常系

AppStoreのような5つ星のレートViewを作る

ソースコード

StarRateView.h

#import <UIKit/UIKit.h>
@interface StarRateView : UIView
-(void)setRate:(float)rateValue;
@end


StarRateView.m

#import "StarRateView.h"

#define PADDING 3

@implementation StarRateView

static UIImage *starFull;
static UIImage *starHalf;
static UIImage *starEmpty;



- (id)init
{
    self = [super init];
    if (self) {
        // Initialization code
        if (!starFull) 
            starFull = [UIImage imageNamed:@"star_full.png"];
        
        if (!starHalf) 
            starHalf = [UIImage imageNamed:@"star_harf.png"];
        
        if (!starEmpty) 
            starEmpty = [UIImage imageNamed:@"star_empty.png"];                        
        
        self.frame = CGRectMake(0, 0, starFull.size.width*5+PADDING*4, starFull.size.height);
        
    }
    return self;
}


- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        if (!starFull) 
            starFull = [UIImage imageNamed:@"star_full.png"];
        
        if (!starHalf) 
            starHalf = [UIImage imageNamed:@"star_harf.png"];
        
        if (!starEmpty) 
            starEmpty = [UIImage imageNamed:@"star_empty.png"];                        
    }
    return self;
}


-(void)setRate:(float)rateValue{        
    for (UIView *imageView in self.subviews) {
        [imageView removeFromSuperview];
    }
    
    for (int i = 0; i < 5; i++) {
        UIImageView *starView;
        if (i < rateValue){
            if (0 < rateValue-i && rateValue-i < 1) 
                starView = [[UIImageView alloc] initWithImage:starHalf];
            else 
                starView = [[UIImageView alloc] initWithImage:starFull];            
        }else 
            starView = [[UIImageView alloc] initWithImage:starEmpty];
        
        
        starView.frame = CGRectMake((starView.image.size.width+PADDING)*i, 
                                    0, 
                                    starView.image.size.width, 
                                    starView.image.size.height);
        
        [self addSubview:starView];        
    }
}

@end

使い方

使いたいViewでStarRateViewのインスタンスをつくり、
インスタンスメソッドのsetRateでfloat型でレートをセットする。
addSubViewをしてViewに表示する。

starView = [[StarRateView alloc] init];
[starView setRate:0.0];
[popScrollView addSubview:starView];

StarRateView.m内で3種類の画象を用いている。
AppStoreのように「星全部」「星半分」「空(から)の星」の三つの
画象を用意しているが、ここは各自で用意する。
星に限らずハートの形でもただの丸い画像でも3種類用意すれば良い。