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，如果大家有哪里不清楚的地方，可以随时询问小编，小编一定会在看到的第一时间给你回复。
最后，希望此文能够帮助到有需要的猿友们，愿我们能够共同成长进步，在开发的道路上越走越远！谢谢！
