iOS 星星视图 3行搞定

jopen 8年前

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

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

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

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

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

然后是效果：

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

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

调整的代码：

1     starView = [[WQLStarView alloc]initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 40) withTotalStar:5 withTotalPoint:10 starSpace:10];  2   3     starView.starAliment = StarAlimentCenter;  4   5     starView.commentPoint = 7;  6   7     [self.view addSubview:starView];

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

再看看此时效果：

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

WQLStarView.h

 1 typedef NS_ENUM(NSInteger,StarAliment) {   2     StarAlimentDefault,   3     StarAlimentCenter,   4     StarAlimentRight   5 };   6    7    8 @interface WQLStarView : UIView   9 /**  10  *  评分  11  */  12 @property (nonatomic,assign) CGFloat commentPoint;  13 /**  14  *  对齐方式  15  */  16 @property (nonatomic,assign) StarAliment starAliment;  17   18 /**  19  *  初始化方法  20  *  21  *  @param frame      整个星星视图的frame  22  *  @param totalStar  总的星星的个数  23  *  @param totalPoint 星星表示的总分数  24  *  @param space      星星之间的间距  25  *  26  *  @return WQLStarView  27  */  28 - (instancetype)initWithFrame:(CGRect)frame withTotalStar:(NSInteger)totalStar withTotalPoint:(CGFloat)totalPoint starSpace:(NSInteger)space;

关键是WQLStarView.m文件了：

初始化方法：

 1 - (instancetype)initWithFrame:(CGRect)frame withTotalStar:(NSInteger)totalStar withTotalPoint:(CGFloat)totalPoint starSpace:(NSInteger)space   2 {   3     self = [super initWithFrame:frame];   4     if (self) {   5            6         //对传进来的frame进行处理，取合适的星星的高度   7            8         //传进来的高度   9         CGFloat height = frame.size.height;  10         //减去间距后的平均的宽度（我设置的星星 高度＝宽度）  11         CGFloat averageHeight = (frame.size.width-space*(totalStar-1))/totalStar;  12           13         if (height>averageHeight) {  14             starHeight = averageHeight;  15         }else{  16             starHeight = height;  17         }  18           19         starBaseTag = 6666;  20         spaceWidth = space;  21         totalNumber = totalStar;  22         singlePoint = totalPoint/totalStar;  23         maxPoints = totalPoint;  24           25         [self loadCustomViewWithTotal:totalStar];  26           27     }  28     return self;  29 }

加载视图：

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

设置评分分数：

 1 //当你设置评分时 开始填充整颗星星   2 - (void)setCommentPoint:(CGFloat)commentPoint   3 {   4     _commentPoint = commentPoint;   5        6     if (commentPoint > maxPoints) {   7         commentPoint = maxPoints;   8     }   9       10     CGFloat showNumber = commentPoint/singlePoint;  11       12     //覆盖的长图  13     if (!starView) {  14         starView = [[UIView alloc]init];  15     }  16       17     starView.frame = CGRectZero;  18     //整颗星星  19     NSInteger fullNumber = showNumber/1;  20       21     if (starOffset > 0) {  22         starView.frame = CGRectMake(starOffset, self.frame.size.height-starHeight, starHeight*showNumber+spaceWidth*fullNumber, starHeight);  23   24     }else{  25         starView.frame = CGRectMake(0, self.frame.size.height-starHeight, starHeight*showNumber+spaceWidth*fullNumber, starHeight);  26   27     }  28     starView.clipsToBounds = YES;  29       30     //在长图上填充完整的星星  31     for (int j = 0; j< fullNumber; j++) {  32         UIImageView *starImageView = [[UIImageView alloc]init];  33         starImageView.image = [UIImage imageNamed:@"starImage"];  34         starImageView.frame = CGRectMake(j*starHeight+j*spaceWidth, 0, starHeight, starHeight);  35         [starView addSubview:starImageView];  36     }  37       38     CGFloat part = showNumber - fullNumber;  39     //如果有残缺的星星 则添加  40     if (part > 0) {  41         UIImageView *partImage = [[UIImageView alloc]initWithFrame:CGRectMake(fullNumber*starHeight+fullNumber*spaceWidth, 0, starHeight, starHeight)];  42         partImage.image = [UIImage imageNamed:@"starImage"];  43         [starView addSubview:partImage];  44     }  45       46     [self addSubview:starView];  47 }

设置对齐方式：

 1 //设置星星的对齐方式   2 - (void)setStarAliment:(StarAliment)starAliment   3 {   4     _starAliment = starAliment;   5        6     switch (starAliment) {   7             //居中对齐   8         case StarAlimentCenter:   9         {  10             CGFloat starRealWidth = totalNumber*starHeight+(totalNumber-1)*spaceWidth;  11             CGFloat leftWidth = self.frame.size.width-starRealWidth;  12               13             for (int i =0 ; i< totalNumber; i++) {  14                 UIImageView *starImageView = (UIImageView*)[self viewWithTag:i+starBaseTag];  15                 starImageView.frame = CGRectMake(leftWidth/2+starImageView.frame.origin.x, starImageView.frame.origin.y, starImageView.frame.size.width, starImageView.frame.size.height);  16             }  17             starOffset = leftWidth/2;  18             starView.frame = CGRectMake(leftWidth/2+starView.frame.origin.x, starView.frame.origin.y, starView.frame.size.width, starView.frame.size.height);  19               20         }  21             break;  22             //右对齐  23         case StarAlimentRight:  24         {  25             CGFloat starRealWidth = totalNumber*starHeight+(totalNumber-1)*spaceWidth;  26             CGFloat leftWidth = self.frame.size.width-starRealWidth;  27               28             for (int i =0 ; i< totalNumber; i++) {  29                 UIImageView *starImageView = (UIImageView*)[self viewWithTag:i+starBaseTag];  30                 starImageView.frame = CGRectMake(leftWidth+starImageView.frame.origin.x, starImageView.frame.origin.y, starImageView.frame.size.width, starImageView.frame.size.height);  31             }  32             starOffset = leftWidth;  33             starView.frame = CGRectMake(leftWidth+starView.frame.origin.x, starView.frame.origin.y, starView.frame.size.width, starView.frame.size.height);  34               35         }  36             break;  37             //默认的左对齐  38         case StarAlimentDefault:  39         {  40               41             for (int i =0 ; i< totalNumber; i++) {  42                 UIImageView *starImageView = (UIImageView*)[self viewWithTag:i+starBaseTag];  43                 starImageView.frame = CGRectMake(i*starHeight+i*spaceWidth, self.frame.size.height-starHeight, starHeight, starHeight);  44             }  45               46               47             CGFloat showNumber = self.commentPoint/singlePoint;  48               49             //整颗星星  50             NSInteger fullNumber = showNumber/1;  51             starOffset = 0;  52             starView.frame = CGRectMake(0, self.frame.size.height-starHeight, starHeight*showNumber+spaceWidth*fullNumber, starHeight);  53               54               55         }  56             break;  57         default:  58         {  59               60         }  61             break;  62     }  63       64       65 }

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

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

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

---恢复内容结束---