- (id)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
self.progress = 0.1;
}
return self;
}
- (void)setProgress:(float)progress{
_progress = progress;
[self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect {
float width = self.frame.size.width;
float height = self.frame.size.height;
NSLog(@"width==%f,height==%f",width,height);
//这里为了保证 是正方形
float drawRangW = width>height?height:width;
float drawRangH = width>height?height:width;
CGPoint drawCenterPoint = CGPointMake(width/2.0, height/2.0);
NSArray *colors =@[(__bridge id)[UIColor colorWithRed:235/255.0 green:96/255.0 blue:125/255.0 alpha:1.0].CGColor,(__bridge id)[UIColor colorWithRed:77/255.0 green:118/255.0 blue:223/255.0 alpha:1.0].CGColor];
UIColor *bgCircleColor = [UIColor colorWithRed:97/255.0 green:99/255.0 blue:122/255.0 alpha:1.0];
CGFloat lineWidth = 10;
CGFloat radius = (drawRangW-2*lineWidth)/2.0;
//刻度距离 外圆的距离
CGFloat keduCircleDistance =30;
CGContextRef ctf = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(ctf, lineWidth);
// CGContextAddArc
CGContextAddArc(ctf, drawCenterPoint.x, drawCenterPoint.y, radius, 0, 360, false);
CGContextSetStrokeColorWithColor(ctf, bgCircleColor.CGColor);
CGContextStrokePath(ctf);
CGFloat startAngle = - M_PI_2;
CGFloat endAngle = -M_PI_2 + M_PI * 2 * _progress;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:drawCenterPoint radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
path.lineCapStyle = kCGLineCapRound;
//左侧渐变色
CAGradientLayer *leftLayer = [CAGradientLayer layer];
leftLayer.frame = self.bounds; // 分段设置渐变色
leftLayer.locations = @[@0.3, @0.9, @1];
leftLayer.colors = @[(id)[UIColor yellowColor].CGColor, (id)[UIColor greenColor].CGColor];
CAShapeLayer *layer = [CAShapeLayer layer];
[layer addSublayer:leftLayer];
layer.path = path.CGPath;
// [self.layer addSublayer:layer];
[[UIColor colorWithRed:235/255.0 green:96/255.0 blue:125/255.0 alpha:1.0] setStroke];
CGContextAddPath(ctf, path.CGPath);
CGContextSetLineCap(ctf, kCGLineCapRound);
CGContextStrokePath(ctf);
CGContextTranslateCTM(ctf,drawCenterPoint.x,drawCenterPoint.y);
for (int i=1; i<=60; i++) {
CGContextSaveGState(ctf);
[[UIColor colorWithRed:235/255.0 green:96/255.0 blue:125/255.0 alpha:1.0] setStroke];
if (i%5==0) {
CGContextMoveToPoint(ctf, 0, radius-keduCircleDistance-10);
CGContextAddLineToPoint(ctf, 0,radius-keduCircleDistance);
}else{
CGContextMoveToPoint(ctf, 0, radius-keduCircleDistance-5);
CGContextAddLineToPoint(ctf, 0,radius-keduCircleDistance);
}
CGContextSetLineWidth(ctf, 2);
// 渲染
CGContextStrokePath(ctf);
CGContextRestoreGState(ctf);
CGContextRotateCTM(ctf, 2 * M_PI /60);
}
}
ios 绘制 带刻度的环形进度条
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 本篇文章讲的是自定义View实现环形带刻度的进度条。和往常一样,主要还是想总结一下自定义View实现环形带刻度的进...
- 上次写了一篇Android 自定义View实现环形带刻度的进度条,这篇文章就简单了,只是在原来的基础上加一个颜色渐...