iOS开发-自定制星级评价StarView

Star.png

前言：众所周知，在大多数的评价界面都会包含一个星级的选择，有时还会显示不同星级对应的评分内容。今天，小编就来给大家简单介绍一下如何来封装一个这样看似简单，实则也简单的控件，以方便以后的使用。

原理：采用代理传值的方式来获取当前选择的星级，通过更改定制view的userInteractionEnabled属性来决定是可选择的星级view，还是只做展示的星级view。

首先，创建一个继承自UIView的类如下：

#import <UIKit/UIKit.h>

@protocol StarViewDelegate;
@interface StarView : UIView

@property (nonatomic, assign) NSInteger starValue;
@property (nonatomic, weak) id<StarViewDelegate> delegate;
@end
@protocol StarViewDelegate <NSObject>

@optional
- (void)starView:(StarView *)starView didSelectScore:(NSInteger)score;

@end

由于，我们要定制的这个view既可以点击，也可以只做展示当前星级，所以在这里外漏一个代表星级的属性starValue，取值范围为1~5，用于设置初始化的星级，默认是最高级。
同时，这里还定义了代理方法，该方法含有当前选择的星星级别，范围为1~5.

接下来我们来看看.m中是如何来实现的：

#import "StarView.h"

@interface StarView ()

@property (nonatomic, strong) UILabel * lab_title;
@property (nonatomic, strong) UIView * view_star;

@property (nonatomic, strong) NSMutableArray * dataArr;
@end
@implementation StarView

- (instancetype)initWithFrame:(CGRect)frame {
    
    self = [super initWithFrame:frame];
    if (self) {
        
        self.backgroundColor = Color_White;
        _starValue = 5;
        [self addSubviews];
    }
    return self;
}

#pragma mark - add subviews

- (void)addSubviews {
    
    [self addSubview:self.view_star];
    [self addSubview:self.lab_title];
}

#pragma mark - make constraints

- (void)layoutSubviews {
    [super layoutSubviews];
    
    [_lab_title mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.width.mas_equalTo(@65);
        make.right.mas_equalTo(@0);
        make.top.mas_equalTo(@0);
        make.bottom.mas_equalTo(@0);
    }];
    [_view_star mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.top.mas_equalTo(@0);
        make.left.mas_equalTo(@0);
        make.bottom.mas_equalTo(@0);
        make.right.mas_equalTo(_lab_title.mas_left).with.offset(-10);
    }];
    
    float size;
    float interval;
    float heigth = self.bounds.size.height;
    
    if (self.userInteractionEnabled) {
        
        size = 25;
        interval = 10;
    } else {
        
        size = 13;
        interval = 5;
        _lab_title.hidden = YES;
    }
    
    for (int i = 0; i < 5; i++) {
        
        UIImageView * imageView = [[UIImageView alloc] initWithFrame:CGRectMake((interval + size) * i, (heigth - size) / 2, size, size)];
        imageView.contentMode = UIViewContentModeScaleAspectFit;
        imageView.tag = 2017 + i + 1;
        imageView.userInteractionEnabled = YES;
        if (i > _starValue - 1) {
            
            imageView.image = [UIImage imageNamed:@"star_normal"];
        } else {
            
            imageView.image = [UIImage imageNamed:@"star_selected"];
        }
        UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapStar:)];
        [imageView addGestureRecognizer:tap];
        [_view_star addSubview:imageView];
    }
    _lab_title.text = self.dataArr[_starValue - 1];
}

#pragma mark - tap event

- (void)tapStar:(UITapGestureRecognizer *)tap {
    
    UIImageView * tapIV = (UIImageView *)tap.view;
    _lab_title.text = self.dataArr[tapIV.tag - 2017 - 1];
    
    for (UIView * view in _view_star.subviews) {
        
        if ([view isKindOfClass:[UIImageView class]]) {
            
            UIImageView * imageView = (UIImageView *)view;
            
            if (imageView.tag > tapIV.tag) {
                
                imageView.image = [UIImage imageNamed:@"star_normal"];
            } else {
                
                imageView.image = [UIImage imageNamed:@"star_selected"];
            }
        }
    }
    
    if ([self.delegate respondsToSelector:@selector(starView:didSelectScore:)]) {
        
        [self.delegate starView:self didSelectScore:tapIV.tag - 2017];
    }
}

#pragma mark - setter and getter

- (UILabel *)lab_title {
    
    if (!_lab_title) {
        
        _lab_title = [[UILabel alloc] init];
        _lab_title.font = [UIFont systemFontOfSize:14];
        _lab_title.textAlignment = NSTextAlignmentRight;
    }
    return _lab_title;
}

- (UIView *)view_star {
    
    if (!_view_star) {
        
        _view_star = [[UIView alloc] init];
        _view_star.backgroundColor = [UIColor whiteColor];
    }
    return _view_star;
}

- (NSMutableArray *)dataArr {
    
    if (!_dataArr) {
        
        _dataArr = [NSMutableArray arrayWithArray:@[@"极差", @"较差", @"一般", @"满意", @"非常满意"]];
    }
    return _dataArr;
}
@end

这里定义了一个数组来存储不同的星级对应的评价内容，大家可以根据自己的需求进行更改。
代码非常简单，主要就是在layoutSubviews方法中进行布局添加星星图片，这样可以避免该定制view的约束改变时，上边的控件的约束没有改变的情况。
通过userInteractionEnabled来判断当前视图是展示，还是做点击两种不同的展示方式。当该属性未设置，即为YES时，默认为可点击情况，可以点击星星选择级别，并且这时展示的星星比较大；当该属性设置为NO时，所有的星星不可点击，隐藏等级内容，只做星星等级展示，此时星星比较小。这个星星的大小，大家可以根据自己的需求进行相应的修改。

下面来给大家看一下效果图：

可点击的星星.gif
不可点击的星星.png

这个类不是很复杂，所有的代码都已经在这里了，所以就没有单独的写demo，如果大家有哪里不清楚的地方，可以随时询问小编，小编一定会在看到的第一时间给你回复。

最后，希望此文能够帮助到有需要的猿友们，愿我们能够共同成长进步，在开发的道路上越走越远！谢谢！