美文网首页电商封装iOS开发实用技术
iOS开发小笔记 | 封装一个星级view(基于masonry)

iOS开发小笔记 | 封装一个星级view(基于masonry)

作者: Lol刀妹 | 来源:发表于2017-03-17 22:26 被阅读298次

    就是这么一种常见自定义控件:

    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);
        }];
    }
    

    相关文章

      网友评论

        本文标题:iOS开发小笔记 | 封装一个星级view(基于masonry)

        本文链接:https://www.haomeiwen.com/subject/pqcrnttx.html