iOS之星星評(píng)分(一)

  在ios開(kāi)發(fā)中蜜暑,我們可能會(huì)遇到評(píng)分這類(lèi)需求晨川。 比如我有一個(gè)商品列表画恰,現(xiàn)在我們需要給列表中的各個(gè)商品進(jìn)行評(píng)分彭谁。(見(jiàn)下圖)那該怎么做呢?
星星評(píng)分.png

今天我們說(shuō)的第一種評(píng)分允扇,是不可以點(diǎn)擊評(píng)分的缠局。 也就是說(shuō)星星點(diǎn)亮的多少不是我們手動(dòng)點(diǎn)擊的,而是服務(wù)器返回一個(gè)數(shù)字考润,然后根據(jù)數(shù)字所占的百分比來(lái)計(jì)算星星的個(gè)數(shù)狭园。那下面我們開(kāi)始吧~

// 首先,我們創(chuàng)建一個(gè)繼承UIView 的 StarView 的類(lèi)糊治,在.文件中有如下屬性:

// 根據(jù)字體大小來(lái)確定星星的大小
@property (nonatomic, assign) CGFloat starSize;
// 總共的長(zhǎng)度
@property (nonatomic, assign) NSInteger maxStar;
//需要顯示的星星的長(zhǎng)度
@property (nonatomic, assign) NSInteger showStar;
//未點(diǎn)亮?xí)r候的顏色
@property (nonatomic, retain) UIColor *emptyColor;
//點(diǎn)亮的星星的顏色
@property (nonatomic, retain) UIColor *fullColor;

下面是具體實(shí)現(xiàn)

// 重寫(xiě)initWithFrame:方法
- (instancetype)initWithFrame:(CGRect)frame {
    
    if ( self = [super initWithFrame:frame]) {
        self.backgroundColor = [UIColor clearColor];
        // 星星的尺寸
        self.starSize = 20.0f;
        // 未點(diǎn)亮星星的顏色(可根據(jù)自己喜好設(shè)定)
        self.emptyColor = TSColor(167, 167, 167);
        // 點(diǎn)亮星星的顏色
        self.fullColor = TSColor(16, 130, 225);
        // 默認(rèn)長(zhǎng)度
        self.maxStar = 100;
    }
    return self;
}

//重繪視圖
- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    NSString* stars = @"★★★★★";
    rect = self.bounds;
    UIFont *font = [UIFont boldSystemFontOfSize:_starSize];
    CGSize starSize = [stars sizeWithFont:font];
    rect.size=starSize;
    [_emptyColor set];
    [stars drawInRect:rect withFont:font];
    
    CGRect clip = rect;
    // 裁剪的寬度 = 點(diǎn)亮星星寬度 = (顯示的星星數(shù)/總共星星數(shù))*總星星的寬度
    clip.size.width = clip.size.width * _showStar / _maxStar;
    CGContextClipToRect(context,clip);
    [_fullColor set];
    [stars drawInRect:rect withFont:font];
}

如何使用呢唱矛?

// 使用起來(lái)非常簡(jiǎn)單。就跟創(chuàng)建一個(gè)View一樣。應(yīng)為我這個(gè)類(lèi)取名StarView绎谦,所以:
 StarView *starView =  [StarView alloc] initWithFrame:CGRectMake(90, 90, 200, 40)];
 [self.view addSubView:starView];
// 別忘了這一步哦(關(guān)鍵的一步)管闷,3*20 意思是我想顯示3顆星。20是沒(méi)個(gè)星星的寬度(因?yàn)?上面設(shè)置了self.maxStar = 100)窃肠,我的最大星星個(gè)數(shù)是5包个,所以每個(gè)星星的寬度是20
starView.showStar = 3*20;
  今天所說(shuō)的這種方法的原理是重繪。 注意:這種方法冤留,用戶是點(diǎn)擊不了的碧囊,這種方法適用于評(píng)分是從服務(wù)器返回的。如果 需要用戶自己手動(dòng)評(píng)分(點(diǎn)擊評(píng)分)的話纤怒,那就請(qǐng)見(jiàn)明天的文章《iOS之星星評(píng)分(二)》糯而。 上面的代碼直接拷貝就可以運(yùn)行。為了以后考慮肪跋,建議跟我一下寫(xiě)在一個(gè)繼承于UIView的類(lèi)里面歧蒋,方便調(diào)用。
  如果你對(duì)本文有什么好的意見(jiàn)州既,歡迎騷擾谜洽。可以私信我啊~~ 我會(huì)把代碼整理后吴叶,放到github上阐虚,3Q~~。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蚌卤,一起剝皮案震驚了整個(gè)濱河市实束,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌逊彭,老刑警劉巖咸灿,帶你破解...
    沈念sama閱讀 222,865評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異侮叮,居然都是意外死亡避矢,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)囊榜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)审胸,“玉大人,你說(shuō)我怎么就攤上這事卸勺∩芭妫” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,631評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵曙求,是天一觀的道長(zhǎng)碍庵。 經(jīng)常有香客問(wèn)我映企,道長(zhǎng),這世上最難降的妖魔是什么静浴? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,199評(píng)論 1 300
  • 正文 為了忘掉前任卑吭,我火速辦了婚禮,結(jié)果婚禮上马绝,老公的妹妹穿的比我還像新娘。我一直安慰自己挣菲,他們只是感情好富稻,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,196評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著白胀,像睡著了一般椭赋。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上或杠,一...
    開(kāi)封第一講書(shū)人閱讀 52,793評(píng)論 1 314
  • 那天哪怔,我揣著相機(jī)與錄音,去河邊找鬼向抢。 笑死认境,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的挟鸠。 我是一名探鬼主播叉信,決...
    沈念sama閱讀 41,221評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼浪汪,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼屡贺!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起迂曲,我...
    開(kāi)封第一講書(shū)人閱讀 40,174評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤覆享,失蹤者是張志新(化名)和其女友劉穎佳遂,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體撒顿,經(jīng)...
    沈念sama閱讀 46,699評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡丑罪,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,770評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了核蘸。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片巍糯。...
    茶點(diǎn)故事閱讀 40,918評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖客扎,靈堂內(nèi)的尸體忽然破棺而出祟峦,到底是詐尸還是另有隱情,我是刑警寧澤徙鱼,帶...
    沈念sama閱讀 36,573評(píng)論 5 351
  • 正文 年R本政府宣布宅楞,位于F島的核電站针姿,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏厌衙。R本人自食惡果不足惜距淫,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,255評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望婶希。 院中可真熱鬧榕暇,春花似錦、人聲如沸喻杈。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,749評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)筒饰。三九已至缴啡,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間瓷们,已是汗流浹背业栅。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,862評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留谬晕,地道東北人碘裕。 一個(gè)月前我還...
    沈念sama閱讀 49,364評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像固蚤,于是被迫代替她去往敵國(guó)和親娘汞。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,926評(píng)論 2 361

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

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)夕玩、插件你弦、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,125評(píng)論 4 61
  • Swift版本點(diǎn)擊這里歡迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh閱讀 25,428評(píng)論 7 249
  • 清晨的山林 彌漫著泥土混合著油棕的芳香 悠揚(yáng)的悅笛 吟唱著風(fēng)吹葉落的纏綿 你是否會(huì)憶起 空明琦亮的地方 一所精致小...
    藝引閱讀 98評(píng)論 5 1
  • 今天學(xué)校有個(gè)大型招聘會(huì)萍程,除了畢業(yè)考研的、回家的兔仰,就我跟另外一個(gè)姑娘去看了茫负,回來(lái)后就討論了一個(gè)問(wèn)題,你想做大公司里的...
    傾覲閱讀 1,381評(píng)論 0 0
  • 屋里燭光思量 屋外冷風(fēng)緊張 常常以為你在外面 時(shí)時(shí)幻想我在里面 誰(shuí)想不是這樣 我在外面 看不見(jiàn)里面
    李自省閱讀 172評(píng)論 0 0