星星覆盖效果

星星效果.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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容