一个星形评分控件的封装
2017-07-11 本文已影响108人
浪漫恋星空
前言
很久没有更新简书了，这段时间一直在忙着撸代码。项目的事情暂时总算是告一段落了，打开简书一看，整个六月份一篇都没有写。本来还想强行解释一波的，算了，总结一句话，还是懒。新项目设计妹纸正在做设计稿，看到项目中有一个星形评分的控件，闲来无事，找了几个网上的看了一下，都不是很满足自己的需求，所以自己动手实现了一下。
效果图
效果图.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工程。如果在使用过程中发现问题欢迎留言提出。谢谢！
特别感谢
在代码封装的过程中有参考这里的代码 在此感谢。
