在这浓浓的鞭炮声中，迎来了这个系列的最后一篇。哈哈～这是多么有纪念意义的春节呀。
今天我们来写一个小小的Demo，来演练一下通过OC绘图，根据进度自己绘制出来一个进度条，或者进度扇形、进度球形。
在此之前，分享了一些关于绘图方面的基础。可以通过传输门快捷进入：
1. 效果展示及思维导图
效果展示：
效果展示.gif
思维导图：
进度条、进度扇形、进度球的思维导图.png
2. 项目准备工作
- 为了省事，我们所有的绘图都是在SotryBoard上面进行。如果有兴趣的同学可以自己通过代码约束的方式实现。
- 用一个UISlider来模拟进度下载，这样可以通过拖动滑杆，感受到下载的过程。
- 实际开发中的提醒：在实际中，下载进度通常都不会放在主线程上，所以子线程获得下载的进度之后，不要忘记回到主线程刷新UI。
- 我们这些模拟都是通过滑杆的，所以所有的操作不涉及到多线程。
3. 进度条的实现
-
进度条我们这里就直接使用了SB的UIProgressView这个控件。如果觉得不好看的同学，可以通过自定义线段+Label的方式实现。绘制线段的部分可以参考上一篇分享里面有，同时也可以参考下面绘制扇形或者球形进度指示器的部分。
-
安全赋值
- 我们通常看到的下载进度都是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. 扇形进度指示器
- 定义扇形的中心、扇形的半径、扇形的起点；
- 计算扇形的结束位置：起点 + 进度百分比*2PI
- 根据起始点、原点、半径绘制弧线.
- 从弧线结束为止绘制一条线段到圆心。这样系统会自动闭合图形，绘制一条从圆心到弧线起点的线段。
- 设置扇形的填充模式、填充颜色。
- 给View设置一个进度的属性，用来让外界赋值。
- 重新进度属性的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. 球形指示器
球形指示器几乎和扇形的一样，只是在绘制的时候计算角度稍稍有点点点点不一样而已。
- 定义扇形的中心、扇形的半径；
- 定义起始点位置的属性，用来赋值；
- 根据起始点、原点、半径绘制弧线.
- 系统会自动的从起点到终点进行闭合，形成一个球形。
- 设置球形的填充模式、填充颜色。
- 为了让球形看起来更自然，要在球形的外面填充一个空心描边的圆形。
- 给View设置一个进度的属性，用来让外界赋值。
- 重新进度属性的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
好了，过年不戳更，新年有大吉～加油！
网友评论