在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~~。