ios - CAShapeLayer路径未显示

Question

我目前正在处理圆形进度条，为此，我创建了一个customView。但是，shapeLayer未显示。我尝试将一个框架以及背景颜色添加到shapeLayer中，但是只显示了一个矩形，而不是我期望看到的circlePath。关于我在做什么错的任何想法:thinking:

import UIKit

class CircularProgressBar: UIView {
    override func draw(_ rect: CGRect) {
        setupProgressView()
    }

    private func setupProgressView() {
        let shapeLayer = CAShapeLayer()
        let circularPath = UIBezierPath(arcCenter: center,
                                        radius: 100,
                                        startAngle: 0,
                                        endAngle: 2*CGFloat.pi,
                                        clockwise: true)

        shapeLayer.path = circularPath.cgPath
        shapeLayer.fillColor = UIColor.blue.cgColor
        shapeLayer.strokeColor = UIColor.yellow.cgColor
        shapeLayer.lineWidth = 20

        self.layer.addSublayer(shapeLayer)
    }
}

Answer 1

设置形状层框架

shapeLayer.frame = bounds

更好的方法是不使用绘制方法

import UIKit
 @IBDesignable
 class CircularProgressBar: UIView {

    private lazy var shapeLayer: CAShapeLayer = {
        let shape = CAShapeLayer()
        shape.fillColor = UIColor.blue.cgColor
        shape.strokeColor = UIColor.yellow.cgColor
        shape.lineWidth = 20
        return shape
    }()

    override init(frame: CGRect) {

        super.init(frame: frame)
        addLayers()
    }

    required init?(coder: NSCoder) {

        super.init(coder: coder)
        addLayers()
    }

    private func addLayers() {
        layer.addSublayer(shapeLayer)
    }


    override func layoutSubviews() {
        updatePath()
    }


    private func updatePath() {

        let circularPath = UIBezierPath(arcCenter: CGPoint(x: bounds.midX, y: bounds.midY),
                                        radius: min(bounds.midX, bounds.midY) - shapeLayer.lineWidth/2,
                                        startAngle: 0,
                                        endAngle: 2*CGFloat.pi,
                                        clockwise: true)
        shapeLayer.frame = bounds
        shapeLayer.path = circularPath.cgPath
    }
}