close
当前位置: 物联网在线 > 技术文库 > ios >

iOS上下文实现评价星星

创建两个 view,通过 for 循环创建 imageView,未点亮星星视图在下、点亮星星视图在上重合在一起,当用户点击视图时,通过改变点亮星星视图的 width 实现功能

本文思路:

直接重写 drawrect 方法,在 drawrect 用 drawimage 画出星星,根据 currentValue 画出不同类型的星星,当用户点击视图时,改变 currentValue,并根据改变后的 currentValue 重新画出星星。

展示图:

iOS上下文实现评价星星

展示图

代码:

自定义一个继承 UIView 的 CYStarView

属性:

/** 完成后执行的block */ @property (copy, nonatomic) void(^completionBlock)(NSInteger); /** 是否可以点击 */ @property (assign, nonatomic) BOOL clickable; /** 星星个数 */ @property (assign, nonatomic) NSInteger numberOfStars; /** 星星边长 */ @property (assign, nonatomic) CGFloat lengthOfSide; /** 评价值 */ @property (assign, nonatomic) NSInteger currentValue; /** 星星间隔 */ @property (assign, nonatomic) CGFloat spacing;

重写 setter 方法,在 setter 方法中调用 setNeedsDisplay,会执行 drawrect:

- (void)setLengthOfSide:(CGFloat)lengthOfSide { // 超过控件高度 if (lengthOfSide > self.frame.size.height) { lengthOfSide = self.frame.size.height; } // 超过控件宽度 if (lengthOfSide > self.frame.size.width / _numberOfStars) { lengthOfSide = self.frame.size.width / _numberOfStars; } _lengthOfSide = lengthOfSide; _spacing = (self.frame.size.width - lengthOfSide * _numberOfStars) / _numberOfStars; [self setNeedsDisplay]; }

在 drawrect 中画星星:

- (void)drawRect:(CGRect)rect { UIImage *lightImage = [UIImage imageNamed:@"star_light"]; UIImage *darkImage = [UIImage imageNamed:@"star_dark"]; // 获取当前上下文 CGContextRef context = UIGraphicsGetCurrentContext(); for (int i = 0; i < self.numberOfStars; i ++) { // 根据 currentValue 选择是画亮的还是暗的星星 UIImage *image = i >= self.currentValue ? darkImage : lightImage; CGRect imageRect = CGRectMake(self.spacing / 2 + (self.lengthOfSide + self.spacing) * i, (self.frame.size.height - self.lengthOfSide) / 2, self.lengthOfSide, self.lengthOfSide); CGContextSaveGState(context); // 坐标系Y轴是相反的,进行翻转 CGContextScaleCTM(context, 1.0, - 1.0); CGContextTranslateCTM(context, 0, - rect.origin.y * 2 - rect.size.height); CGContextDrawImage(context, imageRect, image.CGImage); CGContextRestoreGState(context); } }

关于坐标系相反而产生的翻转的问题,可以阅读: CGContextDrawImage使用和分析

使用:

在要使用的控制器中:

#import "CYStarView.h" // 初始化,传入必要参数 CYStarView *starView = [[CYStarView alloc] initWithFrame:frame numberOfStars:number lengthOfSide:length]; // 设置 clickable,评论界面设置为YES,展示界面设置为NO self.starView.clickable = YES; // // 设置 completionBlock self.starView.completionBlock = ^(NSInteger currentValue) { // 点击后的操作放这里 };

来自:


(责任编辑:ioter)

用户喜欢...

有意义的步骤让私有云实现更容易

有些人认为,私有云只是本地已经实施的虚拟化的一个扩展,但事实上却不只如此。私有云的实现可以帮助打破数据...


Vicor 高密度合封电源方案​助力人工智能处理器实现更高的性能

Vicor 公司(NASDAQ 股票交易代码:VICR)今日宣布推出适用于高性能、大电流 CPU/GPU/ASIC(“XPU”)处理器合封的模块化电流倍增器。Vicor 合封电源方案不仅可以减少 XPU 插座的引脚数,还可减少...


用于实现脉宽调制 (PWM) 控制的 Allegro MicroSystems A3916 全桥电机驱动器

Allegro MicroSystems的 A3916设计用于实现低电压步进电机和单、双直流电机的脉宽调制 (PWM) 控制。A3916 每通道输出电池可达 1 A,工作电压范围为 2.7 V 至 15 V。A3916 具有内部固定关断时间 PWM 定时器,...


超少量数据训练神经网络:IEEE论文提出径向变换实现图像增强

作者:李亚洲 近日,一篇题为《Training Neural Networks with Very Little Data-A Draft》IEEE 论文提出...


多通道GNSS数据采集平台的设计与实现

作者:赵玉东,秦红磊,张润萍,2017年电子技术应用第7期 摘 要: 随着GNSS系统的发展,多径效应逐渐成为影响定位精度和可靠性的重要因素之一。为了验证天线阵列方法对于多径效应的消除...


如何使创新的MCU实现高效节能电机控制?

电机对能耗的贡献率在美国接近50%,因此降低电机能耗能有效地提高能源利用率,而采用先进的微控制器(MCU)技术来实现电机控制是一种有效的方法。本文介绍了最新的电机控制MCU技术发展...


工业机器人实现柔性制造离不开哪些核心部件

机器人工具快换装置(Robotic Tool Changer)通过使机器人自动更换不同的末端执行器或外围设备,使机器人的应用更具柔...


实现智能工厂的五大集成解读

实现智能工厂,需要智能制造的四大元素(智能产品、人、物料、工厂)有效的组合,也需要把客户集成、智力集成...


袁帅:会展业实现产业大数据化的几条可能性产出猜想

作者:袁帅 摘要:我们正在从IT时代走入DT的世界,这不仅仅是技术的提升,同时也是思想观念的提升。二者的区别在...


IDC:实现企业数字化转型——数字时代敏捷IT的多云架构

2017年8月17日在新加坡文华东方酒店举行的2017年亚太地区企业云大会上,IDC 亚太区云服务项目研究副总监William Lee探讨...