ios - 使用 IBDesignable+UIView(storyboard) 查看绘图，但在应用程序上看不到

Question

我试图在应用程序上绘制一些虚线，但它仅使用 IBDesignable 在 main.storyboard 上绘制。当我在 iOS 模拟器上运行该应用程序时，没有任何显示。发生什么事了？

绘制代码:

    @IBDesignable
    class AnalogView: UIView {



        fileprivate let thickHorizontalLayer = CAShapeLayer()
        fileprivate let thinHorizontalLayer = CAShapeLayer()

        @IBInspectable var thickYCoord = 50.0
        @IBInspectable var thinYCoord = 52.5

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

            let thickDashesPath = UIBezierPath()
            thickDashesPath.move(to: CGPoint(x: 0, y: thickYCoord)) //left

            thickDashesPath.addLine(to: CGPoint(x: 340, y: thickYCoord)) //right

            //thickHorizontalLayer.frame           = frame
            thickHorizontalLayer.path            = thickDashesPath.cgPath
            thickHorizontalLayer.strokeColor     = UIColor.black.cgColor //dashes color
            thickHorizontalLayer.lineWidth       = 20
            thickHorizontalLayer.lineDashPattern = [ 1, 83.5 ]
            //thickHorizontalLayer.lineDashPhase   = 0.25

            self.layer.addSublayer(thickHorizontalLayer)

            let thinDashesPath = UIBezierPath()
            thinDashesPath.move(to: CGPoint(x: 0, y: thinYCoord)) //esquerda
            thinDashesPath.addLine(to: CGPoint(x: 340, y: thinYCoord)) //direita

            //thinHorizontalLayer.frame            = frame
            thinHorizontalLayer.path             = thinDashesPath.cgPath
            thinHorizontalLayer.strokeColor      = UIColor.black.cgColor
            thinHorizontalLayer.lineWidth        = 15.0
            thinHorizontalLayer.fillColor        = UIColor.clear.cgColor
            thinHorizontalLayer.lineDashPattern  = [ 0.5, 7.95]
            //thinHorizontalLayer.lineDashPhase    = 0.25

            self.layer.addSublayer(thinHorizontalLayer)

Answer 1

您需要将公共(public)代码放入由 init(frame:) 和 init(coder:) 调用的例程中:

@IBDesignable
class AnalogView: UIView {

    fileprivate let thickHorizontalLayer = CAShapeLayer()
    fileprivate let thinHorizontalLayer = CAShapeLayer()

    @IBInspectable var thickYCoord: CGFloat = 50.0
    @IBInspectable var thinYCoord: CGFloat = 52.5

    override init(frame: CGRect = .zero) {
        super.init(frame: frame)

        configure()
    }

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

        configure()
    }

    private func configure() {
        let thickDashesPath = UIBezierPath()
        thickDashesPath.move(to: CGPoint(x: 0, y: thickYCoord)) //left
        thickDashesPath.addLine(to: CGPoint(x: 340, y: thickYCoord)) //right

        thickHorizontalLayer.path            = thickDashesPath.cgPath
        thickHorizontalLayer.strokeColor     = UIColor.black.cgColor //dashes color
        thickHorizontalLayer.lineWidth       = 20
        thickHorizontalLayer.lineDashPattern = [ 1, 83.5 ]

        self.layer.addSublayer(thickHorizontalLayer)

        let thinDashesPath = UIBezierPath()
        thinDashesPath.move(to: CGPoint(x: 0, y: thinYCoord)) //esquerda
        thinDashesPath.addLine(to: CGPoint(x: 340, y: thinYCoord)) //direita

        thinHorizontalLayer.path             = thinDashesPath.cgPath
        thinHorizontalLayer.strokeColor      = UIColor.black.cgColor
        thinHorizontalLayer.lineWidth        = 15.0
        thinHorizontalLayer.fillColor        = UIColor.clear.cgColor
        thinHorizontalLayer.lineDashPattern  = [ 0.5, 7.95]

        self.layer.addSublayer(thinHorizontalLayer)
    }
}

我还建议为您的 @IBInspectable 类型声明显式类型，否则您将无法在 IB 中调整它们。

---

就我个人而言，我不会在布局更改时更新它，而不是对路径宽度进行硬编码。另外，如果您要将这些属性设置为 @IBDesignable，那么您确实希望在路径发生变化时更新它们。

@IBDesignable
class AnalogView: UIView {

    fileprivate let thickHorizontalLayer = CAShapeLayer()
    fileprivate let thinHorizontalLayer = CAShapeLayer()

    @IBInspectable var thickYCoord: CGFloat = 50.0 { didSet { updatePaths() } }
    @IBInspectable var thinYCoord:  CGFloat = 52.5 { didSet { updatePaths() } }

    override init(frame: CGRect = .zero) {
        super.init(frame: frame)

        configure()
    }

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

        configure()
    }

    private func configure() {
        layer.addSublayer(thickHorizontalLayer)
        layer.addSublayer(thinHorizontalLayer)
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        updatePaths()
    }

    private func updatePaths() {
        let thickDashesPath = UIBezierPath()
        thickDashesPath.move(to: CGPoint(x: bounds.origin.x, y: thickYCoord)) //left
        thickDashesPath.addLine(to: CGPoint(x: bounds.origin.x + bounds.size.width, y: thickYCoord)) //right

        thickHorizontalLayer.path            = thickDashesPath.cgPath
        thickHorizontalLayer.strokeColor     = UIColor.black.cgColor //dashes color
        thickHorizontalLayer.lineWidth       = 20
        thickHorizontalLayer.lineDashPattern = [1.0, NSNumber(value: Double(bounds.size.width - 1) / 4 - 1.0) ]

        let thinDashesPath = UIBezierPath()
        thinDashesPath.move(to: CGPoint(x: bounds.origin.x, y: thinYCoord)) //esquerda
        thinDashesPath.addLine(to: CGPoint(x: bounds.origin.x + bounds.size.width, y: thinYCoord)) //direita

        thinHorizontalLayer.path             = thinDashesPath.cgPath
        thinHorizontalLayer.strokeColor      = UIColor.black.cgColor
        thinHorizontalLayer.lineWidth        = 15.0
        thinHorizontalLayer.fillColor        = UIColor.clear.cgColor
        thinHorizontalLayer.lineDashPattern  = [0.5, NSNumber(value: Double(bounds.size.width - 1) / 40 - 0.5)]
    }
}

您可能也想调整破折号以跨越宽度(我不确定您是否想要一致的比例或让它跨越宽度)。但希望这能说明这个想法。