iOS實(shí)踐:一步步實(shí)現(xiàn)星級評分

星級評分在幾乎每一個電商平臺都會出現(xiàn)鞍盗,其實(shí)在這個星級評分里面不管有多少分需了,最終我們只用到了三張圖片。我們把這個星級評分抽象出來看般甲,每顆星星只有三種狀態(tài)肋乍,半星、滿星敷存、空星墓造。

Paste_Image.png

需求如下

  • 滿分為5分;
  • 整數(shù)用整個星星顯示锚烦;
  • 小數(shù)用半顆星星表示觅闽;
  • 不足5分的部分,用空星星表示涮俄。

經(jīng)過分析谱煤,可以按照下面的思路來進(jìn)行開發(fā)。

Paste_Image.png

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就可以了红柱。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末承匣,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子锤悄,更是在濱河造成了極大的恐慌韧骗,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件零聚,死亡現(xiàn)場離奇詭異宽闲,居然都是意外死亡众眨,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進(jìn)店門容诬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來娩梨,“玉大人,你說我怎么就攤上這事览徒”范ǎ” “怎么了?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵习蓬,是天一觀的道長纽什。 經(jīng)常有香客問我,道長躲叼,這世上最難降的妖魔是什么芦缰? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮枫慷,結(jié)果婚禮上让蕾,老公的妹妹穿的比我還像新娘。我一直安慰自己或听,他們只是感情好探孝,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著誉裆,像睡著了一般顿颅。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上足丢,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天粱腻,我揣著相機(jī)與錄音,去河邊找鬼斩跌。 笑死栖疑,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的滔驶。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼卿闹,長吁一口氣:“原來是場噩夢啊……” “哼揭糕!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起锻霎,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤著角,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后旋恼,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體吏口,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了产徊。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片昂勒。...
    茶點(diǎn)故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖舟铜,靈堂內(nèi)的尸體忽然破棺而出戈盈,到底是詐尸還是另有隱情,我是刑警寧澤谆刨,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布塘娶,位于F島的核電站,受9級特大地震影響痊夭,放射性物質(zhì)發(fā)生泄漏刁岸。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一她我、第九天 我趴在偏房一處隱蔽的房頂上張望虹曙。 院中可真熱鬧,春花似錦鸦难、人聲如沸根吁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽击敌。三九已至,卻和暖如春拴事,著一層夾襖步出監(jiān)牢的瞬間沃斤,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工刃宵, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留衡瓶,地道東北人。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓牲证,卻偏偏與公主長得像哮针,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子坦袍,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容