下载地址：https://github.com/littlesunzheng/stargradeview
起因：项目中往往涉及到用户的评分反馈，在我的“e中医”项目中，涉及到几处。对此我参考了美团和滴滴的评分图。
评分视图分为展示和评分两种：
（1）多数情况下“评分功能”是要简介易用的。那种 星星准确显示百分比（分数）的功能反而不好用，这种多数用在显示评分上，不需要用户去点击，因为用户想评价“9.8分”，手指头是不能准确点击的。但是显示的时候你根据数据可以完美的显示出来。实现原理就是两图片，一张是“灰色”星星五颗，一张是“金色”星星五颗。让imageview的模式设置好（多余的照片不显示）。按照比例将 上层 金色星星imageview的长调整好，星星比例就自然显示好了。
（2）用户操作打分的星星视图：我这里做的就是打分的。实现原理很简单，当你操作其他软件的功能时就能结合想到手势。
上源码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
//// stargradeview.h// ecmcustomer//// created by 郑鹏 on 2016/11/4.// copyright © 2016年 张进. all rights reserved.//#import <uikit/uikit.h>@protocol stargradeviewdelegate <nsobject>- (void)didselectedindex:(nsstring *)index;@end@interface stargradeview : uiview@property (nonatomic, assign) id <stargradeviewdelegate> delegate;// 视图frame 和 想有几个星星（取决于设计 5个常用 或者10个 ）- (instancetype)initwithframe:(cgrect)frame withtnumberofpart:(nsinteger)num;@end//// stargradeview.m// ecmcustomer//// created by 郑鹏 on 2016/11/4.// copyright © 2016年 张进. all rights reserved.//#import "stargradeview.h"@interface stargradeview(){uiview *_btnview;//放星星的背景viewuiview *_shouview;//放星星的背景viewcgfloat _height;//星星的高nsinteger _btnnum;//按钮的数量nsinteger _index;//第几个}@end@implementation stargradeview- (instancetype)initwithframe:(cgrect)frame withtnumberofpart:(nsinteger)num{self = [super initwithframe:frame];_height = frame.size.height;_btnnum = num;cgfloat selfw = frame.size.width;cgfloat starw = frame.size.height;_btnview = [[uiview alloc] initwithframe:cgrectmake((selfw - starw*num)/2 , 0, starw*num, starw)];for (int i = 0; i< num; i++) {uibutton *starbtn = [uibutton buttonwithtype:uibuttontypecustom];starbtn.frame = cgrectmake(starw * i, 0, starw, starw);[starbtn setimage:[uiimage imagenamed:@"star_off"] forstate:uicontrolstatenormal];[starbtn setimage:[uiimage imagenamed:@"star_on"] forstate:uicontrolstateselected];starbtn.tag = 1991+i;[starbtn setadjustsimagewhenhighlighted:no];[_btnview addsubview:starbtn];}_shouview = [[uiview alloc] initwithframe:cgrectmake(0 , 0, starw*num, starw)];[_btnview addsubview:_shouview];[self addsubview:_btnview];return self;}//滑动需要的。- (void)touchesbegan:(nsset<uitouch *> *)touches withevent:(uievent *)event{cgpoint point = [self gettouchpoint:touches];int j = (int)(point.x/_height);_index = j;for (nsinteger i = 0; i < _btnnum; i++) {if (i<=j) {uibutton *btn = [_btnview viewwithtag:i+1991];btn.selected = yes;}else{uibutton *btn = [_btnview viewwithtag:i+1991];btn.selected = no;}}}//滑动需要的。- (void)touchesmoved:(nsset<uitouch *> *)touches withevent:(uievent *)event{cgpoint point = [self gettouchpoint:touches];int j = (int)(point.x/_height);_index = j;for (nsinteger i = 0; i < _btnnum; i++) {if (i<=j) {uibutton *btn = [_btnview viewwithtag:i+1991];btn.selected = yes;}else{uibutton *btn = [_btnview viewwithtag:i+1991];btn.selected = no;}}}//滑动需要的。- (void)touchesended:(nsset<uitouch *> *)touches withevent:(uievent *)event{if ([self.delegate respondstoselector:@selector(didselectedindex:)]) {[self.delegate didselectedindex:[nsstring stringwithformat:@"%ld",_index+1]];}}//取到 手势 在屏幕上点的 位置point- (cgpoint)gettouchpoint:(nsset<uitouch *>*)touches{uitouch *touch = [touches anyobject];cgpoint point = [touch locationinview:_shouview];return point;}//如果点击的范围在 按钮的区域- (bool)pointinbtn:(uibutton *)btn withpoint:(cgpoint)point{if (cgrectcontainspoint(btn.frame, point)) {return yes;}else{return no;}return nil;}/*// only override drawrect: if you perform custom drawing.// an empty implementation adversely affects performance during animation.- (void)drawrect:(cgrect)rect {// drawing code}*/@end |
使用时：
|
1
2
3
4
5
6
7
|
stargradeview *view = [[stargradeview alloc] initwithframe:cgrectmake(0, 100, 375, 40) withtnumberofpart:5];view.delegate = self;[self.view addsubview:view];//并实现代理方法- (void)didselectedindex:(nsstring *)index{nslog(@"%@",index);} |
注释：这里切图时注意：只要一个星星，并且要求是 正方形 星星图片有留白。看代码就明白为什么要这么切图。1是美观 2是 容易计算。
以上所述是小编给大家介绍的ios评分（评价）星星图打分功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！
原文链接：http://blog.csdn.net/littlesun_zheng/article/details/53066366
