之前做项目的时候有用到环形进度条,先是在网上找了一下第三方控件,发现好用是好用,就是东西太多了,有点复杂,还不如自己写一个简单点适合自己用的。
先把自定义控件的效果图贴出来。
其实我写的这个控件很简单。索性就直接把源码贴出来吧。
.h文件的内容就是一些声明
- #import <UIKit/UIKit.h>
- @interface ProgressView : UIView
- //中心颜色
- @property (strong, nonatomic)UIColor *centerColor;
- //圆环背景色
- @property (strong, nonatomic)UIColor *arcBackColor;
- //圆环色
- @property (strong, nonatomic)UIColor *arcFinishColor;
- @property (strong, nonatomic)UIColor *arcUnfinishColor;
- //百分比数值(0-1)
- @property (assign, nonatomic)float percent;
- //圆环宽度
- @property (assign, nonatomic)float width;
- @end
.m文件里就是具体实现了
对于初学者、这里有一篇CGContext方法的总结。入口:传送门
下文还涉及到ParagraphStyle文本属性。科普入口:传送门
- #import "ProgressView.h"
- @implementation ProgressView
- - (id)initWithFrame:(CGRect)frame{
- self = [super initWithFrame:frame];
- if (self) {
- self.backgroundColor = ClearColor;
- _percent = 0;
- _width = 0;
- }
- return self;
- }
- - (void)setPercent:(float)percent{
- _percent = percent;
- [self setNeedsDisplay];
- }
- - (void)drawRect:(CGRect)rect{
- [self addArcBackColor];
- [self drawArc];
- [self addCenterBack];
- [self addCenterLabel];
- }
- - (void)addArcBackColor{
- CGColorRef color = (_arcBackColor == nil) ? [UIColorlightGrayColor].CGColor : _arcBackColor.CGColor;
- CGContextRef contextRef = UIGraphicsGetCurrentContext();
- CGSize viewSize = self.bounds.size;
- CGPoint center = CGPointMake(viewSize.width / 2, viewSize.height / 2);
- // Draw the slices.
- CGFloat radius = viewSize.width / 2;
- CGContextBeginPath(contextRef);
- CGContextMoveToPoint(contextRef, center.x, center.y);
- CGContextAddArc(contextRef, center.x, center.y, radius,0,2*M_PI, 0);
- CGContextSetFillColorWithColor(contextRef, color);
- CGContextFillPath(contextRef);
- }
- - (void)drawArc{
- if (_percent == 0 || _percent > 1) {
- return;
- }
- if (_percent == 1) {
- CGColorRef color = (_arcFinishColor == nil) ? [UIColorgreenColor].CGColor : _arcFinishColor.CGColor;
- CGContextRef contextRef = UIGraphicsGetCurrentContext();
- CGSize viewSize = self.bounds.size;
- CGPoint center = CGPointMake(viewSize.width / 2, viewSize.height / 2);
- // Draw the slices.
- CGFloat radius = viewSize.width / 2;
- CGContextBeginPath(contextRef);
- CGContextMoveToPoint(contextRef, center.x, center.y);
- CGContextAddArc(contextRef, center.x, center.y, radius,0,2*M_PI, 0);
- CGContextSetFillColorWithColor(contextRef, color);
- CGContextFillPath(contextRef);
- }else{
- float endAngle = 2*M_PI*_percent;
- CGColorRef color = (_arcUnfinishColor == nil) ? [UIColorblueColor].CGColor : _arcUnfinishColor.CGColor;
- CGContextRef contextRef = UIGraphicsGetCurrentContext();
- CGSize viewSize = self.bounds.size;
- CGPoint center = CGPointMake(viewSize.width / 2, viewSize.height / 2);
- // Draw the slices.
- CGFloat radius = viewSize.width / 2;
- CGContextBeginPath(contextRef);
- CGContextMoveToPoint(contextRef, center.x, center.y);
- CGContextAddArc(contextRef, center.x, center.y, radius,0,endAngle, 0);
- CGContextSetFillColorWithColor(contextRef, color);
- CGContextFillPath(contextRef);
- }
- }
- -(void)addCenterBack{
- float width = (_width == 0) ? 5 : _width;
- CGColorRef color = (_centerColor == nil) ? [UIColorwhiteColor].CGColor : _centerColor.CGColor;
- CGContextRef contextRef = UIGraphicsGetCurrentContext();
- CGSize viewSize = self.bounds.size;
- CGPoint center = CGPointMake(viewSize.width / 2, viewSize.height / 2);
- // Draw the slices.
- CGFloat radius = viewSize.width / 2 - width;
- CGContextBeginPath(contextRef);
- CGContextMoveToPoint(contextRef, center.x, center.y);
- CGContextAddArc(contextRef, center.x, center.y, radius,0,2*M_PI, 0);
- CGContextSetFillColorWithColor(contextRef, color);
- CGContextFillPath(contextRef);
- }
- - (void)addCenterLabel{
- NSString *percent = @"";
- float fontSize = 14;
- UIColor *arcColor = [UIColor blueColor];
- if (_percent == 1) {
- percent = @"100%";
- fontSize = 14;
- arcColor = (_arcFinishColor == nil) ? [UIColorgreenColor] : _arcFinishColor;
- }else if(_percent < 1 && _percent >= 0){
- fontSize = 13;
- arcColor = (_arcUnfinishColor == nil) ? [UIColorblueColor] : _arcUnfinishColor;
- percent = [NSStringstringWithFormat:@"%0.2f%%",_percent*100];
- }
- CGSize viewSize = self.bounds.size;
- NSMutableParagraphStyle *paragraph = [[NSMutableParagraphStyle alloc] init];
- paragraph.alignment = NSTextAlignmentCenter;
- NSDictionary *attributes = [NSDictionarydictionaryWithObjectsAndKeys:[UIFontboldSystemFontOfSize:fontSize],NSFontAttributeName,arcColor,NSForegroundColorAttributeName,[UIColorclearColor],NSBackgroundColorAttributeName,paragraph,NSParagraphStyleAttributeName,nil];
- [percent drawInRect:CGRectMake(5, (viewSize.height-fontSize)/2, viewSize.width-10, fontSize)withAttributes:attributes];
- }
- @end
具体的调用就是
- ProgressView *progress = [[ProgressViewalloc]initWithFrame:CGRectMake(detil.width-65, 10, 60, 60)];
- progress.arcFinishColor = COLOR_STRING(@"#75AB33");
- progress.arcUnfinishColor = COLOR_STRING(@"#0D6FAE");
- progress.arcBackColor = COLOR_STRING(@"#EAEAEA");
- progress.percent = 1;
- [detil addSubview:progress];
当然这么简单肯定会有缺陷,所以如果你有发现什么问题,或更好地方法可以提出来大家一起研究。