iOS评分(评价)星星图打分功能
程序员文章站
2024-02-14 10:26:40
下载地址:https://github.com/littlesunzheng/stargradeview
起因:项目中往往涉及到用户的评分反馈,在我的“e...
下载地址:https://github.com/littlesunzheng/stargradeview
起因:项目中往往涉及到用户的评分反馈,在我的“e中医”项目中,涉及到几处。对此我参考了美团和滴滴的评分图。
评分视图分为展示和评分两种:
(1)多数情况下“评分功能”是要简介易用的。那种 星星准确显示百分比(分数)的功能反而不好用,这种多数用在显示评分上,不需要用户去点击,因为用户想评价“9.8分”,手指头是不能准确点击的。但是显示的时候你根据数据可以完美的显示出来。实现原理就是两图片,一张是“灰色”星星五颗,一张是“金色”星星五颗。让imageview的模式设置好(多余的照片不显示)。按照比例将 上层 金色星星imageview的长调整好,星星比例就自然显示好了。
(2)用户操作打分的星星视图:我这里做的就是打分的。实现原理很简单,当你操作其他软件的功能时就能结合想到手势。
上源码:
// // 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
使用时:
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评分(评价)星星图打分功能,希望对大家有所帮助
上一篇: c#实现图片二值化例子(黑白效果)
推荐阅读