当前位置： 移动技术网 > 移动技术>移动开发>IOS > iOS评分（评价）星星图打分功能

iOS评分（评价）星星图打分功能

2019年07月24日  | 移动技术网移动技术  | 我要评论

 下载地址：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评分（评价）星星图打分功能，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网