iOS-强大的进度图绘制框架MDRadialProgress

首先感谢mdinacci大神在GitHub上提供的Demo，地址：https://github.com/mdinacci/MDRadialProgress。

公司今天有一个进度饼状图的效果要做，本想自己先做一个demo，同事在网上搜出来这位大神的demo，看了一下，总结的十分详细，就用几个比较经典的实例拿来分享一下。请大家自行在上面链接中下载MDRadialProgress框架。

1.在视图控制器中导入以下三个.h文件：

#import "MDRadialProgressView.h"
#import "MDRadialProgressTheme.h"
#import "MDRadialProgressLabel.h"

2.自定义创建MDRadialProgressView对象的方法：

- (MDRadialProgressView *)progressViewWithFrame:(CGRect)frame
{
MDRadialProgressView *view = [[MDRadialProgressView alloc] initWithFrame:frame];

// Only required in this demo to align vertically the progress views.
view.center = CGPointMake(self.view.center.x + 80, view.center.y);

return view;
}

3.自定义创建Label的方法：

- (UILabel *)labelAtY:(CGFloat)y andText:(NSString *)text
{
CGRect frame = CGRectMake(5, y, 180, 50);
UILabel *label = [[UILabel alloc] initWithFrame:frame];
label.text = text;
label.numberOfLines = 0;
label.textAlignment = NSTextAlignmentCenter;
label.font = [label.font fontWithSize:14];

return label;
}

4.以下代码在viewDidLoad方法中执行，我们按实例逐一解析：

//添加scrollView，用以承接MDRadialProgressView，并初始化x，y，为MDRadialProgressView的frame做准备
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];
[self.view addSubview:scrollView];

self.view.backgroundColor = [UIColor whiteColor];

int x = self.view.center.x + 80;
int y = 20;

Demo1：其中progressTotal为进度总量、progressCounter为已完成的进度量、sliceDividerHidden为是否显示分割线，YES值时不显示。（已解释的属性在下面demo中将不再解释）。

UILabel *label = [self labelAtY:y andText:@"Standard theme: "];
[scrollView addSubview:label];

CGRect frame = CGRectMake(x, y, 50, 50);
MDRadialProgressView *radialView = [self progressViewWithFrame:frame];
radialView.progressTotal = 7;
radialView.progressCounter = 4;
radialView.theme.sliceDividerHidden = YES;
[scrollView addSubview:radialView];

效果如下：

demo1.png

Demo2：其中setIsIndeterminateProgress为是否明确进度，请注意！如果该值设置为YES时，progressCounter属性失效。

y += 80;
UILabel *indeterminateLabel = [self labelAtY:y andText:@"Indeterminate Progress: "];
[scrollView addSubview:indeterminateLabel];

CGRect indeterminateFrame = CGRectMake(x, y, 50, 50);
MDRadialProgressView *indeterminateRadialView = [self progressViewWithFrame:indeterminateFrame];
indeterminateRadialView.progressTotal = 10;
indeterminateRadialView.progressCounter = 8;
indeterminateRadialView.theme.sliceDividerHidden = YES;
[indeterminateRadialView setIsIndeterminateProgress:YES];
//[indeterminateRadialView setIsIndeterminateProgress:NO];
[scrollView addSubview:indeterminateRadialView];

效果如下：绿色部分会有个转圈的动画效果

demo2.png

Demo3：其中completedColor为已完成进度条的颜色、incompletedColor为未完成进度条的颜色、centerColor为中心圆的颜色、labelColor为进度文本的字体颜色、labelShadowColor为进度文本的字体阴影颜色。

y += 80;
label = [self labelAtY:y andText:@"Custom theme, shared by all instances: "];
[scrollView addSubview:label];

MDRadialProgressTheme *newTheme = [[MDRadialProgressTheme alloc] init];
newTheme.completedColor = [UIColor colorWithRed:90/255.0 green:212/255.0 blue:39/255.0 alpha:1.0];
newTheme.incompletedColor = [UIColor colorWithRed:164/255.0 green:231/255.0 blue:134/255.0 alpha:1.0];
newTheme.centerColor = [UIColor clearColor];
newTheme.centerColor = [UIColor colorWithRed:224/255.0 green:248/255.0 blue:216/255.0 alpha:1.0];
newTheme.sliceDividerHidden = YES;
newTheme.labelColor = [UIColor blackColor];
newTheme.labelShadowColor = [UIColor whiteColor];

y += 50;
frame = CGRectMake(10, y, 60, 60);
MDRadialProgressView *radialView7 = [[MDRadialProgressView alloc] initWithFrame:frame andTheme:newTheme];
radialView7.progressTotal = 4;
radialView7.progressCounter = 1;
[scrollView addSubview:radialView7];

frame = CGRectMake(90, y, 60, 60);
MDRadialProgressView *radialView8 = [[MDRadialProgressView alloc] initWithFrame:frame andTheme:newTheme];
radialView8.progressTotal = 4;
radialView8.progressCounter = 2;
[scrollView addSubview:radialView8];

frame = CGRectMake(170, y, 60, 60);
MDRadialProgressView *radialView9 = [[MDRadialProgressView alloc] initWithFrame:frame andTheme:newTheme];
radialView9.progressTotal = 4;
radialView9.progressCounter = 3;
[scrollView addSubview:radialView9];

frame = CGRectMake(250, y, 60, 60);
MDRadialProgressView *radialView10 = [[MDRadialProgressView alloc] initWithFrame:frame andTheme:newTheme];
radialView10.progressTotal = 4;
radialView10.progressCounter = 4;
[scrollView addSubview:radialView10];

效果如下：

demo3.png

Demo4：其中clockwise为方向属性，YES值为顺时针。thickness为进度圈的厚度（外径-内径）。sliceDividerColor为分割线的颜色。sliceDividerThickness为分割线的厚度。

y += 130;
label = [self labelAtY:y andText:@"No label, anti-clockwise: "];
[scrollView addSubview:label];

frame = CGRectMake(x, y, 70, 70);
MDRadialProgressView *radialView4 = [self progressViewWithFrame:frame];

radialView4.progressTotal = 10;
radialView4.progressCounter = 3;
radialView4.clockwise = NO;
radialView4.theme.completedColor = [UIColor colorWithRed:90/255.0 green:200/255.0 blue:251/255.0 alpha:1.0];
radialView4.theme.incompletedColor = [UIColor colorWithRed:82/255.0 green:237/255.0 blue:199/255.0 alpha:1.0];
radialView4.theme.thickness = 30;
radialView4.theme.sliceDividerHidden = NO;
radialView4.theme.sliceDividerColor = [UIColor whiteColor];
radialView4.theme.sliceDividerThickness = 2;
radialView4.label.hidden = YES;

[scrollView addSubview:radialView4];

效果如下：

demo4.png

Demo5：其中startingSlice为进度的开始位置（最小值为1），completedColor为已完成进度区域的颜色，sliceDividerThickness为各个进度块之间的距离（当sliceDividerHidden值为YES时设置该值无效）。

y += 130;
label = [self labelAtY:y andText:@"Huge thickness, no divider: "];
[scrollView addSubview:label];

frame = CGRectMake(x, y, 100, 100);
MDRadialProgressView *radialView6 = [self progressViewWithFrame:frame];

radialView6.startingSlice = 5;
radialView6.progressTotal = 20;
radialView6.progressCounter = 9;
radialView6.clockwise = YES;
radialView6.theme.thickness = 70;
radialView6.theme.completedColor = [UIColor brownColor];
radialView6.theme.sliceDividerHidden=NO;
radialView6.theme.sliceDividerThickness = 0;

[scrollView addSubview:radialView6];

效果如下：

demo5.png