Voir le dessin en utilisant IBDesignable + UIView (storyboard) mais ne peut pas voir sur l'application

Question

J'essaye de dessiner des lignes pointillées sur une application mais elle ne dessine que sur main.storyboard avec IBDesignable. Lorsque je lance l'application sur un simulateur iOS, rien ne s'affiche. Que ce passe-t-il?

Le code pour dessiner:

@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

Vous devez mettre le code commun dans une routine qui est appelé à la fois par init(frame:) et 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) 
    } 
} 

I'D suggère également de déclarer un type explicite pour vos types @IBInspectable, sinon vous ne pourrez pas les ajuster dans IB. Personnellement, plutôt que de coder en dur la largeur du chemin, je le mettrais à jour lorsque la mise en page changerait. En outre, si vous voulez créer ces propriétés @IBDesignable, vous voulez vraiment mettre à jour les chemins s'ils changent.

@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)] 
    } 
} 

Vous pouvez régler le fringant pour couvrir la largeur, trop (je ne sais pas si vous vouliez une échelle cohérente ou à enjamber la largeur). Mais j'espère que cela illustre l'idée.