首先感謝mdinacci大神在GitHub上提供的Demo贝攒，地址：https://github.com/mdinacci/MDRadialProgress盗誊。
公司今天有一個(gè)進(jìn)度餅狀圖的效果要做，本想自己先做一個(gè)demo，同事在網(wǎng)上搜出來(lái)這位大神的demo哈踱，看了一下荒适，總結(jié)的十分詳細(xì)，就用幾個(gè)比較經(jīng)典的實(shí)例拿來(lái)分享一下开镣。請(qǐng)大家自行在上面鏈接中下載MDRadialProgress框架刀诬。
1.在視圖控制器中導(dǎo)入以下三個(gè).h文件：
#import "MDRadialProgressView.h"
#import "MDRadialProgressTheme.h"
#import "MDRadialProgressLabel.h"
2.自定義創(chuàng)建MDRadialProgressView對(duì)象的方法：
- (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.自定義創(chuàng)建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方法中執(zhí)行，我們按實(shí)例逐一解析：
//添加scrollView邪财，用以承接MDRadialProgressView陕壹，并初始化x，y卧蜓，為MDRadialProgressView的frame做準(zhǔn)備
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為進(jìn)度總量帐要、progressCounter為已完成的進(jìn)度量把敞、sliceDividerHidden為是否顯示分割線弥奸，YES值時(shí)不顯示。（已解釋的屬性在下面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為是否明確進(jìn)度盛霎，請(qǐng)注意！如果該值設(shè)置為YES時(shí)耽装，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];
效果如下：綠色部分會(huì)有個(gè)轉(zhuǎn)圈的動(dòng)畫效果
demo2.png
Demo3：其中completedColor為已完成進(jìn)度條的顏色、incompletedColor為未完成進(jìn)度條的顏色掉奄、centerColor為中心圓的顏色规个、labelColor為進(jìn)度文本的字體顏色、labelShadowColor為進(jìn)度文本的字體陰影顏色姓建。
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為方向?qū)傩缘郑琘ES值為順時(shí)針。thickness為進(jìn)度圈的厚度（外徑-內(nèi)徑）速兔。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為進(jìn)度的開始位置（最小值為1）涣狗，completedColor為已完成進(jìn)度區(qū)域的顏色谍婉，sliceDividerThickness為各個(gè)進(jìn)度塊之間的距離（當(dāng)sliceDividerHidden值為YES時(shí)設(shè)置該值無(wú)效）。
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
