封装星星评分视图

作者: 捡菇凉的小麦穗 | 来源:发表于2017-07-13 10:35 被阅读84次
    程序猿

    星星评分的核心是放置两张星星视图,一张灰色,一张黄色,灰色在下,黄色在上,默认平铺五颗灰色和黄色星星,然后从传入的评分来控制黄色星星的底部视图的宽度,而不是控制星星的样式,黄色和灰色星星从一开始到最后都没有变化,变化的只是放置星星的View的frame在变化。


    效果展示

    RatingView.h
    为外部使用该类提供一个属性,传入星星的评分,供展示使用。

    @property(assign,nonatomic)float rating;
    

    RatingView.m
    定义几个属性,宽度高度,灰色视图View,黄色视图View。宽度和高度用来控制一个星星的frame。两个视图用来显示不同的星星。

        CGFloat  _width;  
        CGFloat  _height;  
        UIView* _grayView;
        UIView* _yellowView;
    

    通过UIColor中的一个类方法来平铺星星视图,我们一开始获取只有一张图片,现在获取图片的size*5获取底部view的大小,然后根据给定的底图的frame,计算出倍数,等比例放大或者缩小。

    //平铺灰星星
        _grayView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed: @"gray" ]];
        [self addSubview:_grayView];
        
        //平铺黄星星
        _yellowView.backgroundColor = [UIColor colorWithPatternImage:yellowStar];
        [self addSubview:_yellowView];
        
        //获取倍数,根据倍数扩大星星的大小
        CGFloat scale = self.frame.size.width/_width;
        
        //按照倍数,放大
        _grayView.transform = CGAffineTransformMakeScale(scale, scale);
        
        _yellowView.transform = CGAffineTransformMakeScale(scale, scale);
    
    

    底图根据倍数经过放大或者缩小后,位置放生了偏移,需要重新安置。

    _grayView.frame = CGRectMake(0, 0, _grayView.frame.size.width, _grayView.frame.size.height);  
    
    _yellowView.frame = CGRectMake(0, 0, _yellowView.frame.size.width, _yellowView.frame.size.height);  
    

    最后复写一下rating的set方法,给评分赋值,设置黄色底图view的frame。

    _yellowView.frame = CGRectMake(0, 0,   
    _grayView.frame.size.width*rating/10.0, _grayView.frame.size.height);
    

    ViewController.m
    这里为了演示效果,循环创建9个视图。

       for (int i = 0; i < 9; i++) 
     {
            RatingView *ratingV = [[RatingView alloc]initWithFrame:CGRectMake(100, 40 + 40*i, 100, 30)];      
            ratingV.rating = i+1;
            [self.view addSubview:ratingV];
      }
    

    Demo地址:
    https://github.com/mayuwen/MYWRatingView

    相关文章

      网友评论

        本文标题:封装星星评分视图

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