iOS 自定義控件 progressView(環形進度條)

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

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

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

.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) ? [UIColor lightGrayColor].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) ? [UIColor greenColor].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) ? [UIColor blueColor].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) ? [UIColor whiteColor].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) ? [UIColor greenColor] : _arcFinishColor;

    }else if(_percent < 1 && _percent >= 0){

        fontSize = 13;

        arcColor = (_arcUnfinishColor == nil) ? [UIColor blueColor] : _arcUnfinishColor;

        percent = [NSString stringWithFormat:@"%0.2f%%",_percent*100];

    }

    CGSize viewSize = self.bounds.size;

    NSMutableParagraphStyle *paragraph = [[NSMutableParagraphStyle alloc] init];

    paragraph.alignment = NSTextAlignmentCenter;

    NSDictionary *attributes = [NSDictionary dictionaryWithObjectsAndKeys:[UIFont boldSystemFontOfSize:fontSize],NSFontAttributeName ,arcColor,NSForegroundColorAttributeName,[UIColor clearColor],NSBackgroundColorAttributeName,paragraph,NSParagraphStyleAttributeName,nil];

    [percent drawInRect:CGRectMake(5, (viewSize.height-fontSize)/2, viewSize.width-10, fontSize) withAttributes:attributes];

}

@end

具體的調用就是

  ProgressView *progress = [[ProgressView alloc]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];

當然這些都有預設值，也可以不設定。

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

最後，如果你不想粘貼代碼，那麼源碼我也已經上傳到資源。

progressView 資源： 空間傳送門

最後的最後，感謝你一直看到結尾 —— LC