使用Swift在iOS中创建自定义进度栏
当我开始开发自己的iOS应用程序时，经常会遇到需要自定义某些内置UI元素以满足应用程序需求的需求。 对我来说，其中一个就是自定义进度条 。
在本文中，我将介绍构建自定义进度栏的基础知识。 首先，有助于了解内置的UIProgressView。 当我说理解时，我指的是XCode的“属性”检查器中显示的关键属性，例如“ 进度”，“跟踪”和“进度”值 。
- 进度色 -用于前景层以显示进度。
- 跟踪色调 —在背景层中使用，以显示进度条的轮廓。
- 进度值 -保持当前进度状态的指针值
让我们开始构建自定义进度栏部分。 要求是创建一个圆形进度栏。
- 在自定义视图中使用UIBezierPath（）创建路径。
- 创建两个CAShapeLayer- 一个用于前景，另一个用于背景。
- 通过操纵StrokeEnd值设置进度。
类声明如下所示：
class ProgressBarView：UIView {
var bgPath：UIBezierPath！
var shapeLayer：CAShapeLayer！
var progressLayer：CAShapeLayer！
}
UIBeizerPath使您可以通过添加一组线，弧，曲线并将其渲染到自定义视图中来创建从简单路径到复杂多边形的所有内容。 因此，首先使用它定义进度条的路径。 对于我们的示例，我创建了一个循环路径。
私人功能createCirclePath（）{
令x = self.frame.width / 2
令y = self.frame.height / 2
让中心= CGPoint（x：x，y：y）
bgPath.addArc（withCenter：center，radius：x / CGFloat（2），startAngle：CGFloat（0），endAngle：CGFloat（6.28），顺时针：true） bgPath.close（）
}
我已使用addArc（）方法绘制一个圆，将startAngle和endAngle参数指定为弧度 。 其他方法（如addLine（），addCurve（），addQuadCurve（））也可以用于创建路径。 确保通过调用close（）方法关闭路径。
CAShapeLayer：我想认为这类似于photoshop中的图层。 CAShapeLayer在许多方面很有用，因为对象以矢量形式存储，并且具有动画和事务适用性。
根据我的要求，我创建了两个CAShapeLayer并对其进行了格式化以适合需要。
func simpleShape（）{
createCirclePath（）
shapeLayer = CAShapeLayer（）
shapeLayer.path = bgPath.cgPath
shapeLayer.lineWidth = 15
shapeLayer.fillColor =零
shapeLayer.strokeColor = UIColor.lightGray.cgColor
progressLayer = CAShapeLayer（）
progressLayer.path = bgPath.cgPath
progressLayer.lineWidth = 15
progressLayer.lineCap = kCALineCapRound
progressLayer.fillColor =零
progressLayer.strokeColor = UIColor.red.cgColor
progressLayer.strokeEnd = 0.0
self.layer.addSublayer（shapeLayer）
self.layer.addSublayer（progressLayer）
}
shapeLayer是背景层， progressLayer是前景层。 请注意，这两层都设置为使用在步骤1中创建的bgPath来产生循环级进的效果。 我们还可以调整属性，例如lineWidth，fillColor，strokeColor，strokeStart，strokeEnd，fillRule，lineCap等。
CAShapeLayer –核心动画| Apple开发人员文档
形状将进行抗锯齿绘制，并在可能的情况下将其映射到屏幕空间，然后再进行栅格化…
developer.apple.com
创建一个可存储当前进度状态的可变进度。
var progress：Float = 0 {
willSet（newValue）
{
progressLayer.strokeEnd = CGFloat（newValue）
}
}
请注意，在步骤2中，对于progressLayer ，属性strokeEnd设置为0.0 。 这就是魔术所在。 strokeEnd的取值范围是0.0到1.0，分别代表开始值和结束值。 使用willSet观察器属性更新strokeEnd的值。 willSet观察变量值的变化，并为其设置新值。
它完成了！ 打开main.storyboard ，创建一个视图，然后在其身份检查器中将自定义类指定为创建的ProgressBarView类。
现在从ViewController ，使用基于durationTime的scheduledTimer ，我增加了progressValue 。 您可以根据需要操纵此值。
类ViewController：UIViewController {@IBOutlet弱var progressBar：ProgressBarView！
var timer：计时器！
var progressCounter：Float = 0
持续时间：浮动= 10.0
var progressIncrement：Float = 0
覆盖func viewDidLoad（）{
super.viewDidLoad（）
progressIncrement = 1.0 /持续时间
timer = Timer.scheduledTimer（timeInterval：1，target：self，选择器：#selector（self.showProgress），userInfo：nil，重复：true）
}
@objc func showProgress（）{
if（progressCounter> 1.0）{timer.invalidate（）}
progressBar.progress = progressCounter
progressCounter = progressCounter + progressIncrement
}
}
瞧！ 循环进度栏是从头开始构建的。 您可以从下面的Github链接下载整个代码。