選擇的廢話不多說先上圖
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地址：具體細節查看完整代碼
