星級評分在幾乎每一個電商平臺都會出現(xiàn)鞍盗,其實(shí)在這個星級評分里面不管有多少分需了,最終我們只用到了三張圖片。我們把這個星級評分抽象出來看般甲,每顆星星只有三種狀態(tài)肋乍,半星、滿星敷存、空星墓造。
需求如下:
- 滿分為5分;
- 整數(shù)用整個星星顯示锚烦;
- 小數(shù)用半顆星星表示觅闽;
- 不足5分的部分,用空星星表示涮俄。
經(jīng)過分析谱煤,可以按照下面的思路來進(jìn)行開發(fā)。
1. 創(chuàng)建星星
- 首先重寫了評分的set方法禽拔,這樣一旦給星級進(jìn)行評分,就可以進(jìn)行直接變成星星輸出室叉。
- 滿星:其實(shí)就是分?jǐn)?shù)取整睹栖。所以對分?jǐn)?shù)轉(zhuǎn)成了NSInteger,直接當(dāng)作滿星的個數(shù)茧痕。
- 半星:分?jǐn)?shù)減去滿星的個數(shù)野来,然后判斷是否等于零。如果等于零踪旷,就是有半星曼氛,半星最多只出現(xiàn)一次;反之令野,沒有半星舀患。
- 空星:星星的總個數(shù)- 滿星數(shù)量- 半星的數(shù)量
- 在這里為了能夠容易修改以后最大的評級分?jǐn)?shù),所以把總分定義了宏
STAR_AMOUNT_NUMBER
气破。
例如評分是3.7分聊浅。
那滿星就是(取整)3.7= 3
半星就是3.7 -3 = 0.7 。就是有半星。
空星:5 - 3 - 1 = 1.
/**
重寫屬性level的方法低匙,一旦給此屬性賦值旷痕,就創(chuàng)建星星
@param level 評級分?jǐn)?shù)
*/
- (void)setLevel:(CGFloat)level{
_level = level;
// 滿星
NSInteger fullStarNumber = (NSInteger)level;
for (NSInteger i = 0; i < fullStarNumber; i++) {
[self createStartViewWithImageName:@"full_star" andWithStarPosition:i];
}
// 半星
if ((level - fullStarNumber) > 0) {
[self createStartViewWithImageName:@"half_star" andWithStarPosition:fullStarNumber];
fullStarNumber++;
}
// 空星
for (NSInteger i = fullStarNumber; i < STAR_AMOUNT_NUMBER; i++) {
[self createStartViewWithImageName:@"empty_star" andWithStarPosition:i];
}
}
2. 優(yōu)化
上面這段代碼執(zhí)行之后,稍微細(xì)心點(diǎn)就會發(fā)現(xiàn)創(chuàng)建非常多的裝星星的UIImageVIew顽冶。每一顆星星都會創(chuàng)建一個UIImageVIew欺抗,這樣會導(dǎo)致性能非常低下。如果頁面用到的次數(shù)過多强重,就會因?yàn)閮?nèi)存過大閃退绞呈。
- 就想到了類似前一篇提到的cell重用機(jī)制。
- 判斷當(dāng)前是否已經(jīng)有5個UIImageView
- 如果有竿屹,就直接取出已經(jīng)創(chuàng)建的UIImageView报强,只是修改一下圖片就可以。
- 如果沒有拱燃,再創(chuàng)建秉溉。
這樣,每個屏幕上最多只會有5個UIImageView碗誉。
/**
根據(jù)圖片的名稱召嘶,以及相應(yīng)的個數(shù),創(chuàng)建星星的圖層
@param imageName 星星圖片的名稱:全星哮缺、半星弄跌、空星
@param starNumber 對應(yīng)星星類型的位置
*/
- (void)createStartViewWithImageName:(NSString *)imageName andWithStarPosition:(NSInteger)starPosition{
UIImageView *imageView = nil;
// 如果發(fā)現(xiàn)星星已經(jīng)創(chuàng)建了,就不要再創(chuàng)建了尝苇,重新給圖片就可以了
if (self.subviews.count == STAR_AMOUNT_NUMBER) {
imageView = self.subviews[starPosition];
imageView.image = [UIImage imageNamed:imageName];
return ;
}
imageView = [[UIImageView alloc]init];
imageView.image = [UIImage imageNamed:imageName];
[imageView sizeToFit];
imageView.frame = CGRectOffset(imageView.bounds, starPosition * imageView.bounds.size.width, 0);
[self addSubview:imageView];
}
3. 靈異事件
- 更細(xì)心的童鞋發(fā)現(xiàn)了铛只,腫么小數(shù).7還有一些數(shù)字會出現(xiàn)詭異顯現(xiàn)吶??妨铩4就妗!
- 這個問題在iOS和Android都會出現(xiàn)非竿。
- 把小數(shù)轉(zhuǎn)換為字符串時蜕着,如果出現(xiàn)靈異事件,把小數(shù)的類型變成float就可以了红柱。