如何围绕圆形 UIView 制作弯曲的进度条？答案

【问题标题】：How to make a curved progress bar around a circular UIView?如何围绕圆形 UIView 制作弯曲的进度条？
【发布时间】：2014-09-15 13:53:52
【问题描述】：

我想制作一个圆形进度条，例如，如何为其调整大小和属性（形状、颜色、宽度等）设置动画。

我试图让它围绕一个圆形透明视图。

从哪里开始？

有人有示例代码吗？

【问题讨论】：

可能是您的解决方案，请关注这里 - stackoverflow.com/questions/13573676/…
请不要要求用勺子喂食。尝试您自己的方法，如果不起作用，我们会随时为您提供帮助。
因此，我只问“从哪里开始？”我已经用谷歌搜索了它，但所有示例都是独立的，似乎没有什么适合在带有 OOP 的大型系统中使用。请停止假设每个人都要求用勺子喂食。
你也可以关注这个 - github.com/stablekernel/STKSpinnerView

标签： ios objective-c uiview progress-bar

【解决方案1】：

没有什么可以替代学习，但是一点帮助永远不会错过，所以这里有一些可以为您完成任务的代码。

概念是使用 CAShapeLayer 和 UIBezierPath，进度只是设置 UIBezierPath 的 strokeEnd 属性。您需要声明一个 CAShapeLayer 并设置它的属性。我们将其称为我们的progressLayer。（我不会提供完整的代码，只是简单的指导和示例供您整理。）

    // setup progress layer
    // N.B borderWidth is a float representing a value used as a margin. 
    // pathwidth is the width of the progress path
    // obviously progressBounds is a CGRect specifying the Layer's Bounds
    [self.progressLayer setFrame:progressBounds];
    UIBezierPath *progressPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds)) radius:(bounds.size.height - self.borderWidth - self.pathWidth   ) / 2 startAngle: (5* -M_PI / 12)  endAngle: (2.0 * M_PI - 7 * M_PI /12)   clockwise:YES];
     self.progressLayer.strokeColor = [UIColor whiteColor].CGColor;
     self.progressLayer.lineWidth = 6.0f ;
     self.progressLayer.path = progressPath.CGPath;
     self.progressLayer.anchorPoint = CGPointMake(0.5f, 0.5f);
     self.progressLayer.fillColor = [UIColor clearColor].CGColor;
     self.progressLayer.position = CGPointMake(self.layer.frame.size.width / 2 - self.borderWidth / 2, self.layer.frame.size.height / 2 - self.borderWidth/2);
    [self.progressLayer setStrokeEnd:0.0f];

您显然需要将 progressLayer 添加到您的视图层次结构中

那么你需要一个简单的动画来让进度条前进；

    // updateInterval is a float specifying the duration of the animation.
    // progress is a float storing the, well, progress. 
    // newProgress is a float 

    [self.progressLayer setStrokeEnd:newProgress];
    CABasicAnimation *strokeEndAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    strokeEndAnimation.duration = updateInterval;
    [strokeEndAnimation setFillMode:kCAFillModeForwards];
    strokeEndAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    strokeEndAnimation.removedOnCompletion = NO;
    strokeEndAnimation.fromValue = [NSNumber numberWithFloat:self.progress];
    strokeEndAnimation.toValue = [NSNumber numberWithFloat:newProgress];
    self.progress = newProgress;
    [self.progressLayer addAnimation:strokeEndAnimation forKey:@"progressStatus"];

在上图中，未处理的路径只不过是 progressLayer 后面的第二个完全描边层

哦，最后一点，你会发现圆是顺时针前进的。如果您花时间了解这里发生的事情，您将弄清楚如何按逆时针方向设置进度。

祝你好运……

【讨论】：

【解决方案2】：

您还可以查看我的库 MBCircularProgressBar，它还展示了如何使用 Interface Builder 制作动画以及如何使其可自定义。您可以使用透明颜色使其透明。

http://raw.github.com/matibot/MBCircularProgressBar/master/Readme/example.jpg

【讨论】：

【解决方案3】：

这里有一个很棒的简短教程，教你如何制作这个：http://www.tommymaxhanks.com/circular-progress-view/

您需要学习一点 Core Graphics 才能以您想要的方式完成此操作（作者在实现中使用了渐变，您可能想要更改它。），但如果您愿意，这是值得的在 iPhone 上做这样很酷的事情！

我认为更有用的是示例代码，它托管在此处：https://github.com/mweyamutsvene/THControls/tree/master/CircularProgressView

【讨论】：