iOS之UI--Quartz2D的入门应用--重绘下载圆形进度条

简介:

iOS之重绘下载圆形进度条

开发须知快速预览:
 
1、关于了解PI的数值:

  
  
2、- (void)drawRect:(CGRect)rect 相关: 这个方法只在self对应的控件首次创建系统会执行,为了能够达到重绘的作用, 就需要重新绘制调用这个drawRect方法,但是推荐使用一下方法:
rect其实就是self本身,关于self的不变的数据,可以抽取出来优化。
效果展示:


根据效果展示应该能够很快知道需求吧,然后根据需求开始的开发过程:

1、拖拽需要的UI控件,并设置相关的属性


2、创建UIView的子类HYProgress,并将storyboard的这个绿色的UIView控件Class设置为HYProgress



3、在ViewController.m中拖线创建UISlider的事件监听的方法,通过sender.value能够获取selider的百分比对应的小数数值

在ViewController.m中通过拖线获取HYprogress的引用,因为需要将sender.value传递给这个HYProgress对象
最后通过HYProgress展示出来。

4、在HYprogress.m中,因为要操作子控件UILabel用于显示需要的信息,所以要拖线获得其引用。

但是这么直接是不会成功。至于为什么我也不知道,不过不要深究,下一步就是解决这个问题的方法。请看下一步。


5、解决拖线的问题,先创建IBOutlet代码,然后从代码左边的拖线点拖到右边的UILabel对象上就OK了。



6、创建属性progress并重写set方法,然后还要在set方法中实现对获得的progress的值进行相关的加载处理,比如

self.label.text = ...... ;


7、最后直接看代码,这个代码不是特别多,也不是特别复杂:

复制代码
 1 #import "HYProgress.h"  2  3 @interface HYProgress ()
 4  5 /** 子控件UILabel */  6 @property (nonatomic,weak)IBOutlet UILabel *label;
 7  8 /** 宽 */  9 @property (nonatomic,assign)CGFloat w;
10 /** 高 */ 11 @property (nonatomic,assign)CGFloat h;
12 13 @end 14 15 @implementation HYProgress
16 17 -(void)awakeFromNib{
18  [self setup];
19 }
20 21 -(void)setProgress:(CGFloat)progress{
22 23 _progress = progress;
24 self.label.text = [NSString stringWithFormat:@"%.2f%%",_progress*100];
25 26  [self setNeedsDisplay];
27 28 }
29 30 31 #pragma mark - 初始化绘图需要的数值
32 -(void)setup{
33 //因为drawRext传入的参数rect就是self本身 34 self.w = self.bounds.size.width;
35 self.h = self.bounds.size.height;
36 37 }
38 39 40 - (void)drawRect:(CGRect)rect {
41 // Drawing code 42 43 44 45 CGFloat endA = -M_PI_2 + M_PI * self.progress*2;
46 //2、创建贝塞尔曲线 47 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.w *0.5, self.h*0.5)
48 radius:self.w*0.5-5 49 startAngle:-M_PI_2
50  endAngle:endA clockwise:YES];
51 52 [path setLineWidth:4];
53  [[UIColor redColor] setStroke];
54 55 // Path operations on the current graphics context 56  [path stroke];
57 58 }
59 60 61 @end
复制代码


相关文章
「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
本篇将带你实现一个多滑块联动的控制器应用。用户可以通过拖动多个滑块,动态控制不同参数(如红绿蓝三色值),并实时显示最终结果。我们将以动态颜色调节为例,展示如何结合状态管理和交互逻辑,打造一个高级的滑块控制器应用。
496 78
「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
1162 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
11月前
|
JavaScript 前端开发 开发者
鸿蒙应用开发从入门到实战(六):ArkTS声明式UI和组件化
鸿蒙开发语言ArkTS在继承了Typescrip语法的基础上,主要扩展了声明式UI开发相关的能力。
480 1
「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
本篇将带你实现一个虚拟音乐控制台。用户可以通过界面控制音乐的播放、暂停、切换歌曲,并查看当前播放的歌曲信息。页面还支持调整音量和动态显示播放进度,是音乐播放器界面开发的基础功能示例。
632 80
「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
「Mac畅玩鸿蒙与硬件51」UI互动应用篇28 - 模拟记账应用
本篇教程将介绍如何创建一个模拟记账应用,通过账单输入、动态列表展示和实时统计功能,学习接口定义和组件间的数据交互。
589 68
「Mac畅玩鸿蒙与硬件51」UI互动应用篇28 - 模拟记账应用
|
流计算 UED
「Mac畅玩鸿蒙与硬件48」UI互动应用篇25 - 简易购物车功能实现
本篇教程将带你实现一个简易购物车功能。通过使用接口定义商品结构,我们将创建一个动态购物车,支持商品的添加、移除以及实时总价计算。
536 69
「Mac畅玩鸿蒙与硬件48」UI互动应用篇25 - 简易购物车功能实现
|
数据处理
「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具
本篇将带你实现一个评分统计工具,用户可以对多个选项进行评分。应用会实时更新每个选项的评分结果,并统计平均分。这一功能适合用于问卷调查或评分统计的场景。
538 65
「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具
|
UED
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
本篇将带你实现一个简单的照片墙布局应用,通过展示多张图片组成照片墙效果,用户可以点击图片查看其状态变化。
528 67
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
|
人工智能 物联网 编译器
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
482 11
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
本篇将带你实现一个自定义天气预报组件。用户可以通过选择不同城市来获取相应的天气信息,页面会显示当前城市的天气图标、温度及天气描述。这一功能适合用于动态展示天气信息的小型应用。
849 38
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件

热门文章

最新文章