Quartz2D——自定義圓形進度條

之前做項目的時候有用到環形進度條，先是在網上找了一下第三方控件，發現好用是好用，就是東西太多了，有點複雜，還不如自己寫一個簡單點適合自己用的。

先把自定義控件的效果圖貼出來。

      

其實我寫的這個控件很簡單。索性就直接把源碼貼出來吧。

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

當然這些都有默認值，也可以不設置。

當然這麼簡單肯定會有缺陷，所以如果你有發現什麼問題，或更好地方法可以提出來大家一起研究。