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

 更新时间:2016年11月23日 10:35:16   作者:littleSun_zheng  
这篇文章主要介绍了iOS评分(评价)星星图打分功能,评分视图分为展示和评分两种,具体详情大家可以通过本文详细学习

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

相关文章

  • IOS Bundle详细介绍及使用方法

    IOS Bundle详细介绍及使用方法

    这篇文章主要介绍了IOS Bundle详细介绍及使用方法的相关资料,需要的朋友可以参考下
    2017-04-04
  • IOS 改变键盘颜色代码

    IOS 改变键盘颜色代码

    这篇文章主要介绍了IOS 改变键盘颜色代码,十分的简单实用,有需要的小伙伴可以参考下。
    2015-05-05
  • ios wkwebview离线化加载h5资源解决方案

    ios wkwebview离线化加载h5资源解决方案

    本篇文章主要介绍了ios wkwebview离线化加载h5资源解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • iOS调用高德地图SDK的完整步骤

    iOS调用高德地图SDK的完整步骤

    高德LBS开放平台将高德最专业的定位、地图、搜索、导航等能力,以API、SDK等形式向广大开发者免费开放,下面这篇文章主要给大家介绍了关于iOS调用高德地图SDK的完整步骤,需要的朋友可以参考下
    2021-11-11
  • iOS开发之视图切换

    iOS开发之视图切换

    在iOS开发中视图的切换是很频繁的,独立的视图应用在实际开发过程中并不常见,除非你的应用足够简单。在iOS开发中常用的视图切换有三种,今天我们将一一介绍,希望大家能够喜欢。
    2016-04-04
  • iOS app中无网络页面的添加方法详解

    iOS app中无网络页面的添加方法详解

    这篇文章主要给大家介绍了关于iOS app中无网络页面的添加方法的相关资料,通过文中提供的方法可以很方便的给大家进行提供一个提醒,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2018-01-01
  • IOS10 隐私权限设置实例详解

    IOS10 隐私权限设置实例详解

    这篇文章主要介绍了IOS10 隐私权限设置实例详解的相关资料,本文主要是介绍,在使用相机功能是遇到错误,这里说明该如何解决,需要的朋友可以参考下
    2016-12-12
  • IOS 网络请求中设置cookie

    IOS 网络请求中设置cookie

    这篇文章主要介绍了IOS 网络请求中设置cookie的相关资料,需要的朋友可以参考下
    2017-06-06
  • iOS实现应用内切换本地化语言的方法实例

    iOS实现应用内切换本地化语言的方法实例

    网络上关于iOS国际化的文章很多,但基本上都是基于跟随系统语言的国际化,而这篇文章主要给大家介绍了关于利用iOS实现应用内切换本地化语言的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考。
    2017-12-12
  • 解决iOS验证码显示在左边问题

    解决iOS验证码显示在左边问题

    这篇文章主要介绍了iOS验证码显示在左边问题,本文给大家分享解决思路通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03

最新评论