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

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