iOS 仿App Store评分样式

大家在平时做开发的过程中，可能会遇到用户打分这样的需求。那么，既然有的打分，对应的就会有显示评分的功能出现。当分数为整数时还好说，但是当分数为小数时，就会非常蛋疼。先别慌，接下来，我就为大家提供一种显示小数打分的方法。样式图出现：

App Store评分样式.png

先给大家讲解一下原理。
1.首先我们需要两张一模一样的图片，如图：

score.png

大家可能会想，两张一模一样的图片怎么搞？这个问题很好，接下来确实有点抽象，继续看。
2.我们把这两张图片分别当做两个UIImageView，上下叠加，使高亮图片（highImageView，下面就这么称呼）放在非高亮图片（emptyImageView）的上面。这时候需要注意，emptyImageView直接添加在view上，而highImageView需要添加在一个可以裁减的clipsView（clipsToBounds=YES），再把clipsView添加在view上。（我相信此时此刻，懵逼的人已经可以排长队了。不用担心，一会看代码就很快理解了）

3.当给你一个分数的时候，你就可以根据当前分数占总分的比例，然后向右移动clipsView，并且向左移动highImageView。并且保持highImageView始终在emptyImageView的正上方。这是通过裁剪就能得到下面结果了。 scroe效果图.png
上代码啦。先看看.h文件，只有一个score(分数)

#import <UIKit/UIKit.h>

@interface ScoreView : UIView

/// 分数
@property (nonatomic, assign) float score;

@end

接下来就是.m文件了：

#import "ScoreView.h"

@interface ScoreView()

/// 高亮图
@property (nonatomic, strong) UIImageView *highImageView;
/// 可以被裁减的view
@property (nonatomic, strong) UIView *clipsView;
/// 非高亮图
@property (nonatomic, strong) UIImageView *emptyImageView;

@end

@implementation ScoreView

-(instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self setupScoreView];
    }
    
    return self;
}

//设置初始值
-(void)setupScoreView {
    [self addSubview:self.emptyImageView];
    [self addSubview:self.clipsView];
    [self.clipsView addSubview:self.highImageView];
}

//打分移动视图
-(void)setScore:(float)score {
    _score = score;
    
    //默认满分是5分
    float newScore = score/5.0;
    
    self.clipsView.frame = CGRectMake(-(1-newScore) * self.bounds.size.width, 0, self.clipsView.frame.size.width, self.clipsView.frame.size.height);
    self.highImageView.frame = CGRectMake((1-newScore) * self.bounds.size.width, 0, self.highImageView.frame.size.width, self.highImageView.frame.size.height);
}

#pragma mark - UI
-(UIImageView *)highImageView {
    if (!_highImageView) {
        _highImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"score_highlight"]];
        _highImageView.frame = self.clipsView.bounds;
    }
    
    return _highImageView;
}

-(UIView *)clipsView {
    if (!_clipsView) {
        _clipsView = [[UIView alloc] init];
        _clipsView.clipsToBounds=YES;
        _clipsView.frame = self.bounds;
    }
    
    return _clipsView;
}

-(UIImageView *)emptyImageView {
    if (!_emptyImageView) {
        _emptyImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"score_empty"]];
        _emptyImageView.frame = self.bounds;
    }
    
    return _emptyImageView;
}

@end

ok，运行下来，就是如上图所示了。想显示几分就显示积分，有木有感觉学到了，喜欢的话就点个赞、加个收藏吧。