绘制一个显示范围的循环进度视图

Question

圆形视图将显示进度，您可以看到我已经指出，圆形视图应该按范围划分，并显示进度达到了多少百分比。

我不知道如何使用此设计以及如何在相同范围内划分视图并显示用户取得的进展。

任何建议和帮助将不胜感激。

由于

Answer 1

使用两个CAShapeLayer，一个作为背景，一个作为进度

实施例

-(CAShapeLayer *)createCircleWithBounds:(CGRect)bounds
                           Position:(CGPoint)position
                        StrokeColor:(UIColor*)color
                          LineWidth:(CGFloat)lineWidth
{
CAShapeLayer* shapelayer = [CAShapeLayer layer];
shapelayer.strokeColor = color.CGColor;
shapelayer.fillColor = [UIColor clearColor].CGColor;
shapelayer.path = [UIBezierPath bezierPathWithRoundedRect:bounds cornerRadius:CGRectGetWidth(bounds)/2].CGPath;
shapelayer.bounds = bounds;
shapelayer.position = position;
shapelayer.lineCap = kCALineCapButt;
shapelayer.lineWidth = lineWidth;
return shapelayer;
}

然后

 CAShapeLayer * progressLayer = [self createCircleWithBounds:CGRectMake(0, 0, 100, 100) Position:self.view.center StrokeColor:[UIColor whiteColor] LineWidth:5.0];
progressLayer.strokeStart = 0.2;
progressLayer.strokeEnd = 0.8;
[self.view.layer addSublayer:progressLayer];

CAShapeLayer * otherLayer = [self createCircleWithBounds:CGRectMake(0, 0, 100, 100) Position:self.view.center StrokeColor:[UIColor blueColor] LineWidth:5.0];
otherLayer.strokeStart = 0.2;
otherLayer.strokeEnd = 0.5;
[self.view.layer addSublayer:otherLayer];

那么你需要做的就是使用一些数学函数来改变进度改变时的otherLayer.strokeEnd

Answer 2

您可以使用CAShapeLayer和CGPath以编程方式绘制它。