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

此外，如有不足，請各位大神多多指出來～小的感激不盡～～