前言
很久没有更新简书了，这段时间一直在忙着撸代码。项目的事情暂时总算是告一段落了，打开简书一看，整个六月份一篇都没有写。本来还想强行解释一波的，算了，总结一句话，还是懒。新项目设计妹纸正在做设计稿，看到项目中有一个星形评分的控件，闲来无事，找了几个网上的看了一下，都不是很满足自己的需求，所以自己动手实现了一下。
效果图
效果图.gif
实现思路
创建前后两个frame相等的视图
在创建好的视图上循环添加需要个数的UIImageView，并设置对应的图片。
根据手指在控件上的位置获取X轴上的偏移量，计算成分数。
代码实现
大致的实现思路了解了，接下来要做的就是编码实现。首先创建一个类 XKStarRateView 继承自 UIView，在 XKStarRateView.h 中，声明一些初始的构造方法。
#import <UIKit/UIKit.h>typedef NS_ENUM(NSInteger, XKStarRateStyle) {
XKWholeStarStyle = 0,
XKHalfStarStyle = 1,
XKIncompleteStarStyle = 2};typedef void(^XKStarRateSelectedBlock)(CGFloat score);@class XKStarRateView;@protocol XKStarRateViewDelegate <NSObject>- (void)starRateView:(XKStarRateView *)starRateView currentScore:(CGFloat)currentScore;@end@interface XKStarRateView : UIView/// 是否显示动画(默认为NO)@property (nonatomic, assign) BOOL isAnimation;/// 评分样式 (XKWholeStarStyle 整星评论 XKHalfStarStyle 半星评论 XKIncompleteStarStyle 不完整星评论)@property (nonatomic, assign) XKStarRateStyle rateStyle;/// 代理@property (nonatomic, weak) id<XKStarRateViewDelegate> delegate;/**
初始化方法
@param frame 控件frame
@param numberOfStars 星星数量
@param rateStyle 评分样式 (XKWholeStarStyle 整星评论 XKHalfStarStyle 半星评论 XKIncompleteStarStyle 不完整星评论)
@param isAnimation 是否动画
@param delegate 代理
@return XKStarRateView
*/- (instancetype)initWithFrame:(CGRect)frame
numberOfStars:(NSInteger)numberOfStars
rateStyle:(XKStarRateStyle)rateStyle
isAnination:(BOOL)isAnimation
delegate:(id<XKStarRateViewDelegate>)delegate;/**
初始化方法
@param frame 控件frame
@param starRateSelectedBlock 点击星星的回调
@return XKStarRateView
*/- (instancetype)initWithFrame:(CGRect)frame
starRateSelectedBlock:(XKStarRateSelectedBlock)starRateSelectedBlock;/**
初始化方法
@param frame 控件frame
@param numberOfStars 星星数量
@param rateStyle 评分样式 (XKWholeStarStyle 整星评论 XKHalfStarStyle 半星评论 XKIncompleteStarStyle 不完整星评论)
@param isAnimation 是否动画
@param starRateSelectedBlock 点击星星的回调
@return XKStarRateView
*/- (instancetype)initWithFrame:(CGRect)frame
numberOfStars:(NSInteger)numberOfStars
rateStyle:(XKStarRateStyle)rateStyle
isAnination:(BOOL)isAnimation
starRateSelectedBlock:(XKStarRateSelectedBlock)starRateSelectedBlock;@end这里提供了三种样式供选择，整星，半星，任意星。以及代理和Block两种方式获得当前控件显示所对应的分数。还提供了一个可选动画的属性。
在实现的过程中，首先定义一些必要的属性参数。
typedef void(^completeBlock)(CGFloat currentScore);@interface XKStarRateView ()@property (nonatomic, strong) UIView *foregroundStarView;@property (nonatomic, strong) UIView *backgroundStarView;@property (nonatomic, assign) NSInteger numberOfStars;@property (nonatomic, assign) CGFloat currentScore;@property (nonatomic, strong) completeBlock complete;@end
接下来声明一个方法创建需要的视图
/**
根据图片名称创建StarView
@param imageName 图片名称
*/- (UIView *)createStarViewWithImageName:(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)initStarView {
self.foregroundStarView = [self createStarViewWithImageName:NormalImageName];
self.backgroundStarView = [self createStarViewWithImageName:SelectedImageName];
self.foregroundStarView.frame = CGRectMake(0, 0, self.bounds.size.width * _currentScore / self.numberOfStars, self.bounds.size.height);
[self addSubview:self.backgroundStarView];
[self addSubview:self.foregroundStarView];
}视图什么的都创建好了，接着处理事件，这里的点击事件和滑动事件我并没有去给视图添加手势，而是直接放到视图的Touch事件中去处理的。
#pragma mark -- touch事件处理- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[event touchesForView:self];
NSSet *allTouches = [event allTouches];
UITouch *touch = [allTouches anyObject];
CGPoint point = [touch locationInView:[touch view]];
CGFloat offset = point.x;
CGFloat realStarScore = offset / (self.bounds.size.width / self.numberOfStars);
[self handleRealStarScore:realStarScore];
}
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[event touchesForView:self];
NSSet *allTouches = [event allTouches];
UITouch *touch = [allTouches anyObject];
CGPoint point = [touch locationInView:[touch view]];
CGFloat offset = point.x;
CGFloat realStarScore = offset / (self.bounds.size.width / self.numberOfStars);
[self handleRealStarScore:realStarScore];
}根据偏移量计算最终的评分，这里根据选择不同的样式计算方法有不一样的地方。
/**
根据偏移量计算最终的评分
@param realStarScore 真实的偏移量
*/- (void)handleRealStarScore:(CGFloat)realStarScore {
switch (_rateStyle) {
case XKWholeStarStyle:
self.currentScore = ceilf(realStarScore);
break;
case XKHalfStarStyle:
self.currentScore = roundf(realStarScore) > realStarScore ? ceilf(realStarScore) : (ceilf(realStarScore) - 0.5);
break;
case XKIncompleteStarStyle:
self.currentScore = realStarScore;
break;
default:
break;
}
}这里主要的就是两个C语言函数的使用。
round：如果参数是小数，则求本身的四舍五入。ceilf：如果参数是小数，则向上取整。
拿到当前的偏移量计算出来的分数之后，在setter方法中将这个值传出去。并且刷新视图。
- (void)setCurrentScore:(CGFloat)currentScore {
if (_currentScore == currentScore) {
return;
}
if (currentScore < 0) {
_currentScore = 0;
} else if (currentScore > _numberOfStars) {
_currentScore = _numberOfStars;
} else {
_currentScore = currentScore;
}
if (self.delegate && [self.delegate respondsToSelector:@selector(starRateView:currentScore:)]) {
[self.delegate starRateView:self currentScore:_currentScore];
}
if (self.complete) {
_complete(_currentScore);
}
[self setNeedsLayout];
}在 - (void)layoutSubviews 方法中，去改变 foregroundStarView 的frame即可。
- (void)layoutSubviews {
[super layoutSubviews];
__weak XKStarRateView *weakSelf = self;
CGFloat animationTimeInterval = self.isAnimation ? 0.2 : 0;
[UIView animateWithDuration:animationTimeInterval animations:^{
weakSelf.foregroundStarView.frame = CGRectMake(0, 0, weakSelf.bounds.size.width * weakSelf.currentScore / self.numberOfStars, weakSelf.bounds.size.height);
}];
}到这里，基本的功能就做完了，构造方法中只需要初始化部分参数就好了。运行程序，发现有一个问题，就是当你选择了一个分数之后，在 XKWholeStarStyle 和 XKHalfStarStyle 两种样式中，始终没有办法将评分设置为0，问题出在 - (void)handleRealStarScore:(CGFloat)realStarScore 这个方法中使用到的两个C语言函数。这里最后也没有去在想其他的方式来实现。在这个方法中手动的设置了一下，当 realStarScore比0.5还小的时候，就直接让分数为0。简单粗暴。
/**
根据偏移量计算最终的评分
@param realStarScore 真实的偏移量
*/- (void)handleRealStarScore:(CGFloat)realStarScore {
switch (_rateStyle) {
case XKWholeStarStyle:
if (realStarScore < 0.5) {
self.currentScore = 0;
} else {
self.currentScore = ceilf(realStarScore);
}
break;
case XKHalfStarStyle:
if (realStarScore < 0.4) {
self.currentScore = 0;
} else {
self.currentScore = roundf(realStarScore) > realStarScore ? ceilf(realStarScore) : (ceilf(realStarScore) - 0.5);
}
break;
case XKIncompleteStarStyle:
self.currentScore = realStarScore;
break;
default:
break;
}
}最后，整个实现文件的代码如下
#import "XKStarRateView.h"#define NormalImageName @"b27_icon_star_yellow"#define SelectedImageName @"b27_icon_star_gray"typedef void(^completeBlock)(CGFloat currentScore);@interface XKStarRateView ()@property (nonatomic, strong) UIView *foregroundStarView;@property (nonatomic, strong) UIView *backgroundStarView;@property (nonatomic, assign) NSInteger numberOfStars;@property (nonatomic, assign) CGFloat currentScore;@property (nonatomic, strong) completeBlock complete;@end@implementation XKStarRateView#pragma mark -- 构造方法- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
_numberOfStars = 5;
_rateStyle = XKWholeStarStyle;
[self initStarView];
}
return self;
}
- (instancetype)initWithFrame:(CGRect)frame
numberOfStars:(NSInteger)numberOfStars
rateStyle:(XKStarRateStyle)rateStyle
isAnination:(BOOL)isAnimation
delegate:(id<XKStarRateViewDelegate>)delegate {
if (self = [super initWithFrame:frame]) {
_numberOfStars = numberOfStars;
_rateStyle = rateStyle;
_isAnimation = isAnimation;
_delegate = delegate;
[self initStarView];
}
return self;
}
- (instancetype)initWithFrame:(CGRect)frame
starRateSelectedBlock:(XKStarRateSelectedBlock)starRateSelectedBlock{
if (self = [super initWithFrame:frame]) {
_numberOfStars = 5;
_rateStyle = XKWholeStarStyle;
_complete = ^(CGFloat currentScore){
starRateSelectedBlock(currentScore);
};
[self initStarView];
}
return self;
}
- (instancetype)initWithFrame:(CGRect)frame
numberOfStars:(NSInteger)numberOfStars
rateStyle:(XKStarRateStyle)rateStyle
isAnination:(BOOL)isAnimation
starRateSelectedBlock:(XKStarRateSelectedBlock)starRateSelectedBlock {
if (self = [super initWithFrame:frame]) {
_numberOfStars = numberOfStars;
_rateStyle = rateStyle;
_isAnimation = isAnimation;
_complete = ^(CGFloat currentScore) {
starRateSelectedBlock(currentScore);
};
[self initStarView];
}
return self;
}#pragma mark -- 私有方法/**
初始化评论视图
*/- (void)initStarView {
self.foregroundStarView = [self createStarViewWithImageName:NormalImageName];
self.backgroundStarView = [self createStarViewWithImageName:SelectedImageName];
self.foregroundStarView.frame = CGRectMake(0, 0, self.bounds.size.width * _currentScore / self.numberOfStars, self.bounds.size.height);
[self addSubview:self.backgroundStarView];
[self addSubview:self.foregroundStarView];
}/**
根据图片名称创建StarView
@param imageName 图片名称
*/- (UIView *)createStarViewWithImageName:(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;
}/**
根据偏移量计算最终的评分
@param realStarScore 真实的偏移量
*/- (void)handleRealStarScore:(CGFloat)realStarScore {
switch (_rateStyle) {
case XKWholeStarStyle:
if (realStarScore < 0.5) {
self.currentScore = 0;
} else {
self.currentScore = ceilf(realStarScore);
}
break;
case XKHalfStarStyle:
if (realStarScore < 0.4) {
self.currentScore = 0;
} else {
self.currentScore = roundf(realStarScore) > realStarScore ? ceilf(realStarScore) : (ceilf(realStarScore) - 0.5);
}
break;
case XKIncompleteStarStyle:
self.currentScore = realStarScore;
break;
default:
break;
}
}#pragma mark -- touch事件处理- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[event touchesForView:self];
NSSet *allTouches = [event allTouches];
UITouch *touch = [allTouches anyObject];
CGPoint point = [touch locationInView:[touch view]];
CGFloat offset = point.x;
CGFloat realStarScore = offset / (self.bounds.size.width / self.numberOfStars);
[self handleRealStarScore:realStarScore];
}
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[event touchesForView:self];
NSSet *allTouches = [event allTouches];
UITouch *touch = [allTouches anyObject];
CGPoint point = [touch locationInView:[touch view]];
CGFloat offset = point.x;
CGFloat realStarScore = offset / (self.bounds.size.width / self.numberOfStars);
[self handleRealStarScore:realStarScore];
}
- (void)layoutSubviews {
[super layoutSubviews];
__weak XKStarRateView *weakSelf = self;
CGFloat animationTimeInterval = self.isAnimation ? 0.2 : 0;
[UIView animateWithDuration:animationTimeInterval animations:^{
weakSelf.foregroundStarView.frame = CGRectMake(0, 0, weakSelf.bounds.size.width * weakSelf.currentScore/self.numberOfStars, weakSelf.bounds.size.height);
}];
}#pragma mark -- setter方法- (void)setCurrentScore:(CGFloat)currentScore {
if (_currentScore == currentScore) {
return;
}
if (currentScore < 0) {
_currentScore = 0;
} else if (currentScore > _numberOfStars) {
_currentScore = _numberOfStars;
} else {
_currentScore = currentScore;
}
if (self.delegate && [self.delegate respondsToSelector:@selector(starRateView:currentScore:)]) {
[self.delegate starRateView:self currentScore:_currentScore];
}
if (self.complete) {
_complete(_currentScore);
}
[self setNeedsLayout];
}@end全部的代码都在这里了。同样的，需要的朋友可以点击这里下载Demo工程。如果在使用过程中发现问题欢迎留言提出。谢谢！
特别感谢
在代码封装的过程中有参考这里的代码 在此感谢。
作者：浪漫恋星空
链接：https://www.jianshu.com/p/964863597958
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦