许多App都会有评价功能,这个时候或许会需要实现星级评分,下面我们来简单的实现一个星级评分功能。
具体实现
- 导入资源
首先我们需要将需要的图片资源导入项目中。可以直接拖入项目中也可放在Assets.xcassets里。推荐放在Assets.xcassets中。 - .m文件中的相关代码
#import <UIKit/UIKit.h>
@class XHStarRateView;
typedef void(^finishBlock)(CGFloat currentScore);
typedef NS_ENUM(NSInteger, RateStyle)
{
WholeStar = 0, //只能整星评论
HalfStar = 1, //允许半星评论
IncompleteStar = 2 //允许不完整星评论
};
@protocol XHStarRateViewDelegate <NSObject>
-(void)starRateView:(XHStarRateView *)starRateView currentScore:(CGFloat)currentScore;
@end
@interface XHStarRateView : UIView
@property (nonatomic,assign)BOOL isAnimation; //是否动画显示,默认NO
@property (nonatomic,assign)RateStyle rateStyle; //评分样式 默认是WholeStar
@property (nonatomic,assign)CGFloat currentScore; // 当前评分:0-5 默认0
@property (nonatomic, weak) id<XHStarRateViewDelegate>delegate;
/**
*通过代理的方法获取当前评分数currentScore
*/
-(instancetype)initWithFrame:(CGRect)frame;
-(instancetype)initWithFrame:(CGRect)frame numberOfStars:(NSInteger)numberOfStars rateStyle:(RateStyle)rateStyle isAnination:(BOOL)isAnimation delegate:(id)delegate;
/**
*通过Block传值的方法获取当前评分数currentScore
*/
-(instancetype)initWithFrame:(CGRect)frame finish:(finishBlock)finish;
-(instancetype)initWithFrame:(CGRect)frame numberOfStars:(NSInteger)numberOfStars rateStyle:(RateStyle)rateStyle isAnination:(BOOL)isAnimation finish:(finishBlock)finish;
@end
- .h文件中的相关代码
#import "XHStarRateView.h"
#define ForegroundStarImage @"b27_icon_star_yellow"
#define BackgroundStarImage @"b27_icon_star_gray"
typedef void(^completeBlock)(CGFloat currentScore);
@interface XHStarRateView()
@property (nonatomic, strong) UIView *foregroundStarView;
@property (nonatomic, strong) UIView *backgroundStarView;
@property (nonatomic, assign) NSInteger numberOfStars;
@property (nonatomic,strong)completeBlock complete;
@end
@implementation XHStarRateView
#pragma mark - 代理方式
-(instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
_numberOfStars = 5;
_rateStyle = WholeStar;
[self createStarView];
}
return self;
}
-(instancetype)initWithFrame:(CGRect)frame numberOfStars:(NSInteger)numberOfStars rateStyle:(RateStyle)rateStyle isAnination:(BOOL)isAnimation delegate:(id)delegate{
if (self = [super initWithFrame:frame]) {
_numberOfStars = numberOfStars;
_rateStyle = rateStyle;
_isAnimation = isAnimation;
_delegate = delegate;
[self createStarView];
}
return self;
}
#pragma mark - block方式
-(instancetype)initWithFrame:(CGRect)frame finish:(finishBlock)finish{
if (self = [super initWithFrame:frame]) {
_numberOfStars = 5;
_rateStyle = WholeStar;
_complete = ^(CGFloat currentScore){
finish(currentScore);
};
[self createStarView];
}
return self;
}
-(instancetype)initWithFrame:(CGRect)frame numberOfStars:(NSInteger)numberOfStars rateStyle:(RateStyle)rateStyle isAnination:(BOOL)isAnimation finish:(finishBlock)finish{
if (self = [super initWithFrame:frame]) {
_numberOfStars = numberOfStars;
_rateStyle = rateStyle;
_isAnimation = isAnimation;
_complete = ^(CGFloat currentScore){
finish(currentScore);
};
[self createStarView];
}
return self;
}
#pragma mark - private Method
-(void)createStarView{
self.foregroundStarView = [self createStarViewWithImage:ForegroundStarImage];
self.backgroundStarView = [self createStarViewWithImage:BackgroundStarImage];
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];
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(userTapRateView:)];
tapGesture.numberOfTapsRequired = 1;
[self addGestureRecognizer:tapGesture];
}
-(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)userTapRateView:(UITapGestureRecognizer *)gesture {
CGPoint tapPoint = [gesture locationInView:self];
CGFloat offset = tapPoint.x;
CGFloat realStarScore = offset / (self.bounds.size.width / self.numberOfStars);
switch (_rateStyle) {
case WholeStar:
{
self.currentScore = ceilf(realStarScore);
break;
}
case HalfStar:
self.currentScore = roundf(realStarScore)>realStarScore ? ceilf(realStarScore):(ceilf(realStarScore)-0.5);
break;
case IncompleteStar:
self.currentScore = realStarScore;
break;
default:
break;
}
}
-(void)layoutSubviews {
[super layoutSubviews];
__weak XHStarRateView *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);
}];
}
-(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 respondsToSelector:@selector(starRateView:currentScore:)]) {
[self.delegate starRateView:self currentScore:_currentScore];
}
if (self.complete) {
_complete(_currentScore);
}
[self setNeedsLayout];
}
@end
-
效果图
- Demo下载链接
https://github.com/huahua0809/XHStarRateView