IOS-一步一步教你自定义评分星级条RatingBar

由于项目的需要，需要设计能评分、能显示评分数据的星级评分条，但是IOS上好像没有这个控件，Android是有RatingBar这个控件的（又发现一个IOS不如Android好的

），那就只能自定义了，在网上也找了相关的例子，发现都是很老的版本了，非ARC版本的，而且不能评分成0分，还没有indicator效果，于是我自己重新写了一个控件，命名为RatingBar

先上一张我们做之后的效果图：



第一步：

写一个继承自UIView的RatingBar子控件

第二步：

声明一个RatingBar修改评分的代理，就是评分修改后把最新的评分告诉对方

第三步：

在.h文件中声明一些要暴漏给别人调用的方法

第四步：

在.m文件中实现评分条

具体代码如下：

RatingBar.h文件代码

//

// RatingBar.h

//

// Created by HailongHan on 15/1/1.

// Copyright (c) 2015年 cubead. All rights reserved.

//

#import <UIKit/UIKit.h>

/**

* 星级评分条代理

*/

@protocol RatingBarDelegate <NSObject>

/**

* 评分改变

*

* @param newRating 新的值

*/

- (void)ratingChanged:(float)newRating;

@end

@interface RatingBar : UIView

/**

* 初始化设置未选中图片、半选中图片、全选中图片，以及评分值改变的代理（可以用

* Block）实现

*

* @param deselectedName 未选中图片名称

* @param halfSelectedName 半选中图片名称

* @param fullSelectedName 全选中图片名称

* @param delegate 代理

*/

- (void)setImageDeselected:(NSString *)deselectedName halfSelected:(NSString *)halfSelectedName fullSelected:(NSString *)fullSelectedName andDelegate:(id<RatingBarDelegate>)delegate;

/**

* 设置评分值

*

* @param rating 评分值

*/

- (void)displayRating:(float)rating;

/**

* 获取当前的评分值

*

* @return 评分值

*/

- (float)rating;

/**

* 是否是指示器，如果是指示器，就不能滑动了，只显示结果，不是指示器的话就能滑动修改值

* 默认为NO

*/

@property (nonatomic,assign) BOOL isIndicator;

@end

代码中注释的很详细了，这我就不多解释了，看注释吧，真看不懂，阿门，我也救不了你！废话不多说，再贴RatingBar.m文件代码：

// RatingBar.m

//

// Created by HailongHan on 15/1/1.

// Copyright (c) 2015年 cubead. All rights reserved.

//

#import "RatingBar.h"

@interface RatingBar (){

float starRating;

float lastRating;



float height;

float width;



UIImage *unSelectedImage;

UIImage *halfSelectedImage;

UIImage *fullSelectedImage;

}

@property (nonatomic,strong) UIImageView *s1;

@property (nonatomic,strong) UIImageView *s2;

@property (nonatomic,strong) UIImageView *s3;

@property (nonatomic,strong) UIImageView *s4;

@property (nonatomic,strong) UIImageView *s5;

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

@end

@implementation RatingBar

/**

* 初始化设置未选中图片、半选中图片、全选中图片，以及评分值改变的代理（可以用

* Block）实现

*

* @param deselectedName 未选中图片名称

* @param halfSelectedName 半选中图片名称

* @param fullSelectedName 全选中图片名称

* @param delegate 代理

*/

-(void)setImageDeselected:(NSString *)deselectedName halfSelected:(NSString *)halfSelectedName fullSelected:(NSString *)fullSelectedName andDelegate:(id<RatingBarDelegate>)delegate{



self.delegate = delegate;



unSelectedImage = [UIImage imageNamed:deselectedName];

halfSelectedImage = halfSelectedName == nil ? unSelectedImage : [UIImage imageNamed:halfSelectedName];

fullSelectedImage = [UIImage imageNamed:fullSelectedName];



height = 0.0,width = 0.0;



if (height < [fullSelectedImage size].height) {

height = [fullSelectedImage size].height;

}

if (height < [halfSelectedImage size].height) {

height = [halfSelectedImage size].height;

}

if (height < [unSelectedImage size].height) {

height = [unSelectedImage size].height;

}

if (width < [fullSelectedImage size].width) {

width = [fullSelectedImage size].width;

}

if (width < [halfSelectedImage size].width) {

width = [halfSelectedImage size].width;

}

if (width < [unSelectedImage size].width) {

width = [unSelectedImage size].width;

}



starRating = 0.0;

lastRating = 0.0;



_s1 = [[UIImageView alloc] initWithImage:unSelectedImage];

_s2 = [[UIImageView alloc] initWithImage:unSelectedImage];

_s3 = [[UIImageView alloc] initWithImage:unSelectedImage];

_s4 = [[UIImageView alloc] initWithImage:unSelectedImage];

_s5 = [[UIImageView alloc] initWithImage:unSelectedImage];



[_s1 setFrame:CGRectMake(0, 0, width, height)];

[_s2 setFrame:CGRectMake(width, 0, width, height)];

[_s3 setFrame:CGRectMake(2 * width, 0, width, height)];

[_s4 setFrame:CGRectMake(3 * width, 0, width, height)];

[_s5 setFrame:CGRectMake(4 * width, 0, width, height)];



[_s1 setUserInteractionEnabled:NO];

[_s2 setUserInteractionEnabled:NO];

[_s3 setUserInteractionEnabled:NO];

[_s4 setUserInteractionEnabled:NO];

[_s5 setUserInteractionEnabled:NO];



[self addSubview:_s1];

[self addSubview:_s2];

[self addSubview:_s3];

[self addSubview:_s4];

[self addSubview:_s5];



CGRect frame = [self frame];

frame.size.width = width * 5;

frame.size.height = height;

[self setFrame:frame];



}

/**

* 设置评分值

*

* @param rating 评分值

*/

-(void)displayRating:(float)rating{

[_s1 setImage:unSelectedImage];

[_s2 setImage:unSelectedImage];

[_s3 setImage:unSelectedImage];

[_s4 setImage:unSelectedImage];

[_s5 setImage:unSelectedImage];



if (rating >= 0.5) {

[_s1 setImage:halfSelectedImage];

}

if (rating >= 1) {

[_s1 setImage:fullSelectedImage];

}

if (rating >= 1.5) {

[_s2 setImage:halfSelectedImage];

}

if (rating >= 2) {

[_s2 setImage:fullSelectedImage];

}

if (rating >= 2.5) {

[_s3 setImage:halfSelectedImage];

}

if (rating >= 3) {

[_s3 setImage:fullSelectedImage];

}

if (rating >= 3.5) {

[_s4 setImage:halfSelectedImage];

}

if (rating >= 4) {

[_s4 setImage:fullSelectedImage];

}

if (rating >= 4.5) {

[_s5 setImage:halfSelectedImage];

}

if (rating >= 5) {

[_s5 setImage:fullSelectedImage];

}



starRating = rating;

lastRating = rating;

[_delegate ratingChanged:rating];

}

/**

* 获取当前的评分值

*

* @return 评分值

*/

-(float)rating{

return starRating;

}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

[super touchesBegan:touches withEvent:event];

}

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{

[super touchesEnded:touches withEvent:event];

}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{



if (self.isIndicator) {

return;

}



CGPoint point = [[touches anyObject] locationInView:self];

int newRating = (int) (point.x / width) + 1;

if (newRating > 5)

return;



if (point.x < 0) {

newRating = 0;

}



if (newRating != lastRating){

[self displayRating:newRating];

}

}

@end

将上面的.h和.m拷贝到项目中就可以直接用了，在viewController.m中调用代码如下：

- (void)viewDidLoad {

[super viewDidLoad];

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



RatingBar *ratingBar = [[RatingBar alloc] init];

ratingBar.frame = CGRectMake(100, 100, 200, 50);



[self.view addSubview:ratingBar];

ratingBar.isIndicator = YES;//指示器，就不能滑动了，只显示评分结果

[ratingBar setImageDeselected:@"ratingbar_unselected" halfSelected:nil fullSelected:@"ratingbar_selected" andDelegate:self];

}

好了，自定义控件就结束了，谢谢大家！