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)

用户喜欢...

使用Xilinx系统生成器实现简单的DDS

在本文中,我们将讨论使用Xilinx System Generator实现简单的直接数字频率合成器(DDS)。 System Generator是一个功能强大的工具,它将Xilinx FPGA设计过程与MATLAB的Simulink集成,后者使用高级描述轻松实...


可实现更佳充电灵活性的谐振式无线充电解决方案

可实现更佳充电灵活性的谐振式无线充电解决方案 谐振式无线充电技术利用磁共振在松散耦合的线圈之间传输功率,工作频率为 6.78 MHz。 对于要求充电时发射器与接收器线圈无需精准对准的应...


快速实现精度达 10 厘米的实时定位系统

无线电定位系统已成为几乎所有类型的移动设备和相关应用的标配功能。在众多无线电定位方法中,基于超宽带 (UWB) 射频通信的实时定位系统 (RTLS) 扮演了中枢角色,确保在 GPS 等更为人熟悉的...


制造商和工程师:了解您的仪表放大器以实现准确的物联网数据采集

感知是物联网(IoT)和智能家居开始的地方,也是DIY爱好者,制造者甚至专业设计师遇到他们的第一个问题的地方。许多便宜的传感器,如加速计,力传感器,应变计和压力传感器都是围绕电...


使用RS-485和电流回路接口实现可靠的工业连接

尽管蓝牙,以太网和其他连接选项广泛普及并支持高数据速率,但工业应用设计人员仍然需要确保以最低的成本获得最可靠的连接。他们还必须在安装的连接选项基础范围内工作。 由于这些原...


在实现5G方面发挥重要作用的顶级驱动因素

一位勇敢的灵魂承认真正了解5G是什么......而且有相当数量的与会者已经预示着6G! 使用5G来改善人类的生存 然而,我们选择定义5G,会议提醒我有许多不同的驱动因素在实现5G方面发挥作用。其...



将电动汽车引入智能电网以实现稳定性和安全性

插电式混合动力汽车和电池电动汽车(PHEV,BEV)的健康市场可以在不牺牲个人交通提供的自由的情况下,显着减少尾气排放的环境负担。欧盟立法者是改变清洁车辆的最积极的倡导者之一,一...


Wi-Fi /蓝牙组合可实现多个车载设备的同时流式传输

赛普拉斯半导体宣布推出组合解决方案,该解决方案可为车辆提供2x2 MIMO 802.11ac Wi-Fi和蓝牙连接,使多个用户能够同时连接不同内容并将其传输至其设备。 新的赛普拉斯CYW89359组合解决方案据说...


在恶劣的环境中实现复杂的传感和控制系统

在许多工业应用中,感知,记录和交流关于环境条件的数据是至关重要的。许多工业过程涉及高温,高压,振动和腐蚀性气体或液体,但是传感对于控制和监测这些过程是非常重要的,通常在非...