iOS自定义星星评分

一个使用星星评分的控件 (星星的图片在最后面)
StarRatingView.h

#import <UIKit/UIKit.h>

/**
 协议方法
 */
@protocol StarRatingDelegate <NSObject>

- (void)sendGrade:(NSString *)grade;

@end

typedef void(^returnGrade)(NSString *grade);

/**
 star的位置默认为居中显示
 */
@interface StarRatingView : UIView
/// @brief 传递评星分数协议方法
@property(nonatomic, weak)id<StarRatingDelegate>delegate;
/// @brief 是否需要半颗星(默认需要)
@property(nonatomic, assign)BOOL isNeedHalf;
/// @brief 评分图片的宽和高(默认总宽度/5)
@property(nonatomic, assign)CGFloat imageWidth;
/// @brief 评分图片的宽和高(默认与self的高度一样)
@property(nonatomic, assign)CGFloat imageHeight;
/// @brief 图片数量(默认是5)
@property(nonatomic, assign)NSInteger imageCount;
/// @brief block 回调
@property returnGrade returnGrade;
@end

StarRatingView.m


#import "StarRatingView.h"

@implementation StarRatingView

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

- (instancetype)initWithFrame:(CGRect)frame{
    
    self = [super initWithFrame:frame];
    if (self) {
        self.imageWidth = frame.size.width/5;
        self.imageHeight = frame.size.height;
        self.imageCount = 5;
        self.isNeedHalf = YES;
    }
    
    return self;
}


- (void)layoutSubviews{
    
    for (NSInteger i = 0; i < self.imageCount; i++) {
        UIImageView *imageView = [[UIImageView alloc]init];
        imageView.image = [UIImage imageNamed:@"star1"];
        imageView.tag = 1000+i;
        imageView.frame = CGRectMake(self.frame.size.width/2-(self.imageCount/2.0-i)*self.imageWidth, self.frame.size.height/2-self.imageHeight/2, self.imageWidth, self.imageHeight);
        [self addSubview:imageView];
    }
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
    [self getStarGradeForTouches:touches];
} 

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
    if (self.returnGrade) {
        self.returnGrade([NSString stringWithFormat:@"%ld",[self getStarGradeForTouches:touches]]);
    }
}

- (NSInteger)getStarGradeForTouches:(NSSet *)touches{
    //随着手的移动,移动到相应的位置
    //获取触摸对象
    UITouch *touch = [touches anyObject];
    //获取移动之后的坐标变化
    CGPoint newPoint = [touch locationInView:self];
    //计算第一个star的起始位置
    newPoint = CGPointMake(newPoint.x-[self viewWithTag:1000].frame.origin.x, newPoint.y);
    //以star的宽度一半作为单位
    //计算当前滑动位置所在star的位置(+1是因为要从1开始)
    NSInteger temp = newPoint.x / (self.imageWidth/2)+1;
    //已经划过的变为实心star
    for (NSInteger i = 0; i < (temp)/2; i++) {
        UIImageView *image = (UIImageView *)[self viewWithTag:1000+i];
        image.image = [UIImage imageNamed:@"star3"];
    }
    //判断最后停留位置
    if (temp%2 == 1) {
        UIImageView *image = (UIImageView *)[self viewWithTag:1000+temp/2];
        //判断是否是半xstar
        if (!self.isNeedHalf) {
            image.image = [UIImage imageNamed:@"star3"];
        }else{
            image.image = [UIImage imageNamed:@"star2"];
        }
    }
    //将剩下的变为空心star
    for (NSInteger i = (temp+1)/2; i < self.imageCount; i++) {
        UIImageView *image = (UIImageView *)[self viewWithTag:1000+i];
        image.image = [UIImage imageNamed:@"star1"];
    }
    //
    if (temp < 0) {
        temp = 0;
    }else if (temp > self.imageCount*2){
        temp =  self.imageCount*2;
    }
    //不需要半星star时如果点在半星上+1/2结果是一样的(4/2,5/2 都等于2)
    if (!self.isNeedHalf) {
        temp =(temp +1);
        temp /=2;
    }
  
  return temp;
} 
@end

使用方法(默认是5颗星,星星的宽度是控件的5/1,高度与控件一样)

StarRatingView *tempAtar = [[StarRatingView alloc]initWithFrame:CGRectMake(50, 100, 300,44)];
//    tempAtar.backgroundColor = [UIColor blackColor];
//    tempAtar.imageWidth = 48.0;
//    tempAtar.imageHeight = 22;
//    tempAtar.imageCount = 6;
//    tempAtar.isNeedHalf = NO;
//    tempAtar.delegate = self;
//    tempAtar.frame = CGRectMake(100, 100, tempAtar.imageWidth*5,tempAtar.imageHeight);
    [self.view addSubview:tempAtar];
    tempAtar.returnGrade = ^(NSString *grade) {
        NSLog(@"%@",grade);
    };

star1@2x.png

star1@3x.png

star2@2x.png

star2@3x.png

star3@2x.png

star3@3x.png

最后编辑于：2019.07.18 10:32:01