iOS星星评分两种方式

样式1

星星样式1.png

• 我们要做的就是图片上的5颗星星

1. 根据分数判断我们该添加什么样式的星星

 - (void)setLevel:(CGFloat)level{
 _level = level;
    //1.满星  
    NSInteger fullStarCount = (NSInteger)level;
    for (NSInteger i = 0; i < fullStarCount; i++) {
        //添加满星
        [self makeStarViewWithImageName:@"full_star" startPosition:i];
        
    }
    //2.半星   
    if (level - fullStarCount) {
        
        [self makeStarViewWithImageName:@"half_star" startPosition:fullStarCount];
        //统计星星目前个数(满星+半星)
        fullStarCount ++;
    }
     //3.空星
     for (NSInteger i = fullStarCount; i < kStartCount ; i++) {
        [self makeStarViewWithImageName:@"empty_star"  startPosition:i];
    }
 } 
 

2.根据位置设置设置图片

- (void)makeStarViewWithImageName:(NSString *)imageName startPosition:(NSInteger) position{
    
    //如果重新设置评分,会重新创建imageView 需要判断 若已经存在5个imageView不去创建
    UIImageView *imageView = nil;
    if (self.subviews.count == kStartCount) {
        
        imageView = self.subviews[position];
        imageView.image = [UIImage imageNamed:imageName];
        
        return;
    }
    
    imageView = [[UIImageView alloc]init];
    imageView.image = [UIImage imageNamed:imageName];
    [imageView sizeToFit];
    imageView.frame = CGRectOffset(imageView.bounds, imageView.bounds.size.width * position, 0);
    [self addSubview:imageView];
    
}

3 .如果不判断会出现下面的情况

bug.png

样式2

样式2.gif

• 本想通过循环创建5个imageView 但实现不了预期效果

1.加载xib 偷懒~
loadNibNamed: owner: options:
这个方法加载xib会把xib文件加载入缓存 不建议使用

+ (instancetype)loadStarView{
    UINib *nib = [UINib nibWithNibName:@"XHStarView" bundle:nil];
    XHStarView *starView = [[nib instantiateWithOwner:nil options:nil]lastObject];
    return starView;
}

2 .判断是否添加星星

@implementation XHStarView{
    BOOL _isAddStar;
}

3 . 判断点击的区域 (可以根据具体情况设置)

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self];
    if((point.x > self.starOne.x && point.x < (self.starFive.x + self.starFive.width))&&(point.y > self.starOne.y && point.y< self.height)){
        _isAddStar = YES;
        
    }else{
        _isAddStar = NO;
    }
}

4 .移动的时候添加星星

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    
    if(_isAddStar){
        UITouch *touch = [touches anyObject];
        CGPoint point = [touch locationInView:self];
        [self setStarForegroundViewWithPoint:point];

    }

    return;
}

5 .结束的时候禁止添加星星

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    if(_isAddStar){
        UITouch *touch = [touches anyObject];
        CGPoint point = [touch locationInView:self];
        [self setStarForegroundViewWithPoint:point];
    }
    _isAddStar = NO;
    return;
}

6 . 根据点击的位置x设置图片 并设置满星 1 分 半星0.5 空星0

-(CGFloat)changeImg:(float)x image:(UIImageView*)img{
    if(x > img.x + img.width/2){
        [img setImage:[UIImage imageNamed:@"StarSelected"]];
        return 1;
    }else if(x > img.x){
        [img setImage:[UIImage imageNamed:@"StarSelectHeaf"]];
        return 0.5;
    }else{
        [img setImage:[UIImage imageNamed:@"StarUnSelect"]];
        return 0;
    }
}

7 . 得出分数

-(void)setStarForegroundViewWithPoint:(CGPoint)point{

    self.score = 0;
    self.score = self.score + [self changeImg:point.x image:self.starOne];
    self.score = self.score + [self changeImg:point.x image:self.starTwo];
    self.score = self.score + [self changeImg:point.x image:self.starThree];
    self.score = self.score + [self changeImg:point.x image:self.starFour];
    self.score = self.score + [self changeImg:point.x image:self.starFive];
    
    //评论最少半星
    if(self.score == 0){
        self.score = 0.5;
        [self.starOne setImage:[UIImage imageNamed:@"StarSelectHeaf"]];
    }
    NSLog(@"分数 %f",self.score);
}

把得出的分数传给第一个demo就行了

代码链接

还有不足欢迎指教交流