就是这么一种常见自定义控件:
5星好评3颗星半
思路:
- 自定义一个
StarView
- 先依次放5个灰色星
- 再放一个view(裁剪view),作为5颗黄色星的父view
- 在裁剪view上依次放5颗黄色星
- 根据传入的值,改变裁剪view的宽,完成星级展示
参考代码:
- .h文件
/** 快递员星级 */
@property (nonatomic,assign) CGFloat star;
- .m文件
@interface StarView (){
/** 5颗黄色星的父view,用来裁剪5颗黄色星 */
UIView *_clipView;
}
@end
@implementation StarView
#pragma mark - 构造方法
- (instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
// UI搭建
[self setUpUI];
}
return self;
}
#pragma mark - UI搭建
/** UI搭建 */
- (void)setUpUI{
// 创建下面的5个灰色星星
UIView *lastView = nil;
for (int i = 0; i < 5; i ++) {
UIImageView *grayImageView = [[UIImageView alloc]init];
[self addSubview:grayImageView];
grayImageView.image = [UIImage imageNamed:@"non_star"];
[grayImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(self);
make.bottom.mas_equalTo(self);
make.width.mas_offset(14);
//make.right.mas_equalTo(grayImageView.mas_left).mas_offset(14);
if (lastView) {
make.left.mas_equalTo(lastView.mas_right);
}else{
make.left.mas_equalTo(self);
}
}];
lastView = grayImageView;
}
[self mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.mas_equalTo(lastView);
}];
// 裁剪黄色星的view
_clipView = [[UIView alloc]init];
[self addSubview:_clipView];
_clipView.clipsToBounds = YES; // 裁剪开启
[_clipView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(self);
make.left.mas_equalTo(self);
make.bottom.mas_equalTo(self);
make.width.mas_equalTo(self).multipliedBy(1);
}];
// 创建5个黄色星
UIView *lastYellowView = nil;
for (int i = 0; i < 5; i ++) {
UIImageView *yellowImageView = [[UIImageView alloc]init];;
[_clipView addSubview:yellowImageView];
yellowImageView.image = [UIImage imageNamed:@"full_star"];
[yellowImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(self);
make.bottom.mas_equalTo(self);
make.width.mas_equalTo(14);
if (lastYellowView) {
make.left.mas_equalTo(lastYellowView.mas_right);
}else{
make.left.mas_equalTo(self);
}
}];
lastYellowView = yellowImageView;
}
}
#pragma - 设置星级
/** 设置星级 */
- (void)setStar:(CGFloat)star{
_star = star;
// 计算黄星所占百分比
CGFloat percentage = _star / 5.0;
CGFloat offset = (1 - percentage) * (14 * 5);
[_clipView mas_updateConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(self.mas_width).mas_offset(-offset);
}];
}
网友评论