之前做项目的时候有用到环形进度条,先是在网上找了一下第三方控件,发现好用是好用,就是东西太多了,有点复杂,还不如自己写一个简单点适合自己用的。
先把自定义控件的效果图贴出来。
其实我写的这个控件很简单。索性就直接把源码贴出来吧。
.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
#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];