iOS自定义实现星级评分功能控件

最近项目需要实现X宝，X东上面的的收货物品的星级评价功能，首先当然是搜索大法了，找了两三个初看还可以的，体验了下，结果就是用是能用，但是有些细节上还是不太符合自己的需求。我这要达到的功能是：
1、能实现整颗星、半颗星的显示。需求要求点评的时候是只能选择整颗星，展示的时候可以显示到半颗星。
2、能拖动、能点击显示。
3、其他细节。
最终还是在WTKStarView的参考上自己实现了一个星级评分。

这里说下本控件的功能：
1、支持整颗星、半颗星的显示，包括2.3、3.6这样的。
2、支持拖动、点击。
3、支持设置一颗星星的Size，星星之间的间距。
4、支持先初始化，在传Frame布局。

下面上代码示范：
先看看整体的代码.h

#import <UIKit/UIKit.h>

@class ABStarLevelView;

typedef NS_ENUM(NSInteger, ABStarLevelType) {
    ABStarLevelTypeFull = 0, //满星
    ABStarLevelTypeHalf, //半星
};

@interface ABStarLevelStyle : NSObject
/**
 类型（默认是满星）
 */
@property (nonatomic, assign) ABStarLevelType starType;
/**
 亮起的星星图片名字
 */
@property (nonatomic, copy) NSString *highlightStarImageName;
/**
 暗的星星图片名字
 */
@property (nonatomic, copy) NSString *normalStarImageName;
/**
 星星大小（默认CGSizeZero）
 */
@property (nonatomic, assign) CGSize starSize;
/**
 星星间距（默认0，即根据给的宽度来划分）
 */
@property (nonatomic, assign) CGFloat starInterval;

@end

@protocol ABStarLevelViewDelegate <NSObject>
@optional
- (void)starLevelView:(ABStarLevelView *)starLevelView currentStarLevel:(CGFloat)currentStarLevel;
@end

@interface ABStarLevelView : UIView

/**
 星级 0-5（默认0星）
 */
@property (nonatomic, assign) CGFloat starLevel;
/**
 是否允许交互（拖动、点击）
 */
@property (nonatomic, assign) BOOL touchEnabled;
/**
 当前设置的星级
 */
@property (nonatomic, assign, readonly) CGFloat currentSatrLevel;

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

/**
 初始化StarLevel

 @param style 允许传nil（传nil，内部默认初始化一个ABStarLevelStyle）
 @return ABStarLevelView
 */
- (instancetype)initWithStyle:(ABStarLevelStyle *)style;

/**
 初始化StarLevel

 @param frame 设置大小
 @param style 允许传nil（传nil，内部默认初始化一个ABStarLevelStyle）
 @return ABStarLevelView
 */
- (instancetype)initWithFrame:(CGRect)frame style:(ABStarLevelStyle *)style;

@end

再来看看使用例子

    //默认样式
    ABStarLevelStyle *style = [[ABStarLevelStyle alloc]init];
    
    ABStarLevelView *starLevelView = [[ABStarLevelView alloc]initWithFrame:CGRectMake(30, 250, 210, 30) style:style];
    starLevelView.delegate = self;
    starLevelView.backgroundColor = [UIColor greenColor];
    starLevelView.touchEnabled = YES;
    [self.view addSubview:starLevelView];
    self.starLevelView = starLevelView;
    
    //设置星星大小，间距
    ABStarLevelStyle *style2 = [[ABStarLevelStyle alloc]init];
    style2.starType = ABStarLevelTypeFull;//ABStarLevelTypeHalf（半星）
    style2.starSize = CGSizeMake(30, 30);
    style2.starInterval = 15;
    
    ABStarLevelView *starLevelView2 = [[ABStarLevelView alloc]initWithFrame:CGRectMake(30, 350, 210, 30) style:style2];
    starLevelView2.delegate = self;
    starLevelView2.backgroundColor = [UIColor greenColor];
    starLevelView2.touchEnabled = YES;
    [self.view addSubview:starLevelView2];

-(void)starLevelView:(ABStarLevelView *)starLevelView currentStarLevel:(CGFloat)currentStarLevel
{
    NSLog(@"FFFFF === %f",currentStarLevel);
}

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    NSLog(@"currentSatrLevel == %f",self.starLevelView.currentSatrLevel);
}

最后贴上.m文件

#import "ABStarLevelView.h"

#define STAR_NUM 5

@implementation ABStarLevelStyle

- (instancetype)init
{
    self = [super init];
    if (self) {
        self.starType = ABStarLevelTypeFull;
        self.starInterval = 0;
        self.starSize = CGSizeZero;
        self.normalStarImageName = @"start_normal";
        self.highlightStarImageName = @"start_highlight";
    }
    return self;
}

@end


@interface ABStarLevelView ()

@property (nonatomic, strong) ABStarLevelStyle *style;

@property (nonatomic, strong) NSMutableArray *frontStars;

@property (nonatomic, strong) NSMutableArray *backStars;

@property (nonatomic, strong) UIView *frontView;

@property (nonatomic, strong) UIView *backView;

@property (nonatomic, assign) CGFloat starWidth;

@property (nonatomic, assign) CGFloat starHeight;

@end

@implementation ABStarLevelView

-(NSMutableArray *)frontStars
{
    if (_frontStars == nil) {
        _frontStars = [NSMutableArray arrayWithCapacity:STAR_NUM];
    }
    return _frontStars;
}

-(NSMutableArray *)backStars
{
    if (_backStars == nil) {
        _backStars = [NSMutableArray arrayWithCapacity:STAR_NUM];
    }
    return _backStars;
}

- (instancetype)initWithStyle:(ABStarLevelStyle *)style
{
    self = [super init];
    if (self) {
        if (style == nil) {
            style = [[ABStarLevelStyle alloc]init];
        }
        self.style = style;
        [self addTheView];
    }
    return self;
}

- (instancetype)initWithFrame:(CGRect)frame style:(ABStarLevelStyle *)style
{
    self = [super initWithFrame:frame];
    if (self) {
        if (style == nil) {
            style = [[ABStarLevelStyle alloc]init];
        }
        self.style = style;
        [self addTheView];
    }
    return self;
}

- (void)addTheView
{
    self.touchEnabled = NO;
    if (self.style.starType == ABStarLevelTypeFull) {
        for (NSInteger i = 0; i < STAR_NUM; i ++) {
            UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:self.style.highlightStarImageName]];
            [self addSubview:imageView];
            [self.frontStars addObject:imageView];
        }
    }
    else {
        self.backView = [self creatViewWithImageName:self.style.normalStarImageName front:NO];
        [self addSubview:self.backView];
        self.frontView = [self creatViewWithImageName:self.style.highlightStarImageName front:YES];
        [self addSubview:self.frontView];
    }
}

- (UIView *)creatViewWithImageName:(NSString *)imageName front:(BOOL)front
{
    UIView *view = [[UIView alloc]init];
    view.layer.masksToBounds = YES;
    view.backgroundColor = [UIColor clearColor];
    for (NSInteger i = 0; i < STAR_NUM; i ++) {
        UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:imageName]];
        imageView.contentMode = UIViewContentModeScaleAspectFit;
        [view addSubview:imageView];
        front ? [self.frontStars addObject:imageView] : [self.backStars addObject:imageView];
    }
    return view;
}

-(void)layoutSubviews
{
    [super layoutSubviews];

    CGFloat starWidth = 0;
    CGFloat starHeight = 0;
    
    CGFloat parentViewWidth = self.frame.size.width;
    CGFloat parentViewHeight = self.frame.size.height;
    
    if (self.style.starSize.width == 0 || self.style.starSize.width > parentViewWidth / 5.0) {
        starWidth = parentViewWidth / 8.0;
        if (starWidth > parentViewHeight) {
            starWidth = parentViewHeight;
        }
        starHeight = starWidth;
    }
    else {
        starWidth = self.style.starSize.width;
        if (starWidth > parentViewHeight) {
            starWidth = parentViewHeight;
        }
        starHeight = self.style.starSize.height > parentViewHeight ? starWidth : self.style.starSize.height;
    }
    
    if (self.style.starInterval <= 0) {
        self.style.starInterval = (parentViewWidth - starWidth * 5.0) / 4.0;
    }
    
    CGFloat starViewY = (parentViewHeight - starHeight) / 2;
    
    self.starWidth = starWidth;
    self.starHeight = starHeight;
    
    if (self.style.starType == ABStarLevelTypeFull) {
        for (NSInteger i = 0; i < STAR_NUM; i ++) {
            UIImageView *imageView = self.frontStars[i];
            imageView.frame = CGRectMake(i * (starWidth + self.style.starInterval), starViewY, starWidth, starHeight);
        }
    }
    else {
        self.frontView.frame = self.bounds;
        self.backView.frame = self.bounds;
        for (NSInteger i = 0; i < STAR_NUM; i ++) {
            CGRect frame = CGRectMake(i * (starWidth + self.style.starInterval), starViewY, starWidth, starHeight);
            
            UIImageView *fontImageView = self.frontStars[i];
            fontImageView.frame = frame;
            
            UIImageView *backImageView = self.backStars[i];
            backImageView.frame = frame;
        }
    }
    
    //给个初始值
    self.starLevel = self.starLevel;
}

-(void)setStarLevel:(CGFloat)starLevel
{
    starLevel = MAX(0, MIN(5.0, starLevel));
    _starLevel = starLevel;
    
    if (self.style.starType == ABStarLevelTypeFull) {
        [self.frontStars enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
            UIImageView *imageView = obj;
            if (idx + 1 <= starLevel) {
                imageView.image = [UIImage imageNamed:self.style.highlightStarImageName];
            }
            else {
                imageView.image = [UIImage imageNamed:self.style.normalStarImageName];
            }
        }];
    }
    else {
        int value = starLevel;
        CGFloat width = (value) * (self.starWidth + self.style.starInterval) + (starLevel - value) * self.starWidth;
        self.frontView.frame = CGRectMake(0, 0, width, self.frame.size.height);
    }
    
    _currentSatrLevel = starLevel;
}

#pragma mark - touch
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    if (!self.touchEnabled) {
        return;
    }
    
    if (self.style.starType == ABStarLevelTypeFull) {
        [self resetFullStar:touches];
    }
    else {
        [self resetHalfStar:touches];
    }
}

-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    if (!self.touchEnabled) {
        return;
    }
    
    if (self.style.starType == ABStarLevelTypeFull) {
        [self resetFullStar:touches];
    }
    else {
        [self resetHalfStar:touches];
    }
}

- (void)resetFullStar:(NSSet<UITouch *> *)touches
{
    UITouch *touch = [touches anyObject];
    CGPoint touchPoint = [touch locationInView:self];
    
    CGFloat starLevel = 0;
    
    for (NSInteger i = 0; i < STAR_NUM; i++) {
        UIImageView *imageView = self.frontStars[i];
        if (touchPoint.x >= 0 && touchPoint.x < self.frame.size.width && touchPoint.y >= 0 && touchPoint.y < self.frame.size.height) { //触摸点在星星上
            if (imageView.frame.origin.x > touchPoint.x) {
                imageView.image = [UIImage imageNamed:self.style.normalStarImageName];
            }
            else {
                imageView.image = [UIImage imageNamed:self.style.highlightStarImageName];
                starLevel ++;
            }
        }
    }
    
    _currentSatrLevel = starLevel;
    if (self.delegate && [self.delegate respondsToSelector:@selector(starLevelView:currentStarLevel:)]) {
        [self.delegate starLevelView:self currentStarLevel:starLevel];
    }
}

- (void)resetHalfStar:(NSSet<UITouch *> *)touches
{
    UITouch *touch = [touches anyObject];
    CGPoint touchPoint = [touch locationInView:self];
    
    CGPoint starPoint;
    CGFloat starLevel = 0;
    int flag = 0;//判断是否已经调用delegate
    
    if (touchPoint.x >= 0 && touchPoint.x < self.frame.size.width && touchPoint.y >= 0 && touchPoint.y < self.frame.size.height) {
        for (NSInteger i = 0; i < STAR_NUM; i ++) {
            UIImageView *imageView = self.frontStars[i];
            starPoint = [touch locationInView:imageView];
            if (starPoint.x >= 0 && starPoint.x <= self.starWidth) { //触摸点在星星上
                CGFloat value = starPoint.x / self.starWidth;
                self.frontView.frame = CGRectMake(0, 0, imageView.frame.origin.x + value * self.starWidth, self.frame.size.height);
                
                _currentSatrLevel = i + value;
                if (flag == 0 && self.delegate && [self.delegate respondsToSelector:@selector(starLevelView:currentStarLevel:)]) {
                    [self.delegate starLevelView:self currentStarLevel:i + value];
                }
                flag ++;
            }
            else {
                self.frontView.frame = CGRectMake(0, 0, touchPoint.x, self.frame.size.height);
                if (touchPoint.x > imageView.frame.origin.x) {
                    starLevel = i + 1;
                    _currentSatrLevel = starLevel;
                }
            }
        }
        if (flag == 0 && self.delegate && [self.delegate respondsToSelector:@selector(starLevelView:currentStarLevel:)]) {
            [self.delegate starLevelView:self currentStarLevel:starLevel];
        }
    }
}

@end

基本上就这样，感觉还有很多细节可以优化！