简单实现点触/输入值给五颗星评价

先上效果图

gif.gif

1.码UI。。。

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 30)];
    label.text = @"点击星星可以自动获取评分哦～";
    label.textColor = [UIColor whiteColor];
    label.textAlignment = NSTextAlignmentCenter;
    [self.view addSubview:label];
    label.center = CGPointMake(kScreenWidth / 2, 60);
    
    self.colorStars = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"StarsForeground"]];
    self.blankStars = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"StarsBackground"]];
    // 宽高根据Image实际大小，如果放到了2倍图记得➗2
    self.colorStars.frame = CGRectMake((kScreenWidth - 65) / 2, 100, 65, 23);
    self.blankStars.frame = CGRectMake((kScreenWidth - 65) / 2, 100, 65, 23);
    // 顺序不能错
    [self.view addSubview:self.blankStars];
    [self.view addSubview:self.colorStars];
    // 关键
    self.colorStars.clipsToBounds = YES;
    self.colorStars.contentMode = UIViewContentModeLeft | UIViewContentModeTop;
    
    self.tf = [[UITextField alloc] initWithFrame:CGRectMake((kScreenWidth - 300) / 2, 250, 300, 30)];
    self.tf.borderStyle = UITextBorderStyleRoundedRect;
    self.tf.backgroundColor = [UIColor lightGrayColor];
    self.tf.textColor = [UIColor blueColor];
    self.tf.backgroundColor = [UIColor whiteColor];
    self.tf.placeholder = @"请输入1.0-5.0的评分等级";
    self.tf.keyboardType = UIKeyboardTypeDecimalPad;
    self.tf.textAlignment = NSTextAlignmentCenter;
    [self.view addSubview:self.tf];
    
    UIButton *Stars = [UIButton buttonWithType:UIButtonTypeCustom];
    [Stars setTitle:@"评星" forState:UIControlStateNormal];
    [Stars setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
    Stars.frame = CGRectMake((kScreenWidth - 50) / 2, 350, 50, 30);
    [Stars addTarget:self action:@selector(starsBtnClick) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:Stars];

2.评星按钮的回调事件

- (void)starsBtnClick {
    if ([self.tf.text floatValue] <= 0) {
        NSLog(@"请输入评分");
        [self alertMSG:@"请输入评分"];
    } else if ([self.tf.text floatValue] > 5) {
        NSLog(@"请按规则输入评分");
        [self alertMSG:@"请按规则输入评分"];
    } else {
        CGFloat value = self.tf.text.floatValue;
        CGFloat width = value/5.0*65;
        CGPoint orgin = self.colorStars.frame.origin;
        CGFloat height = self.colorStars.frame.size.height;
        [UIView animateWithDuration:0.23 animations:^{
            self.colorStars.frame = CGRectMake(orgin.x, orgin.y, width, height);
        }];
    }
}

3.点触评星的实现

// 点触评分的关键
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [super touchesEnded:touches withEvent:event];
    
    UITouch *touche = [touches anyObject];
    CGPoint touchPoint = [touche locationInView:self.blankStars];
    NSLog(@"%@", NSStringFromCGPoint(touchPoint));
    // 如果点触在图片外，就不进行操作
    if (touchPoint.x >= 0 && touchPoint.y >= 0 && touchPoint.x < self.blankStars.frame.size.width + 10 && touchPoint.y <= self.blankStars.frame.size.height) {
        CGPoint orgin = self.colorStars.frame.origin;
        CGFloat height = self.colorStars.frame.size.height;
        CGFloat touchX = touchPoint.x;
        if (touchPoint.x > self.blankStars.frame.size.width) {
            touchX = self.blankStars.frame.size.width;
        }
        [UIView animateWithDuration:0.23 animations:^{
            self.colorStars.frame = CGRectMake(orgin.x, orgin.y, touchX, height);
        } completion:^(BOOL finished) {
            self.tf.text = [NSString stringWithFormat:@"%.2lf", touchX / self.blankStars.frame.size.width * 5];
        }];
    }
    
    [self.view endEditing:YES];
}

Demo地址：https://github.com/ChengLuffy/StarsForEvaluation.git