前言:

最近項目中做商城,涉及到訂單評價,評分的問題,網(wǎng)上參考了別人的一些資料,然后封裝了一套可以實現(xiàn)評分功能的方法,效果如下:

Untitled00.gif

具體方法如下:

• KFStarView.h

#import <UIKit/UIKit.h>

@class KFStarView;
@protocol KFStarViewDelegate <NSObject>
@optional

// 星星百分比（得分值）發(fā)生變化的代理
- (void)starView:(KFStarView *)starView scorePercentDidChange:(CGFloat)newScorePercent;
@end

@interface KFStarView : 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<KFStarViewDelegate>delegate;
- (instancetype)initWithFrame:(CGRect)frame numberOfStars:(NSInteger)numberOfStars;

@end

• KFStarView.m

#import "KFStarView.h"

#define STAR_FRONT_NAME @"star_selected" //點亮星星圖片
#define STAR_BACK_NAME @"star_deauful" // 未點亮星星圖片
#define DEFALUT_STAR_NUMBER 5 // 默認星星個數(shù)
#define ANIMATION_TIME_INTERVAL 0.2 // 動畫延時

@interface KFStarView()

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

@end

@implementation KFStarView

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

// 考慮到使用xib的情況
- (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
// 創(chuàng)建視圖
- (void)createDataAndUI {
    _scorePercent = 1;//默認為1
    _hasAnimation = NO;//默認為NO
    _allowIncompleteStar = NO;//默認為NO
    
    self.foregroundStarView = [self createStarViewWithImage:STAR_FRONT_NAME];
    self.foregroundStarView.frame = CGRectMake(0, 0, 0, self.bounds.size.height);
    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值 = 手指當前的位置*（星星視圖總寬度/星星個數(shù)）
    CGFloat realStarScore = offset / (self.bounds.size.width / self.numberOfStars);
    // ceilf函數(shù)：返回浮點數(shù)整數(shù)部分（舍棄小數(shù)點部分，往個位數(shù)進1）如12.234 → ceilf(12.234)=13
    // 這句的意思是 是否顯示整星
    CGFloat starScore = self.allowIncompleteStar ? realStarScore : ceilf(realStarScore);
    // 用手指移動的距離/星星的個數(shù)  == 點亮星星個數(shù)
    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 KFStarView *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;
    }
    // 代理方法，當星星百分比發(fā)生變化時候調(diào)用
    if ([self.delegate respondsToSelector:@selector(starView:scorePercentDidChange:)]) {
        [self.delegate starView:self scorePercentDidChange:scroePercent];
    }
    // 重新布局, 刷新視圖
    [self setNeedsLayout];
}

@end

具體使用方法:

• 初始化

   KFStarView *starView = [[KFStarView alloc] initWithFrame:CGRectMake(CGRectGetMaxX(studioLogo.frame) + 5, CGRectGetMaxY(topLabel.frame) + 5, 150, 20) numberOfStars:5];
    starView.scorePercent = 0.0;
    starView.allowIncompleteStar = NO;
    starView.hasAnimation = YES;
    starView.delegate = self;
    [self addSubview:starView];

• 實現(xiàn)代理方法

#pragma mark -- KFStarViewDelegate
- (void)starView:(KFStarView *)starView scorePercentDidChange:(CGFloat)newScorePercent{
    // 返回的是評分結(jié)果
    self.starPercent = newScorePercent;
}