大家在平时做开发的过程中，可能会遇到用户打分这样的需求。那么，既然有的打分，对应的就会有显示评分的功能出现。当分数为整数时还好说，但是当分数为小数时，就会非常蛋疼。先别慌，接下来，我就为大家提供一种显示小数打分的方法。样式图出现：
App Store评分样式.png
先给大家讲解一下原理。
1.首先我们需要两张一模一样的图片，如图：
score.png
大家可能会想，两张一模一样的图片怎么搞？这个问题很好，接下来确实有点抽象，继续看。
2.我们把这两张图片分别当做两个UIImageView，上下叠加，使高亮图片（highImageView，下面就这么称呼）放在非高亮图片（emptyImageView）的上面。这时候需要注意，emptyImageView直接添加在view上，而highImageView需要添加在一个可以裁减的clipsView（clipsToBounds=YES），再把clipsView添加在view上。（我相信此时此刻，懵逼的人已经可以排长队了。不用担心，一会看代码就很快理解了）
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，运行下来，就是如上图所示了。想显示几分就显示积分，有木有感觉学到了，喜欢的话就点个赞、加个收藏吧。
