iOS评分(评价)星星图打分功能

2025-05-29 0 84

下载地址:https://github.com/littlesunzheng/stargradeview

iOS评分(评价)星星图打分功能

起因:项目中往往涉及到用户的评分反馈,在我的“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;//放星星的背景view

uiview *_shouview;//放星星的背景view

cgfloat _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评分(评价)星星图打分功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对快网idc网站的支持!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 iOS评分(评价)星星图打分功能 https://www.kuaiidc.com/92277.html

相关文章

发表评论
暂无评论