首先感谢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
网友评论