【问题标题】:draw a circular progress view which shows range绘制一个显示范围的圆形进度视图
【发布时间】:2015-07-03 05:53:32
【问题描述】:

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

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

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

谢谢

【问题讨论】:

  • 我已经在问题中说清楚了,我想你错过了----“我不知道如何处理这个设计,需要帮助。”
  • 提示:ProgressView,玩一下,看看网上的例子。这就是你学习的方式。

标签: ios objective-c iphone uiview core-graphics


【解决方案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

【讨论】:

  • 如果你想要你更新的图像,你可以使用图像或渐变层作为背景。然后使用 CAShaper 层设置 maskLayer
  • 由于版权问题我已经删除了。实际上我需要的是以前的图像。我通过你的方法,让我看看我能走多远。
  • 如何在两个图层中添加边框?/这可能吗
【解决方案2】:

您可以使用CAShapeLayerCGPath 以编程方式绘制它。

【讨论】:

    猜你喜欢
    • 2015-03-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-07-15
    • 1970-01-01
    相关资源
    最近更新 更多