iOS 星星視圖 3行搞定

jopen 10年前發布 | 12K 次閱讀 iOS開發移動開發

最近項目需要使用評價的星星視圖，自己寫了一個玩玩，這個星星視圖寫的還是比較簡單的，初學者可以看一下，大神的話，還請多多指教了～

首先，作為一個視圖，初始化代碼能少則少！

話不多說，先上初始化的代碼：

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

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

---恢復內容結束---