在上一篇文章中，我們講了通過重繪的方式來創建星星評分。但是通過這種方法創建的星星個數是“死的”，用戶不能通過點擊來改變星星的個數。 那么今天我們就來詳細講一講，如何動態改變星星的個數。

starView.gif

首先我們創建一個基于UIView的類，就叫YYStarView吧。在YYStarView.h文件中我們寫下如下代碼：

#import <UIKit/UIKit.h>
@class YYStarView;
@protocol YYStarViewDelegate <NSObject>
@optional
// 星星百分比（得分值）發生變化的代理
- (void)starView:(YYStarView *)starView scorePercentDidChange:(CGFloat)newScorePercent;
@end

@interface YYStarView : UIView

@property (nonatomic, assign) CGFloat scorePercent;//得分值，范圍為0~1，默認1
@property (nonatomic, assign) BOOL hasAnimation;//是否允許動畫，默認為NO
@property (nonatomic, assign) BOOL allowIncompleteStar;//評分時是否允許不是整星，默認為NO

@property (nonatomic, weak) id<YYStarViewDelegate>delegate;
- (instancetype)initWithFrame:(CGRect)frame numberOfStars:(NSInteger)numberOfStars;
@end

在YYStarView.m文件中我們寫下如下代碼：

#import "YYStarView.h"
#define STAR_FRONT_NAME @"star_yellow" //點亮星星圖片
#define STAR_BACK_NAME @"star_gray" // 未點亮星星圖片
#define DEFALUT_STAR_NUMBER 5 // 默認星星個數
#define ANIMATION_TIME_INTERVAL 0.2 // 動畫延時

@interface YYStarView ()

// 前景視圖
@property (nonatomic, strong) UIView *foregroundStarView;
// 背景視圖
@property (nonatomic, strong) UIView *backgroundStarView;
// 星星個數
@property (nonatomic, assign) NSInteger numberOfStars;

@end

@implementation YYStarView

- (instancetype)initWithFrame:(CGRect)frame {
    // 初始化，這里我設置星星個數為5
    return [self initWithFrame:frame numberOfStars:DEFALUT_STAR_NUMBER];
}

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
    
    if (self = [super initWithCoder:aDecoder]) {
        _numberOfStars = DEFALUT_STAR_NUMBER;
        [self createDataAndUI];
    }
    return self;
}

- (instancetype)initWithFrame:(CGRect)frame numberOfStars:(NSInteger)numberOfStars {
    if (self = [super initWithFrame:frame]) {
        _numberOfStars = numberOfStars;
        [self createDataAndUI];
    }
    return self;
}

#pragma mark - Private Methods
// 創建視圖
- (void)createDataAndUI {
    _scorePercent = 1;//默認為1
    _hasAnimation = NO;//默認為NO
    _allowIncompleteStar = NO;//默認為NO
    
    self.foregroundStarView = [self createStarViewWithImage:STAR_FRONT_NAME];
    self.backgroundStarView = [self createStarViewWithImage:STAR_BACK_NAME];
    
    [self addSubview:self.backgroundStarView];
    [self addSubview:self.foregroundStarView];
    
    // 添加點按手勢（也可以添加拖動手勢）
    UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(userTapRateView:)];
    tapGesture.numberOfTapsRequired = 1;
    [self addGestureRecognizer:tapGesture];
}

- (void)userTapRateView:(UITapGestureRecognizer *)gesture {
    CGPoint tapPoint = [gesture locationInView:self]; // 手指當前點
    CGFloat offset = tapPoint.x;
    // 當前偏移的X值 = 手指當前的位置*（星星視圖總寬度/星星個數）
    CGFloat realStarScore = offset / (self.bounds.size.width / self.numberOfStars);
    // ceilf函數：返回浮點數整數部分（舍棄小數點部分，往個位數進1）如12.234 → ceilf(12.234)=13
    // 這句的意思是 是否顯示整星
    CGFloat starScore = self.allowIncompleteStar ? realStarScore : ceilf(realStarScore);
    // 用手指移動的距離/星星的個數  == 點亮星星個數
    self.scorePercent = starScore / self.numberOfStars;
}

- (UIView *)createStarViewWithImage:(NSString *)imageName {
    UIView *view = [[UIView alloc] initWithFrame:self.bounds];
    view.clipsToBounds = YES;
    view.backgroundColor = [UIColor clearColor];
    for (NSInteger i = 0; i < self.numberOfStars; i ++)
    {
        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:imageName]];
        imageView.frame = CGRectMake(i * self.bounds.size.width / self.numberOfStars, 0, self.bounds.size.width / self.numberOfStars, self.bounds.size.height);
        imageView.contentMode = UIViewContentModeScaleAspectFit;
        [view addSubview:imageView];
    }
    return view;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    __weak YYStarView *weakSelf = self;
    CGFloat animationTimeInterval = self.hasAnimation ? ANIMATION_TIME_INTERVAL : 0;
    [UIView animateWithDuration:animationTimeInterval animations:^{
        weakSelf.foregroundStarView.frame = CGRectMake(0, 0, weakSelf.bounds.size.width * weakSelf.scorePercent, weakSelf.bounds.size.height);
    }];
}

#pragma mark - Get and Set Methods

- (void)setScorePercent:(CGFloat)scroePercent {
    if (_scorePercent == scroePercent) {
        return;
    }
    // 得分范圍我設置的是0~1 這個可以你自己設定
    if (scroePercent < 0) {
        _scorePercent = 0;
    } else if (scroePercent > 1) {
        _scorePercent = 1;
    } else {
        _scorePercent = scroePercent;
    }
    // 代理方法，當星星百分比發生變化時候調用
    if ([self.delegate respondsToSelector:@selector(starView:scorePercentDidChange:)]) {
        [self.delegate starView:self scorePercentDidChange:scroePercent];
    }
    // 重新布局, 刷新視圖
    [self setNeedsLayout];
}
@end

如何使用？這個非常簡單，引入頭文件，簡單初始化一下就好了,是不是非常簡單啊？

YYStarView *starView = [[YYStarView alloc] initWithFrame:CGRectMake(10, 100, 300, 40) numberOfStars:5];
    starView.scorePercent = 0.3;
    starView.allowIncompleteStar = YES;
    starView.hasAnimation = YES;
    [self.view addSubview:starView];

  如果有什么好的建議，可以@我。對了我已經將此starView封裝好了 歡迎下載使用，別忘了Star喲

https://github.com/VictDog/YYStarGradeView/tree/master/YYStarGrade