首页 > 系统 > iOS > 正文

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

2020-07-26 03:04:26
字体:
来源:转载
供稿:网友

 下载地址: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;//放星星的背景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

使用时:

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表