iOS开发星级评分
前言
在开发电商类的app中，我们经常会遇到用户评价“打星”这样的需求，因为iOS上没有这个控件，所以这时需要我们自定义该控件来满足需求。
思路
看到这个需求的时候,我想到了需要自定义此控件来满足需求。
1)准备两张"星星"图片,一张为未选中状态下图片,一张为选中状态下的图片(如下)
selectStar.png
star.png在一个view上创建2个新view,一个是未选中的星星view,一个是选中星星的View,根据所点击的星星位置用选中星星的View覆盖未选中的星星view。
2)封装一个显示"打星"的界面,来让星星显示在需要的界面上
由于项目需要部分界面需要完整评分,部分界面则需要不完整的星级评分,所有写了个枚举类型来选中打分样式。
使用星级打分打的分数可以通过代理方式或者block方式来传递
实例代码
#import<UIKit/UIKit.h>
@class CCStarRateView;
typedef void(^finishBlock)(CGFloat currentScore);
typedef NS_ENUM(NSInteger, RateStyle){
WholeStar = 0, //只能整星评论
HalfStar = 1, //允许半星评论
IncompleteStar = 2 //允许不完整星评论
};
@protocol CCStarRateViewDelegate<NSObject>
-(void)starRateView:(CCStarRateView *)starRateView currentScore:(CGFloat)currentScore;
@end@interface CCStarRateView : UIView
@property (nonatomic,assign)CGFloat currentScore; // 当前评分：0-5 默认0
@property (nonatomic,assign)BOOL isAnimation; //是否动画显示，默认NO
@property (nonatomic,assign)RateStyle rateStyle; //评分样式 默认WholeStar
@property (nonatomic, weak) id<CCStarRateViewDelegate>delegate;-(instancetype)initWithFrame:(CGRect)frame;
-(instancetype)initWithFrame:(CGRect)frame numberOfStars:(NSInteger)numberOfStars rateStyle:(RateStyle)rateStyle isAnination:(BOOL)isAnimation delegate:(id)delegate;
//block当做一个参数传递
-(instancetype)initWithFrame:(CGRect)frame finish:(finishBlock)finish;//block当做一个参数传递
-(instancetype)initWithFrame:(CGRect)frame numberOfStars:(NSInteger)numberOfStars rateStyle:(RateStyle)rateStyle isAnination:(BOOL)isAnimation finish:(finishBlock)finish;@end
#import "CCStarRateView.h"
#define ForegroundStarImage @"Selectstar"
#define BackgroundStarImage @"star"
typedef void(^completeBlock)(CGFloat currentScore);
@interface CCStarRateView()
@property (nonatomic, strong) UIView *foregroundStarView;
@property (nonatomic, strong) UIView *backgroundStarView;
@property (nonatomic, assign) NSInteger numberOfStars;
@property (nonatomic,strong)completeBlock complete;
@end
@implementation CCStarRateView
#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];
}
//使用这个方法来初始化子View
- (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类型的值，表示触摸在view这个视图上的位置，这里返回的位置是针对view的坐标系的。调用时传入的view参数为空的话，返回的时触摸点在整个窗口的位置。
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 CCStarRateView *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
