iOS之星星评分(一)

  在ios开发中,我们可能会遇到评分这类需求。 比如我有一个商品列表,现在我们需要给列表中的各个商品进行评分。(见下图)那该怎么做呢?
星星评分.png

今天我们说的第一种评分,是不可以点击评分的。 也就是说星星点亮的多少不是我们手动点击的,而是服务器返回一个数字,然后根据数字所占的百分比来计算星星的个数。那下面我们开始吧~

// 首先,我们创建一个继承UIView 的 StarView 的类,在.文件中有如下属性:

// 根据字体大小来确定星星的大小
@property (nonatomic, assign) CGFloat starSize;
// 总共的长度
@property (nonatomic, assign) NSInteger maxStar;
//需要显示的星星的长度
@property (nonatomic, assign) NSInteger showStar;
//未点亮时候的颜色
@property (nonatomic, retain) UIColor *emptyColor;
//点亮的星星的颜色
@property (nonatomic, retain) UIColor *fullColor;

下面是具体实现

// 重写initWithFrame:方法
- (instancetype)initWithFrame:(CGRect)frame {
    
    if ( self = [super initWithFrame:frame]) {
        self.backgroundColor = [UIColor clearColor];
        // 星星的尺寸
        self.starSize = 20.0f;
        // 未点亮星星的颜色(可根据自己喜好设定)
        self.emptyColor = TSColor(167, 167, 167);
        // 点亮星星的颜色
        self.fullColor = TSColor(16, 130, 225);
        // 默认长度
        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;
    // 裁剪的宽度 = 点亮星星宽度 = (显示的星星数/总共星星数)*总星星的宽度
    clip.size.width = clip.size.width * _showStar / _maxStar;
    CGContextClipToRect(context,clip);
    [_fullColor set];
    [stars drawInRect:rect withFont:font];
}

如何使用呢?

// 使用起来非常简单。就跟创建一个View一样。应为我这个类取名StarView,所以:
 StarView *starView =  [StarView alloc] initWithFrame:CGRectMake(90, 90, 200, 40)];
 [self.view addSubView:starView];
// 别忘了这一步哦(关键的一步),3*20 意思是我想显示3颗星。20是没个星星的宽度(因为 上面设置了self.maxStar = 100),我的最大星星个数是5,所以每个星星的宽度是20
starView.showStar = 3*20;
  今天所说的这种方法的原理是重绘。 注意:这种方法,用户是点击不了的,这种方法适用于评分是从服务器返回的。如果 需要用户自己手动评分(点击评分)的话,那就请见明天的文章《iOS之星星评分(二)》。 上面的代码直接拷贝就可以运行。为了以后考虑,建议跟我一下写在一个继承于UIView的类里面,方便调用。
  如果你对本文有什么好的意见,欢迎骚扰。可以私信我啊~~ 我会把代码整理后,放到github上,3Q~~。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,265评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,274评论 1 288
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,087评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,479评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,782评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,218评论 1 207
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,594评论 2 309
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,316评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,955评论 1 237
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,274评论 2 240
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,803评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,177评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,732评论 3 229
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,953评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,687评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,263评论 2 267
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,189评论 2 258

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,592评论 4 59
  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 24,832评论 7 249
  • 清晨的山林 弥漫着泥土混合着油棕的芳香 悠扬的悦笛 吟唱着风吹叶落的缠绵 你是否会忆起 空明琦亮的地方 一所精致小...
    艺引阅读 93评论 5 1
  • 今天学校有个大型招聘会,除了毕业考研的、回家的,就我跟另外一个姑娘去看了,回来后就讨论了一个问题,你想做大公司里的...
    傾觐阅读 1,281评论 0 0
  • 屋里烛光思量 屋外冷风紧张 常常以为你在外面 时时幻想我在里面 谁想不是这样 我在外面 看不见里面
    李自省阅读 155评论 0 0