Swift 5 中的圆形进度条

Question

我曾尝试做一个圆形进度条，但是当我运行该应用程序时，它崩溃并显示下一个错误：

致命错误：在隐式展开可选值时意外发现 nil：文件 /Users/marcoalonso/Documents/SWIFT_PROJECTS/CircularProgressView/CircularProgressView/ViewController.swift，第 15 行 2020-04-18 19:26:405.10369356-03 ] 致命错误：在隐式展开可选值时意外发现 nil：文件 /Users/marcoalonso/Documents/SWIFT_PROJECTS/CircularProgressView/CircularProgressView/ViewController.swift，第 15 行

我只有 2 个文件，它们是：

import UIKit
class ViewController: UIViewController {
    @IBOutlet weak var containerView: UIView!
    var circularView: CircularProgressView!
    var duration: TimeInterval!
    override func viewDidLoad() {
        super.viewDidLoad()
        circularView.center = view.center
        containerView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleTap)))
        view.addSubview(circularView)
    }

    @objc func handleTap() {
        duration = 3.0
        circularView.progressAnimation(duration: duration)
    }
}

和 CircularProgressView.swift：

import UIKit
class CircularProgressView: UIView {
    // First create two layer properties
    private var circleLayer = CAShapeLayer()
    private var progressLayer = CAShapeLayer()
    override init(frame: CGRect) {
        super.init(frame: frame)
        createCircularPath()
    }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        createCircularPath()
    }
    func createCircularPath() {
        let circularPath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2.0, y: frame.size.height / 2.0), radius: 80, startAngle: -.pi / 2, endAngle: 3 * .pi / 2, clockwise: true)
        circleLayer.path = circularPath.cgPath
        circleLayer.fillColor = UIColor.clear.cgColor
        circleLayer.lineCap = .round
        circleLayer.lineWidth = 20.0
        circleLayer.strokeColor = UIColor.black.cgColor
        progressLayer.path = circularPath.cgPath
        progressLayer.fillColor = UIColor.clear.cgColor
        progressLayer.lineCap = .round
        progressLayer.lineWidth = 10.0
        progressLayer.strokeEnd = 0
        progressLayer.strokeColor = UIColor.red.cgColor
        layer.addSublayer(circleLayer)
        layer.addSublayer(progressLayer)
    }
    func progressAnimation(duration: TimeInterval) {
        let circularProgressAnimation = CABasicAnimation(keyPath: "strokeEnd")
        circularProgressAnimation.duration = duration
        circularProgressAnimation.toValue = 1.0
        circularProgressAnimation.fillMode = .forwards
        circularProgressAnimation.isRemovedOnCompletion = false
        progressLayer.add(circularProgressAnimation, forKey: "progressAnim")
    }
}

我希望有人可以帮助我！

我想这可能是 storyboard 的问题所以，这是我的故事板文件

Answer 1

在这里，您使用 nil circularView来分配center属性，这是失败的

override func viewDidLoad() {
    super.viewDidLoad()
    circularView.center = view.center
    containerView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleTap)))
    view.addSubview(circularView)
}

您可以在circularView不为 nil 时删除该行并分配中心，或者先初始化circularView然后使用中心。

Answer 2

只需在 ViewController 中初始化 circularView：

代替：

var circularView: CircularProgressView!

和：

var circularView = CircularProgressView()

Answer 3

您还没有为循环视图初始化任何 object。 您只说过 circleView 将有一个 CircularProgressView 类型的 object 但您没有在那里存储任何 object 。 因此，在使用 circularView 进行任何操作之前，先使用以下命令对其进行初始化：

circularView = CircularProgressView() 

为了更清楚你的代码应该是这样的

import UIKit
class ViewController: UIViewController {
    @IBOutlet weak var containerView: UIView!
    var circularView: CircularProgressView!
    var duration: TimeInterval!
    override func viewDidLoad() {
        super.viewDidLoad()
        circularView = CircularProgressView()
        circularView.center = view.center
        containerView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleTap)))
        view.addSubview(circularView)
    }

    @objc func handleTap() {
        duration = 3.0
        circularView.progressAnimation(duration: duration)
    }
}