自定义圆形进度条

来源：互联网发布：nginx io模型编辑：程序博客网时间：2024/05/21 06:51

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

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

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

.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文件里就是具体实现了

#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];

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

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

1 0