选择的废话不多说先上图
Demo效果图
GitHub地址：成品使用或者查看完整代码
-
简单的结构
自定义一个StarEvaluationView即可
-
直接使用
//一步初始化同时带上点击回调，参数是本次的星星数量，目的是评价完毕可以做一些操作
self.tggStarEvaView = [TggStarEvaluationView evaluationViewWithChooseStarBlock:^(NSUInteger count) {
NSLog(@"\n\n给了铁哥哥：%ld星好评！！!\n\n",count);
}];
self.tggStarEvaView.frame= (CGRect){self.view.frame.size.width/ 2 - 23 * 5,320,23 * 10,45};
[self.viewaddSubview:self.tggStarEvaView];
// 直接设置展示的星星数量，目的是为了直接用作Get数据的时候直接展示之前的评价星星数量，可以配合关闭视图交互来用作展示
self.tggStarEvaView.starCount = 3;
// 星星之间的间距，默认0.5，大小为：0～1，超过1则置为1，例如spaceing ＝ 0.1则间隙为星星的宽度的0.1倍，整个View宽度不变，间距变小，星星宽度变大
self.tggStarEvaView.spacing = 0.1;
// 星星的点击使能,默认YES，关闭配合展示时用
self.tggStarEvaView.tapEnabled = NO;
-
主要思路
1.实现展示UI
重写UIView的 - (void)drawRect:(CGRect)rect 方法在UIView上draw5个底部空白的星星，同时在通过当前的选择draw上当前数量的实心星星。
2.实现选择的用户交互
通过手势捕捉- (void)touchesEnded:(NSSet ＊)touches withEvent:(UIEvent ＊)event当前的选择的评价星星，到底当前是选择了几颗？给了几星的评价？
-
具体实现
- 先翻转坐标系，然后通过上下文绘制图片
-(void)drawImage:(CGContextRef)context
CGImageRef:(CGImageRef)image
CGRect:(CGRect)rect {
CGContextSaveGState(context);
CGContextTranslateCTM(context, rect.origin.x, rect.origin.y);
CGContextTranslateCTM(context, 0, rect.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextTranslateCTM(context, -rect.origin.x, -rect.origin.y);
CGContextDrawImage(context, rect, image);
CGContextRestoreGState(context);
}
- for循环绘制所需图片
for (NSInteger i = 0; i < 5; i ++) {
UIImage *drawImage = i < self.index ? selImage : norImage;
[self drawImage:context CGImageRef:drawImage.CGImage CGRect:CGRectMake((i == 0) ? spacing : 2 * i * spacing + spacing + starWidth * i, top, starWidth, starWidth)];
}
- 捕捉屏幕位置然后重刷图片
-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
self.index = point.x / (self.frame.size.width / 5) + 1;
if (self.index == 6) {
self.index --;
}
[self setNeedsDisplay];
if (self.evaluateViewChooseStarBlock) {
self.evaluateViewChooseStarBlock(self.index);
}
}
GitHub地址：具体细节查看完整代码
