iOS評分(評價(jià))星星圖打分功能
下載地址:https://github.com/littleSunZheng/StarGradeView

起因:項(xiàng)目中往往涉及到用戶的評分反饋,在我的“E中醫(yī)”項(xiàng)目中,涉及到幾處。對此我參考了美團(tuán)和滴滴的評分圖。
評分視圖分為展示和評分兩種:
(1)多數(shù)情況下“評分功能”是要簡介易用的。那種 星星準(zhǔn)確顯示百分比(分?jǐn)?shù))的功能反而不好用,這種多數(shù)用在顯示評分上,不需要用戶去點(diǎn)擊,因?yàn)橛脩粝朐u價(jià)“9.8分”,手指頭是不能準(zhǔn)確點(diǎn)擊的。但是顯示的時(shí)候你根據(jù)數(shù)據(jù)可以完美的顯示出來。實(shí)現(xiàn)原理就是兩圖片,一張是“灰色”星星五顆,一張是“金色”星星五顆。讓imageView的模式設(shè)置好(多余的照片不顯示)。按照比例將 上層 金色星星imageView的長調(diào)整好,星星比例就自然顯示好了。
(2)用戶操作打分的星星視圖:我這里做的就是打分的。實(shí)現(xiàn)原理很簡單,當(dāng)你操作其他軟件的功能時(shí)就能結(jié)合想到手勢。
上源碼:
//
// StarGradeView.h
// EcmCustomer
//
// Created by 鄭鵬 on 2016/11/4.
// Copyright © 2016年 張進(jìn). 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 和 想有幾個(gè)星星(取決于設(shè)計(jì) 5個(gè)常用 或者10個(gè) )
- (instancetype)initWithFrame:(CGRect)frame withtNumberOfPart:(NSInteger)num;
@end
//
// StarGradeView.m
// EcmCustomer
//
// Created by 鄭鵬 on 2016/11/4.
// Copyright © 2016年 張進(jìn). All rights reserved.
//
#import "StarGradeView.h"
@interface StarGradeView(){
UIView *_btnView;//放星星的背景view
UIView *_shouView;//放星星的背景view
CGFloat _height;//星星的高
NSInteger _btnNum;//按鈕的數(shù)量
NSInteger _index;//第幾個(gè)
}
@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;
}
//滑動(dòng)需要的。
- (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;
}
}
}
//滑動(dòng)需要的。
- (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;
}
}
}
//滑動(dòng)需要的。
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
if ([self.delegate respondsToSelector:@selector(didSelectedIndex:)]) {
[self.delegate didSelectedIndex:[NSString stringWithFormat:@"%ld",_index+1]];
}
}
//取到 手勢 在屏幕上點(diǎn)的 位置point
- (CGPoint)getTouchPoint:(NSSet<UITouch *>*)touches{
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:_shouView];
return point;
}
//如果點(diǎn)擊的范圍在 按鈕的區(qū)域
- (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
使用時(shí):
StarGradeView *view = [[StarGradeView alloc] initWithFrame:CGRectMake(0, 100, 375, 40) withtNumberOfPart:5];
view.delegate = self;
[self.view addSubview:view];
//并實(shí)現(xiàn)代理方法
- (void)didSelectedIndex:(NSString *)index{
NSLog(@"%@",index);
}
注釋:這里切圖時(shí)注意:只要一個(gè)星星,并且要求是 正方形 星星圖片有留白??创a就明白為什么要這么切圖。1是美觀 2是 容易計(jì)算。
以上所述是小編給大家介紹的iOS評分(評價(jià))星星圖打分功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
iOS中利用CAEmitterLayer實(shí)現(xiàn)粒子動(dòng)畫詳解
粒子效果應(yīng)該對現(xiàn)在很多人來說并不陌生,我們之前也分享了一些相關(guān)文章,下面這篇文章主要給大家介紹了關(guān)于iOS中利用CAEmitterLayer實(shí)現(xiàn)粒子動(dòng)畫的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友們下面來一起看看吧。2017-06-06
iOS App項(xiàng)目中引入SQLite數(shù)據(jù)庫的教程
SQLite是一個(gè)極輕的嵌入式數(shù)據(jù)庫,在應(yīng)用程序中捆綁使用可以更方便地幫助操控關(guān)系型數(shù)據(jù),這里我們就來看一下iOS App項(xiàng)目中引入SQLite數(shù)據(jù)庫的教程2016-06-06
iOS App的設(shè)計(jì)模式開發(fā)中對State狀態(tài)模式的運(yùn)用
這篇文章主要介紹了iOS App的設(shè)計(jì)模式開發(fā)中對State狀態(tài)模式的運(yùn)用,示例代碼為傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-03-03
iOS左右滑動(dòng)標(biāo)簽頁導(dǎo)航的設(shè)計(jì)
這篇文章主要為大家詳細(xì)介紹了iOS左右滑動(dòng)標(biāo)簽頁導(dǎo)航的設(shè)計(jì)思路,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-06-06
iOS開發(fā)中的ViewController轉(zhuǎn)場切換效果實(shí)現(xiàn)簡介
這篇文章主要介紹了iOS開發(fā)中的ViewController轉(zhuǎn)場切換效果實(shí),主要針對iOS7以后新加入的API進(jìn)行講解,需要的朋友可以參考下2015-09-09
IOS開發(fā)中禁止NavigationController的向右滑動(dòng)返回
這篇文章主要介紹了IOS開發(fā)中禁止NavigationController的向右滑動(dòng)返回的相關(guān)資料,需要的朋友可以參考下2017-03-03

