ios - 自定义 View 在以编程方式添加时不可见，但在使用 Storyboard添加时可见

Question

我有自己的自定义 View ，就像一个进度条。这是它的代码:

class ProgressBar: UIView {

    var bottomProgressBar = CAShapeLayer()
    var topProgressBar = CAShapeLayer()

    override init(frame: CGRect) {
        super.init(frame: frame)
        configure()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        configure()
    }

    func configure() {
        bottomProgressBar.strokeColor = UIColor.white.cgColor
        bottomProgressBar.opacity = 0.1
        bottomProgressBar.lineWidth = self.frame.height
        bottomProgressBar.strokeStart = 0
        bottomProgressBar.strokeEnd = 1
        self.layer.addSublayer(bottomProgressBar)

        topProgressBar.strokeColor = UIColor.white.cgColor
        topProgressBar.lineWidth = self.frame.height
        topProgressBar.strokeStart = 0
        topProgressBar.strokeEnd = 1
        self.layer.addSublayer(topProgressBar)

        animate(toValue: 0)
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: self.frame.width, y: 0))

        bottomProgressBar.path = path.cgPath
        topProgressBar.path = path.cgPath
    }
}

现在，当我使用 Storyboard添加它时，通过在 Controller 中添加一个 UIView 并将 Custom Class 设置为 ProgressBar 我可以看到它在运行应用程序时可见(它应该具有 alpha 0.1 的白色)。

但是当我尝试以编程方式添加时，它根本不可见。仅当我明确设置背景颜色时:

myProgressBar.backgroudColor = .red

这不是我想要的。我希望它具有白色和初始值 alpha 0.1。

这是我以编程方式添加它的代码:

var progressBar = ProgressBar()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(progressBar)

        progressBar.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint(item: progressBar, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0).isActive = true
        NSLayoutConstraint(item: progressBar, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.centerY, multiplier: 1, constant: 0).isActive = true
        NSLayoutConstraint(item: progressBar, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 100).isActive = true
        NSLayoutConstraint(item: progressBar, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 1).isActive = true
    }

我似乎不明白使用 Storyboard添加它和以编程方式添加它之间有什么区别。
我看到约束是正确的并且添加了 View ，但为什么没有出现默认颜色？

在这种情况下，有人知道我的问题是什么吗？

编辑:

为 animate 方法添加了代码:

func animate(toValue: Double) {
    let animation = CABasicAnimation(keyPath: "strokeEnd")

    animation.duration = 1.0
    animation.fromValue = 0
    animation.toValue = toValue

    topProgressBar.strokeEnd = CGFloat(toValue)
    topProgressBar.animation(forKey: "animate")
}

Answer 1

问题始于此 var progressBar = ProgressBar()。这将调用 init 方法并调用 configure()。此时ProgressBar 框架的宽度和高度为零。

在您的configure() 方法中，您正在设置线宽。

bottomProgressBar.lineWidth = self.frame.height // 0
topProgressBar.lineWidth = self.frame.height // 0

所以线宽设置为零，这样就不会显示了。

要解决此问题，您必须在 layoutSubviews() 方法中更新 CAShapeLayer 线宽。

override func layoutSubviews() {
    super.layoutSubviews()

    let path = UIBezierPath()
    path.move(to: CGPoint(x: 0, y: 0))
    path.addLine(to: CGPoint(x: self.frame.width, y: 0))

    bottomProgressBar.lineWidth = self.frame.height // Update lineWidth
    topProgressBar.lineWidth = self.frame.height    // Update lineWidth

    bottomProgressBar.path = path.cgPath
    topProgressBar.path = path.cgPath
}

为什么它适用于 Storyboard？因为在调用 configure 之前已经设置了框架。您可以在 configure 中打印帧大小，并查看两种情况下的差异。