Quartz2D——自定义圆形进度条

之前做项目的时候有用到环形进度条，先是在网上找了一下第三方控件，发现好用是好用，就是东西太多了，有点复杂，还不如自己写一个简单点适合自己用的。

先把自定义控件的效果图贴出来。

      

其实我写的这个控件很简单。索性就直接把源码贴出来吧。

.h文件的内容就是一些声明

[objc]  view plain copy

1. #import <UIKit/UIKit.h>  
2.   
3. @interface ProgressView : UIView  
4.   
5. //中心颜色  
6. @property (strong, nonatomic)UIColor *centerColor;  
7. //圆环背景色  
8. @property (strong, nonatomic)UIColor *arcBackColor;  
9. //圆环色  
10. @property (strong, nonatomic)UIColor *arcFinishColor;  
11. @property (strong, nonatomic)UIColor *arcUnfinishColor;  
12.   
13.   
14. //百分比数值（0-1）  
15. @property (assign, nonatomic)float percent;  
16.   
17. //圆环宽度  
18. @property (assign, nonatomic)float width;  
19.   
20. @end  

.m文件里就是具体实现了

对于初学者、这里有一篇CGContext方法的总结。入口：传送门

下文还涉及到ParagraphStyle文本属性。科普入口：传送门

[objc]  view plain copy

1. #import "ProgressView.h"  
2.   
3. @implementation ProgressView  
4.   
5. - (id)initWithFrame:(CGRect)frame{  
6.     self = [super initWithFrame:frame];  
7.     if (self) {  
8.         self.backgroundColor = ClearColor;  
9.         _percent = 0;  
10.         _width = 0;  
11.     }  
12.       
13.     return self;  
14. }  
15.   
16. - (void)setPercent:(float)percent{  
17.     _percent = percent;  
18.     [self setNeedsDisplay];  
19. }  
20.   
21. - (void)drawRect:(CGRect)rect{  
22.     [self addArcBackColor];  
23.     [self drawArc];  
24.     [self addCenterBack];  
25.     [self addCenterLabel];  
26. }  
27.   
28. - (void)addArcBackColor{  
29.     CGColorRef color = (_arcBackColor == nil) ? [UIColorlightGrayColor].CGColor : _arcBackColor.CGColor;  
30.   
31.     CGContextRef contextRef = UIGraphicsGetCurrentContext();  
32.     CGSize viewSize = self.bounds.size;  
33.     CGPoint center = CGPointMake(viewSize.width / 2, viewSize.height / 2);  
34.       
35.     // Draw the slices.  
36.     CGFloat radius = viewSize.width / 2;  
37.     CGContextBeginPath(contextRef);  
38.     CGContextMoveToPoint(contextRef, center.x, center.y);  
39.     CGContextAddArc(contextRef, center.x, center.y, radius,0,2*M_PI, 0);  
40.     CGContextSetFillColorWithColor(contextRef, color);  
41.     CGContextFillPath(contextRef);  
42. }  
43.   
44. - (void)drawArc{  
45.     if (_percent == 0 || _percent > 1) {  
46.         return;  
47.     }  
48.       
49.     if (_percent == 1) {  
50.         CGColorRef color = (_arcFinishColor == nil) ? [UIColorgreenColor].CGColor : _arcFinishColor.CGColor;  
51.           
52.         CGContextRef contextRef = UIGraphicsGetCurrentContext();  
53.         CGSize viewSize = self.bounds.size;  
54.         CGPoint center = CGPointMake(viewSize.width / 2, viewSize.height / 2);  
55.         // Draw the slices.  
56.         CGFloat radius = viewSize.width / 2;  
57.         CGContextBeginPath(contextRef);  
58.         CGContextMoveToPoint(contextRef, center.x, center.y);  
59.         CGContextAddArc(contextRef, center.x, center.y, radius,0,2*M_PI, 0);  
60.         CGContextSetFillColorWithColor(contextRef, color);  
61.         CGContextFillPath(contextRef);  
62.     }else{  
63.           
64.         float endAngle = 2*M_PI*_percent;  
65.           
66.         CGColorRef color = (_arcUnfinishColor == nil) ? [UIColorblueColor].CGColor : _arcUnfinishColor.CGColor;  
67.         CGContextRef contextRef = UIGraphicsGetCurrentContext();  
68.         CGSize viewSize = self.bounds.size;  
69.         CGPoint center = CGPointMake(viewSize.width / 2, viewSize.height / 2);  
70.         // Draw the slices.  
71.         CGFloat radius = viewSize.width / 2;  
72.         CGContextBeginPath(contextRef);  
73.         CGContextMoveToPoint(contextRef, center.x, center.y);  
74.         CGContextAddArc(contextRef, center.x, center.y, radius,0,endAngle, 0);  
75.         CGContextSetFillColorWithColor(contextRef, color);  
76.         CGContextFillPath(contextRef);  
77.     }  
78.       
79. }  
80.   
81. -(void)addCenterBack{  
82.     float width = (_width == 0) ? 5 : _width;  
83.       
84.     CGColorRef color = (_centerColor == nil) ? [UIColorwhiteColor].CGColor : _centerColor.CGColor;  
85.     CGContextRef contextRef = UIGraphicsGetCurrentContext();  
86.     CGSize viewSize = self.bounds.size;  
87.     CGPoint center = CGPointMake(viewSize.width / 2, viewSize.height / 2);  
88.     // Draw the slices.  
89.     CGFloat radius = viewSize.width / 2 - width;  
90.     CGContextBeginPath(contextRef);  
91.     CGContextMoveToPoint(contextRef, center.x, center.y);  
92.     CGContextAddArc(contextRef, center.x, center.y, radius,0,2*M_PI, 0);  
93.     CGContextSetFillColorWithColor(contextRef, color);  
94.     CGContextFillPath(contextRef);  
95. }  
96.   
97. - (void)addCenterLabel{  
98.     NSString *percent = @"";  
99.   
100.     float fontSize = 14;  
101.     UIColor *arcColor = [UIColor blueColor];  
102.     if (_percent == 1) {  
103.         percent = @"100%";  
104.         fontSize = 14;  
105.         arcColor = (_arcFinishColor == nil) ? [UIColorgreenColor] : _arcFinishColor;  
106.           
107.     }else if(_percent < 1 && _percent >= 0){  
108.           
109.         fontSize = 13;  
110.         arcColor = (_arcUnfinishColor == nil) ? [UIColorblueColor] : _arcUnfinishColor;  
111.         percent = [NSStringstringWithFormat:@"%0.2f%%",_percent*100];  
112.     }  
113.       
114.     CGSize viewSize = self.bounds.size;  
115.     NSMutableParagraphStyle *paragraph = [[NSMutableParagraphStyle alloc] init];  
116.     paragraph.alignment = NSTextAlignmentCenter;  
117.     NSDictionary *attributes = [NSDictionarydictionaryWithObjectsAndKeys:[UIFontboldSystemFontOfSize:fontSize],NSFontAttributeName,arcColor,NSForegroundColorAttributeName,[UIColorclearColor],NSBackgroundColorAttributeName,paragraph,NSParagraphStyleAttributeName,nil];  
118.   
119.     [percent drawInRect:CGRectMake(5, (viewSize.height-fontSize)/2, viewSize.width-10, fontSize)withAttributes:attributes];  
120. }  
121.   
122. @end  

具体的调用就是

  

[objc]  view plain copy

1. ProgressView *progress = [[ProgressViewalloc]initWithFrame:CGRectMake(detil.width-65, 10, 60, 60)];  
2. progress.arcFinishColor = COLOR_STRING(@"#75AB33");  
3. progress.arcUnfinishColor = COLOR_STRING(@"#0D6FAE");  
4. progress.arcBackColor = COLOR_STRING(@"#EAEAEA");  
5. progress.percent = 1;  
6. [detil addSubview:progress];  

当然这些都有默认值，也可以不设置。

当然这么简单肯定会有缺陷，所以如果你有发现什么问题，或更好地方法可以提出来大家一起研究。