【iOS】星星评分控件HGDQStars

项目中需要使用星星评分，一种模式是只显示分数，一种是还可以用户评分。在空闲之余就把原来的控件加了一些自己的改造。弄出来了现在的这星星评分控件。

首先看看控件的使用：

//
//  ViewController.m
//  HGDQStars
//
//  Created by zhuming on 16/2/22.
//  Copyright © 2016年 zhuming. All rights reserved.
//

#import "ViewController.h"
#import "HGDQStars.h"

@interface ViewController ()<StarRatingViewDelegate>

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];

HGDQStars *view = [[HGDQStars alloc] initWithFrame:CGRectMake(100, 100, 100, 20) currentScore:3 delegate:self];
[self.view addSubview:view];

// Do any additional setup after loading the view, typically from a nib.
}

- (void)starRatingView:(HGDQStars *)view score:(CGFloat)score{
NSLog(@"score = %f",score);
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end

使用比之前的简单了一点。

效果图

控件的实现原理：

1.准备，灰色和红色的两种切图

2.制作一个底部的灰色全五星的视图和一个红色红色五星的视图。

/**
*  生成基本控件
*
*  @param imageName 图片名
*
*  @return 控件
*/
- (HGDQStars *)initStarViewWithImageName:(NSString *)imageName{
CGRect frame = self.bounds;
HGDQStars *view = [[HGDQStars alloc] init];
view.frame = frame;
view.clipsToBounds = YES;
for (int i = 0; i < self.maxScore; i ++)
{
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:imageName]];
imageView.frame = CGRectMake(i * frame.size.width / self.maxScore, 0, frame.size.width / self.maxScore, frame.size.height);
[view addSubview:imageView];
}
return view;
}

把着两个基本视图都加在在HGDQStara上。

3.改变分数的实现

改变分时实际上是改变上面红色星星的frame的宽度

/**
*  改变分数
*
*  @param point 分数
*/
- (void)changeStarForegroundViewWithPoint:(CGPoint)point
{
if (point.x < 0)
{
point.x = 0;
}
else if (point.x > self.frame.size.width)
{
point.x = self.frame.size.width;
}

NSString * str = [NSString stringWithFormat:@"%0.2f",point.x / self.frame.size.width];
float score = [str floatValue];
point.x = score * self.frame.size.width;
self.fullStarsView.frame = CGRectMake(0, 0, point.x, self.frame.size.height);

if(self.delegate && [self.delegate respondsToSelector:@selector(starRatingView: score:)])
{
[self.delegate starRatingView:self score:score];
}
}

4.怎么设置初始分数呢？

也就是实现score的setter方法

/**
*  setter方法
*
*  @param score score description
*/
-(void) setScore:(CGFloat) score
{
float width = score/self.maxScore;

self.fullStarsView.frame = CGRectMake(0, 0, self.frame.size.width * width, self.frame.size.height);
}

在这里面也是个改变红色星星的frame的宽度值。

5.怎么实现滑动改变分数呢？

重写一下这个方法，

<span style="font-size:14px;">- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event</span>

在这个方法里面实现改变分值的动作

/**
*  触摸事件
*
*  @param touches touches description
*  @param event   event description
*/
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
self.fullStarsView.hidden = NO;

if (self.enable) {
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
CGRect rect = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
if(CGRectContainsPoint(rect,point))
{
[self changeStarForegroundViewWithPoint:point];
}
}
}

6.增加一个分数改变时的代理

- (void)starRatingView:(HGDQStars *)view score:(CGFloat)score

在公司不能上传文件，这里，贴上空间的全部代码，以后在弄到我的github上面去。

HGDQStars.m

//
//  HGDQStars.m
//  HGDQStars
//
//  Created by zhuming on 16/2/22.
//  Copyright © 2016年 zhuming. All rights reserved.
//

#import "HGDQStars.h"

@interface HGDQStars ()
/**
*  高亮星星
*/
@property (nonatomic,strong)UIView *fullStarsView;
/**
*  灰色星星
*/
@property (nonatomic,strong)UIView *emptyStarsView;
/**
*  星星控件的满分值
*/
@property (nonatomic,assign)CGFloat maxScore;
/**
*  是否可以滑动评分  YES:可以  NO:不可以
*/
@property (nonatomic, assign) BOOL enable;
/**
*  设置分值
*/
@property (nonatomic,assign)CGFloat score;

@end

@implementation HGDQStars

/**
*  重写父类的init方法
*
*  @param frame                  星星控件的frame
*  @param currentScore           当前的分值
*  @param starRatingViewDelegate 代理
*
*  @return 星星控件
*/
- (instancetype)initWithFrame:(CGRect)frame currentScore:(CGFloat)currentScore delegate:(id)starRatingViewDelegate{
self = [super initWithFrame:frame];
if (self) {
[self initView];
self.score = currentScore; // 星星控件的当前分值
if (starRatingViewDelegate) { // 是否关联带来
self.delegate = starRatingViewDelegate;
self.enable = YES; // 是否允许滑动
}
}
return self;
}

/**
*  初始化视图
*/
- (void)initView{
self.maxScore = 5;
self.fullStarsView = [self initStarViewWithImageName:@"icon_fullstar"];
self.emptyStarsView = [self initStarViewWithImageName:@"icon_emptystar"];

[self addSubview:self.emptyStarsView];
[self addSubview:self.fullStarsView];
}

/**
*  生成基本控件
*
*  @param imageName 图片名
*
*  @return 控件
*/
- (HGDQStars *)initStarViewWithImageName:(NSString *)imageName{
CGRect frame = self.bounds;
HGDQStars *view = [[HGDQStars alloc] init];
view.frame = frame;
view.clipsToBounds = YES;
for (int i = 0; i < self.maxScore; i ++)
{
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:imageName]];
imageView.frame = CGRectMake(i * frame.size.width / self.maxScore, 0, frame.size.width / self.maxScore, frame.size.height);
[view addSubview:imageView];
}
return view;
}
/**
*  触摸事件
*
*  @param touches touches description
*  @param event   event description
*/
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
self.fullStarsView.hidden = NO;

if (self.enable) {
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
CGRect rect = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
if(CGRectContainsPoint(rect,point))
{
[self changeStarForegroundViewWithPoint:point];
}
}
}
/**
*  改变分数
*
*  @param point 分数
*/
- (void)changeStarForegroundViewWithPoint:(CGPoint)point
{
if (point.x < 0)
{
point.x = 0;
}
else if (point.x > self.frame.size.width)
{
point.x = self.frame.size.width;
}

NSString * str = [NSString stringWithFormat:@"%0.2f",point.x / self.frame.size.width];
float score = [str floatValue];
point.x = score * self.frame.size.width;
self.fullStarsView.frame = CGRectMake(0, 0, point.x, self.frame.size.height);

if(self.delegate && [self.delegate respondsToSelector:@selector(starRatingView: score:)])
{
[self.delegate starRatingView:self score:score];
}
}/**
*  setter方法
*
*  @param score score description
*/
-(void) setScore:(CGFloat) score
{
float width = score/self.maxScore;

self.fullStarsView.frame = CGRectMake(0, 0, self.frame.size.width * width, self.frame.size.height);
}

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
}
*/

@end

HGDQStars.h

//
//  HGDQStars.h
//  HGDQStars
//
//  Created by zhuming on 16/2/22.
//  Copyright © 2016年 zhuming. All rights reserved.
//

#import <UIKit/UIKit.h>
@class HGDQStars;

@protocol StarRatingViewDelegate <NSObject>

@optional
/**
*  代理方法
*
*  @param view  星星视图
*  @param score 当前分值
*/
-(void)starRatingView:(HGDQStars *)view score:(CGFloat)score;

@end

@interface HGDQStars : UIView

/**
*  重写父类的init方法
*
*  @param frame                  星星控件的frame
*  @param currentScore           当前的分值
*  @param starRatingViewDelegate 代理
*
*  @return 星星控件
*/
- (instancetype)initWithFrame:(CGRect)frame currentScore:(CGFloat)currentScore delegate:(id)starRatingViewDelegate;

@property (nonatomic, weak) id <StarRatingViewDelegate> delegate;

@end