iOS实践:根据进度绘制进度条、进度扇形、进度球1. 效果展示及思维导图2. 项目准备工作3. 进度条的实现4. 扇形进度指示器5. 球形指示器

在这浓浓的鞭炮声中,迎来了这个系列的最后一篇。哈哈~这是多么有纪念意义的春节呀。

今天我们来写一个小小的Demo,来演练一下通过OC绘图,根据进度自己绘制出来一个进度条,或者进度扇形、进度球形。

1. 效果展示及思维导图

效果展示:

效果展示.gif

思维导图:

进度条、进度扇形、进度球的思维导图.png

2. 项目准备工作

  1. 为了省事,我们所有的绘图都是在SotryBoard上面进行。如果有兴趣的同学可以自己通过代码约束的方式实现。
  2. 用一个UISlider来模拟进度下载,这样可以通过拖动滑杆,感受到下载的过程。
  3. 实际开发中的提醒:在实际中,下载进度通常都不会放在主线程上,所以子线程获得下载的进度之后,不要忘记回到主线程刷新UI。
  4. 我们这些模拟都是通过滑杆的,所以所有的操作不涉及到多线程。

3. 进度条的实现

  1. 进度条我们这里就直接使用了SB的UIProgressView这个控件。如果觉得不好看的同学,可以通过自定义线段+Label的方式实现。绘制线段的部分可以参考上一篇分享里面有,同时也可以参考下面绘制扇形或者球形进度指示器的部分。
  2. 安全赋值
  • 我们通常看到的下载进度都是0%~100%这种表达方式,所以表示下载进度的数值范围是0~1.
  • 然而UISlider的范围是可以自定义的,所以我们需要做一下数值的安全处理,让最终下载进度的数值范围在0~1之间。

一行代码搞定:

@property (weak, nonatomic) IBOutlet UIProgressView *lineView;

- (IBAction)sliderValueChanged:(UISlider *)sender {
    
    //    对进度条进行赋值,同时对数值进行安全处理
    self.lineView.progress  =  (sender.value - sender.minimumValue) / (sender.maximumValue - sender.minimumValue);
}

完成效果:

progressLine.gif

4. 扇形进度指示器

  1. 定义扇形的中心、扇形的半径、扇形的起点;
  2. 计算扇形的结束位置:起点 + 进度百分比*2PI
  3. 根据起始点、原点、半径绘制弧线.
  4. 从弧线结束为止绘制一条线段到圆心。这样系统会自动闭合图形,绘制一条从圆心到弧线起点的线段。
  5. 设置扇形的填充模式、填充颜色。
  6. 给View设置一个进度的属性,用来让外界赋值。
  7. 重新进度属性的set方法,为的是给进度赋值的时候可以时时刷新UI,同时用文字Label显示进度的具体数值。 代码如下:
@interface SectorProgress : UIView
@property(assign,nonatomic)CGFloat progress;
@property(weak,nonatomic) IBOutlet UILabel *progressLabel;

@end


- (void)drawRect:(CGRect)rect {
//    定义扇形中心
    CGPoint origin = CGPointMake(100, 100);
//    定义扇形半径
    CGFloat radius = 100.0f;
    
//    设定扇形起点位置
    CGFloat startAngle = - M_PI_2;
//    根据进度计算扇形结束位置
    CGFloat endAngle = startAngle + self.progress * M_PI * 2;
    
//    根据起始点、原点、半径绘制弧线
    UIBezierPath *sectorPath = [UIBezierPath bezierPathWithArcCenter:origin radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
    
//    从弧线结束为止绘制一条线段到圆心。这样系统会自动闭合图形,绘制一条从圆心到弧线起点的线段。
    [sectorPath addLineToPoint:origin];
    
//    设置扇形的填充颜色
    [[UIColor darkGrayColor] set];
    
//    设置扇形的填充模式
    [sectorPath fill];
}


//重写progress的set方法,可以在赋值的同时给label赋值
- (void)setProgress:(CGFloat)progress{
    _progress = progress;
    
//    对label进行赋值
    self.progressLabel.text = [NSString stringWithFormat:@"%0.2f%%",progress * 100];
//    赋值结束之后要刷新UI,不然看不到扇形的变化
    [self setNeedsDisplay];
}

完成效果:

sectorProgress.gif

5. 球形指示器

球形指示器几乎和扇形的一样,只是在绘制的时候计算角度稍稍有点点点点不一样而已。

  1. 定义扇形的中心、扇形的半径;
  2. 定义起始点位置的属性,用来赋值;
  3. 根据起始点、原点、半径绘制弧线.
  4. 系统会自动的从起点到终点进行闭合,形成一个球形。
  5. 设置球形的填充模式、填充颜色。
  6. 为了让球形看起来更自然,要在球形的外面填充一个空心描边的圆形。
  7. 给View设置一个进度的属性,用来让外界赋值。
  8. 重新进度属性的set方法,这里和扇形指示器有一点点不一样。在这里我们需要根据进度计算球形的起始位置,同时刷新UI,对文字Label进行赋值。

球形是从下往上进行增长的,所以计算角度的时候起点要从PI/2开始。

@interface BallProgress ()
@property(assign,nonatomic)CGFloat progress;
@property(assign,nonatomic)CGFloat startAngle;
@property(assign,nonatomic)CGFloat endAngle;

@property(weak,nonatomic) IBOutlet UILabel *progressLabel;


@end

- (void)drawRect:(CGRect)rect {
    CGPoint origin = CGPointMake(100, 100);
    CGFloat radius = 95.0f;
    
    UIBezierPath *ballPath = [UIBezierPath bezierPathWithArcCenter:origin radius:radius startAngle:_startAngle endAngle:_endAngle clockwise:YES];
    
    [[UIColor purpleColor]set];
    [ballPath fill];
    
//    在球形的外面绘制一个描边空心的圆形,不然很难看
    UIBezierPath *strokePath = [UIBezierPath bezierPathWithArcCenter:origin radius:radius startAngle:0 endAngle:-0.00000001 clockwise:YES];
    [[UIColor lightGrayColor]set];
    [strokePath stroke];
}


- (void)setProgress:(CGFloat)progress{
    _progress = progress;
    
//    设置起始点,位置是根据进度动态变换的
    self.startAngle = M_PI_2 - progress * M_PI;
    self.endAngle = M_PI_2 + progress * M_PI;
    
    self.progressLabel.text = [NSString stringWithFormat:@"%0.2f%%",progress * 100];
    
    [self setNeedsDisplay];
}

最终完成效果:

ballProgress.gif

源代码下载地址

好了,过年不戳更,新年有大吉~加油!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android先生

Android知识总结——Path常用方法解析 - 简书

前言:开发过程中很容易忘记一些API的使用方法,网上搜索或者在源码里找也很难短时间内筛选出自己需要的,遂自己将这些知识总结一番

823
来自专栏Java帮帮-微信公众号-技术文章全总结

【Java案例】余弦函数

案例描述 在屏幕上画出余弦函数cos(x)曲线,如图1.6所示。 ? 图1.6 余弦函数cos(x)曲线 案例分析 连续的曲线是由点组成的,点与点之间距离比较...

3356
来自专栏章鱼的慢慢技术路

Python中的高级turtle(海龟)作图(续)

1805
来自专栏软件开发

HTML5 学习总结(四)——canvas绘图、WebGL、SVG

一、Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技...

43910
来自专栏HenCoder

Android 开发进阶: 自定义 View 1-1 绘制基础

从今天开始,HenCoder 就正式开讲知识技能了。按照我的计划,第一季是 UI,UI 一共分为三部分:绘制、布局和触摸反馈。本期是绘制部分的第一期。绘制大概会...

682
来自专栏Android知识点总结

开源计划之--Android绘图库--LogicCanvas

Painter采用单例模式 优化原型模式,各Shape采用深拷贝来解决构造较长、繁琐的情况 比较new 对象和拷贝的效率问题,拷贝一点。具体见文:来谈谈Ja...

673
来自专栏编程之旅

高性能设置圆角,告别离屏渲染

今天来写一个老生常谈的话题,也是一个面试的高频问题,我也在面试时不止一次被问到过这个问题——如何高性能的设置圆角。就用他作为2017年春节上班之后的第一篇文章。

961
来自专栏落影的专栏

iOS坐标系探究

APP 在渲染视图时,需要在坐标系中指定绘制区域。这个概念看似乎简单,事实并非如此。

2263
来自专栏逍遥剑客的游戏开发

Direct3D学习(六):动画基础(1)动画和运动中的时间

1185
来自专栏老马寒门IT

Html5 学习系列(五)Canvas绘图API快速入门(2)

Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来。接下里我会在本文中给各位介绍Canvas的...

2138

扫码关注云+社区