绘制一个显示范围的圆形进度视图

Question

圆形视图将显示进度正如您所看到的我已经指出，圆形视图应按范围划分并且将显示进度达到多少百分比。

我不知道如何处理这种设计以及如何将视图划分为相等的范围并显示用户取得了多少进步。

如有任何建议和帮助，我们将不胜感激。

谢谢

Answer 1

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

Answer 2

使用两个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 当进度改变时

绘制一个显示范围的圆形进度视图

draw a circular progress view which shows range

iphone

core-graphics

objective-c

uiview

ios