如何在圆形UIView周围制作弯曲的进度条？

Question

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

我试图围绕圆形透明视图。

从哪里开始？

有没有人有示例代码？

Answer 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添加到您的视图hierarchie

然后你需要一个简单的动画来推进吧;

    // 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背后的第二个完全描边层

哦，最后一点，你会发现Circle顺时针进展。如果你花时间了解这里发生了什么，你将弄清楚如何设置进度反时针。

祝你好运......

Answer 2

您还可以查看我的lib MBCircularProgressBar，它还会显示如何使用Interface Builder设置动画以及如何使其可自定义。您可以使用透明颜色使其透明。

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

Answer 3

这是一篇很棒的简短教程，介绍如何制作：http://www.tommymaxhanks.com/circular-progress-view/

你需要学习一些核心图形才能以你想要的方式实现这一点（作者在实现中使用了渐变，你可能想要改变它。），但是如果你想要的话，它是值得的在iPhone上做这样酷的东西！

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