星星覆盖效果

星星效果.png

• 原理：
  首先灰色星星和黄色星星都是一个，怎么做到五个的呢！用一个视图作为父视图然后用平铺。黄色视图和灰色视图大小一样。然后根据评分计算黄色宽度的大小，就实现了这样一个假象

源代码

#import "WXStar.h"

@interface WXStar ()

/** 灰色视图 */
@property (nonatomic, weak) UIView *grayView;
/** 黄色视图 */
@property (nonatomic, weak) UIView *yellowView;

@end

@implementation WXStar

- (void)awakeFromNib {
    
    // 创建星星
    [self createStar];
    
}

- (void)createStar {
    
    // 灰色图片
    UIImage *grayImage = [UIImage imageNamed:@"gray"];
    // 黄色图片
    UIImage *yellowImage = [UIImage imageNamed:@"yellow"];
    
    // 创建灰色视图
    UIView *grayView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, grayImage.size.width * 5, grayImage.size.height)];
  
    grayView.backgroundColor = [UIColor colorWithPatternImage:grayImage];
    self.grayView = grayView;
    
    
    // 创建黄色视图
    UIView *yellowView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, yellowImage.size.width * 5, yellowImage.size.height)];
    yellowView.backgroundColor = [UIColor colorWithPatternImage:yellowImage];
    self.yellowView = yellowView;
    
    [self addSubview:grayView];
    [self addSubview:yellowView];
    
    // 缩放比例
    float scale = self.frame.size.height / yellowImage.size.height;
    grayView.transform = CGAffineTransformMakeScale(scale, scale);
    yellowView.transform = CGAffineTransformMakeScale(scale, scale);
    
    // 坐标归零
    grayView.origin = CGPointZero;
    yellowView.origin = CGPointZero;
    
}

- (void)setRating:(float)rating {
    _rating = rating;
    
    self.yellowView.width = self.frame.size.width * (rating / 10);

}

@end