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是 容易计算。

题外话:我是littleSun 从事iOS工作进两年,虽然计算机出身,但是依然不是很懂,在不断地学习中,希望能认识你 qq:693552568.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值