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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,471评论 25 707
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,158评论 0 17
  • 我有一位朋友,她终日不开心。也许没有什么能使她开心了吧!每一次见到我都只是勉强地扯扯嘴角。或许唯一能使她从绽...
    回忆斑驳阅读 121评论 0 0
  • 首先,介绍下什么是hosts Hosts是一个没有扩展名的系统文件,可以用系统自带的记事本等工具打开,作用就是将一...
    高高叔叔阅读 12,305评论 7 13
  • 黑幕罩上苍穹夜已眠寂静隐藏山中一双眼凝望星空是兽与宇宙的神秘交谈狮子张口即将开战 自然赐予力量母性的慈爱与责任并肩...
    神呼吸阅读 299评论 0 0