iOS 星星评价视图 3行搞定

最近项目需要使用评价的星星视图，自己写了一个玩玩，这个星星视图写的还是比较简单的，初学者可以看一下，大神的话，还请多多指教了～

 

首先，作为一个视图，初始化代码能少则少！

话不多说，先上初始化的代码：

    WQLStarView *starView = [[WQLStarView alloc]initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 40) withTotalStar:5 withTotalPoint:10 starSpace:10];

    starView.commentPoint = 7;

    [self.view addSubview:starView];

需要传入这么几个参数：星星视图的frame  展示的星星数  星星代表的总分数  星星之间的间隔

然后是效果：

(为了看得清，请原谅我加了个蓝色的边框。中间灰色的是一个输入框，测试用的，请忽略)

我设置的frame的宽度是屏宽，可是此时效果让我很不开心，作为强迫症患者，我要调整。

调整的代码：

    starView = [[WQLStarView alloc]initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 40) withTotalStar:5 withTotalPoint:10 starSpace:10];

    starView.starAliment = StarAlimentCenter;

    starView.commentPoint = 7;

    [self.view addSubview:starView];

这个starAliment是个什么属性？下文会提到。

再看看此时效果：

好了，接下来，看一下我们的核心文件了：

 

WQLStarView.h

typedef NS_ENUM(NSInteger,StarAliment) {
    StarAlimentDefault,
    StarAlimentCenter,
    StarAlimentRight
};


@interface WQLStarView : UIView
/**
 *  评分
 */
@property (nonatomic,assign) CGFloat commentPoint;
/**
 *  对齐方式
 */
@property (nonatomic,assign) StarAliment starAliment;

/**
 *  初始化方法
 *
 *  @param frame      整个星星视图的frame
 *  @param totalStar  总的星星的个数
 *  @param totalPoint 星星表示的总分数
 *  @param space      星星之间的间距
 *
 *  @return WQLStarView
 */
- (instancetype)initWithFrame:(CGRect)frame withTotalStar:(NSInteger)totalStar withTotalPoint:(CGFloat)totalPoint starSpace:(NSInteger)space;

关键是WQLStarView.m文件了：

初始化方法：

- (instancetype)initWithFrame:(CGRect)frame withTotalStar:(NSInteger)totalStar withTotalPoint:(CGFloat)totalPoint starSpace:(NSInteger)space
{
    self = [super initWithFrame:frame];
    if (self) {
        
        //对传进来的frame进行处理，取合适的星星的高度
        
        //传进来的高度
        CGFloat height = frame.size.height;
        //减去间距后的平均的宽度（我设置的星星 高度＝宽度）
        CGFloat averageHeight = (frame.size.width-space*(totalStar-1))/totalStar;
        
        if (height>averageHeight) {
            starHeight = averageHeight;
        }else{
            starHeight = height;
        }
        
        starBaseTag = 6666;
        spaceWidth = space;
        totalNumber = totalStar;
        singlePoint = totalPoint/totalStar;
        maxPoints = totalPoint;
        
        [self loadCustomViewWithTotal:totalStar];
        
    }
    return self;
}

加载视图：

- (void)loadCustomViewWithTotal:(NSInteger)totalStar
{
    //先铺背景图片（空的星星）
    for (int i =0 ; i<totalStar; i++) {
        UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(i*starHeight+i*spaceWidth, self.frame.size.height-starHeight, starHeight, starHeight)];
        imageView.tag = starBaseTag+i;
        imageView.image = [UIImage imageNamed:@"starBackImage"];
        [self addSubview:imageView];
    }
    
}

 

设置评分分数：

//当你设置评分时 开始填充整颗星星
- (void)setCommentPoint:(CGFloat)commentPoint
{
    _commentPoint = commentPoint;
    
    if (commentPoint > maxPoints) {
        commentPoint = maxPoints;
    }
    
    CGFloat showNumber = commentPoint/singlePoint;
    
    //覆盖的长图
    if (!starView) {
        starView = [[UIView alloc]init];
    }
    
    starView.frame = CGRectZero;
    //整颗星星
    NSInteger fullNumber = showNumber/1;
    
    if (starOffset > 0) {
        starView.frame = CGRectMake(starOffset, self.frame.size.height-starHeight, starHeight*showNumber+spaceWidth*fullNumber, starHeight);

    }else{
        starView.frame = CGRectMake(0, self.frame.size.height-starHeight, starHeight*showNumber+spaceWidth*fullNumber, starHeight);

    }
    starView.clipsToBounds = YES;
    
    //在长图上填充完整的星星
    for (int j = 0; j< fullNumber; j++) {
        UIImageView *starImageView = [[UIImageView alloc]init];
        starImageView.image = [UIImage imageNamed:@"starImage"];
        starImageView.frame = CGRectMake(j*starHeight+j*spaceWidth, 0, starHeight, starHeight);
        [starView addSubview:starImageView];
    }
    
    CGFloat part = showNumber - fullNumber;
    //如果有残缺的星星 则添加
    if (part > 0) {
        UIImageView *partImage = [[UIImageView alloc]initWithFrame:CGRectMake(fullNumber*starHeight+fullNumber*spaceWidth, 0, starHeight, starHeight)];
        partImage.image = [UIImage imageNamed:@"starImage"];
        [starView addSubview:partImage];
    }
    
    [self addSubview:starView];
}

 

设置对齐方式：

//设置星星的对齐方式
- (void)setStarAliment:(StarAliment)starAliment
{
    _starAliment = starAliment;
    
    switch (starAliment) {
            //居中对齐
        case StarAlimentCenter:
        {
            CGFloat starRealWidth = totalNumber*starHeight+(totalNumber-1)*spaceWidth;
            CGFloat leftWidth = self.frame.size.width-starRealWidth;
            
            for (int i =0 ; i< totalNumber; i++) {
                UIImageView *starImageView = (UIImageView*)[self viewWithTag:i+starBaseTag];
                starImageView.frame = CGRectMake(leftWidth/2+starImageView.frame.origin.x, starImageView.frame.origin.y, starImageView.frame.size.width, starImageView.frame.size.height);
            }
            starOffset = leftWidth/2;
            starView.frame = CGRectMake(leftWidth/2+starView.frame.origin.x, starView.frame.origin.y, starView.frame.size.width, starView.frame.size.height);
            
        }
            break;
            //右对齐
        case StarAlimentRight:
        {
            CGFloat starRealWidth = totalNumber*starHeight+(totalNumber-1)*spaceWidth;
            CGFloat leftWidth = self.frame.size.width-starRealWidth;
            
            for (int i =0 ; i< totalNumber; i++) {
                UIImageView *starImageView = (UIImageView*)[self viewWithTag:i+starBaseTag];
                starImageView.frame = CGRectMake(leftWidth+starImageView.frame.origin.x, starImageView.frame.origin.y, starImageView.frame.size.width, starImageView.frame.size.height);
            }
            starOffset = leftWidth;
            starView.frame = CGRectMake(leftWidth+starView.frame.origin.x, starView.frame.origin.y, starView.frame.size.width, starView.frame.size.height);
            
        }
            break;
            //默认的左对齐
        case StarAlimentDefault:
        {
            
            for (int i =0 ; i< totalNumber; i++) {
                UIImageView *starImageView = (UIImageView*)[self viewWithTag:i+starBaseTag];
                starImageView.frame = CGRectMake(i*starHeight+i*spaceWidth, self.frame.size.height-starHeight, starHeight, starHeight);
            }
            
            
            CGFloat showNumber = self.commentPoint/singlePoint;
            
            //整颗星星
            NSInteger fullNumber = showNumber/1;
            starOffset = 0;
            starView.frame = CGRectMake(0, self.frame.size.height-starHeight, starHeight*showNumber+spaceWidth*fullNumber, starHeight);
            
            
        }
            break;
        default:
        {
            
        }
            break;
    }
    
    
}

至此，已经完成了星星视图的实现了。

感兴趣的朋友们可以下载看一下：https://github.com/Coolll/WQLStarView

此外，如有不足，请各位大神多多指出来～小的感激不尽～～