iOS 几种纯色圆进度条画法

---

1.绘图

创建一个进度条View在.h中声明如下：

#import@interface CircleProgress : UIView

{

CGContextRef ctx;

}

@property (nonatomic, assign) float lineWidth;

@property (nonatomic, strong) UIColor *lineColor;

@property (nonatomic, assign) float startAngle;

@property (nonatomic, assign) float endAngle;

@end

---

.m实现如下

- (void)drawRect:(CGRect)rect {

// Drawing code

if (_startAngle == 0)

{

_startAngle = 0;

}

if (_endAngle == 0)

{

_endAngle = 360.0f;

}

if (_lineWidth == 0)

{

_lineWidth = 3;

}

if (_lineColor == nil)

{

_lineColor = [UIColor blackColor];

}

ctx = UIGraphicsGetCurrentContext();

CGContextBeginPath(ctx);

[_lineColor set];// 两种设置颜色的方式都可以

CGContextSetLineWidth(ctx, _lineWidth); // 线的宽度

CGContextSetLineCap(ctx, kCGLineCapRound);

//图形上下文，x,y为圆点坐标，半径  startAngle为开始的弧度，endAngle为 结束的弧度，clockwise 0为顺时针，1为逆时针

CGContextAddArc(ctx, self.frame.size.width/2, self.frame.size.height/2, self.frame.size.width/2 - _lineWidth , _startAngle / (180/M_PI),_endAngle /(180/M_PI), 0);

CGContextSetFillColorWithColor(ctx, [UIColor blueColor].CGColor);

CGContextStrokePath(ctx);

CGContextAddArc(ctx,self.frame.size.width/2, self.frame.size.height/2, 10, 0, 2 * M_PI, 1);

CGContextSetFillColorWithColor(ctx, _lineColor.CGColor);

CGContextFillPath(ctx);

}

-(void)setEndAngle:(float)endAngle

{

_endAngle = endAngle;

[self setNeedsDisplay];

}

-(void)setStartAngle:(float)startAngle

{

_startAngle = startAngle;

[self setNeedsDisplay];

}

-(void)setLineWidth:(float)lineWidth

{

_lineWidth = lineWidth ;

[self setNeedsDisplay];

}

-(void)setLineColor:(UIColor *)lineColor

{

_lineColor = lineColor;

[self setNeedsDisplay];

}

---

具体实现如下：

_circleProgressView = [[CircleProgress alloc] initWithFrame:CGRectMake(40, 30, 240, 240)];

_circleProgressView.backgroundColor = [UIColor redColor];

_circleProgressView.lineWidth = 25;

_circleProgressView.lineColor = [UIColor blackColor];

_circleProgressView.startAngle = 0;

_circleProgressView.endAngle = 360;

[self.view addSubview:_circleProgressView];

第一种方法完工。

---

2.换汤不换药的再来一种  用UIBezierPath来实现

- (void)drawRect:(CGRect)rect {

// Drawing code

CGContextRef ref =  UIGraphicsGetCurrentContext();

CGContextBeginPath(ref);

[[UIColor blueColor] set];

CGContextSetLineWidth(ref, 10);

CGContextSetLineCap(ref, kCGLineCapRound);

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2, self.frame.size.height/2) radius:self.frame.size.width/2 - 10 startAngle:0 endAngle:_endAngle/180.0 *M_PI clockwise:YES];

CGContextAddPath(ref, path.CGPath);

CGContextStrokePath(ref);

}

- (void)setEndAngle:(CGFloat)endAngle

{

_endAngle = endAngle;

[self setNeedsDisplay];

}

---

3.用layer来完成

用layer来完成相应的纯色进度条比较方便快捷。

//创建CAShapeLayer

CAShapeLayer *layer = [CAShapeLayer layer];

layer.frame = CGRectMake(0, 0, 200, 200);

//创建路径

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:self.center radius:self.frame.size.width/2 - 10 startAngle:0 endAngle:M_PI clockwise:YES];

layer.path = path.CGPath;

layer.lineWidth = 9;

layer.fillColor=[UIColor clearColor].CGColor;

layer.strokeColor=[UIColor colorWithRed:0.76f green:0.89f blue:0.89f alpha:1.00f].CGColor;

layer.lineCap = kCALineCapRound;

layer.lineJoin = kCALineJoinRound;

[sel.view.layer addSublayer:layer];

---