How to create dotted step indicator in swift 5(iOS)

Question

I have a requirement like to draw a dotted step indicator in swift 5. I have searched for lot of tutorials on the same but I couldn't get the proper result. I need the step indicator which should be in vertical position(Top to Bottom). I have used the following code but it is coming wrongly when I run the app in iPad.

private func drawLinePath() {
       //let linePath = UIBezierPath()
         let  path = UIBezierPath()

         let centerX = self.frame.width / 2.0
         let lineHeight = self.frame.height / 10

          path.move(to: CGPoint(x: centerX, y: 0))
          path.addLine(to: CGPoint(x: centerX, y: lineHeight))
          path.move(to: CGPoint(x: centerX, y:lineHeight + 3))
          path.addLine(to: CGPoint(x: centerX, y: lineHeight + 5))
          path.move(to: CGPoint(x: centerX, y:lineHeight + 8))
          path.addLine(to: CGPoint(x: centerX, y: lineHeight + 10))
          path.move(to: CGPoint(x: centerX, y:lineHeight + 12))
          path.addLine(to: CGPoint(x: centerX, y: lineHeight + 15))
          path.move(to: CGPoint(x: centerX, y:lineHeight + 18))
          path.addLine(to: CGPoint(x: centerX, y: lineHeight + 21 ))

          path.move(to: CGPoint(x: centerX, y:lineHeight + 23))
          path.addLine(to: CGPoint(x: centerX, y: lineHeight + 26))
          path.move(to: CGPoint(x: centerX, y:lineHeight + 28))
          path.addLine(to: CGPoint(x: centerX, y: lineHeight + 31))
          path.move(to: CGPoint(x: centerX, y:lineHeight + 33))
          path.addLine(to: CGPoint(x: centerX, y: lineHeight + 36))
          path.move(to: CGPoint(x: centerX, y:lineHeight + 38))
          path.addLine(to: CGPoint(x: centerX, y: lineHeight + 41))
          self.path = path.cgPath

        }

Answer 1

here is code working perfectly.

 func drawLineFromPoint(start : CGPoint, toPoint end:CGPoint, ofColor lineColor: UIColor, inView view:UIView) {

    //design the path
    let path = UIBezierPath()
    path.move(to: start)
    path.addLine(to: end)

    //design path in layer
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.cgPath
    shapeLayer.fillColor =  UIColor.clear.cgColor
    shapeLayer.strokeColor = lineColor.cgColor
    shapeLayer.lineWidth = 4.0
    shapeLayer.lineCap = .round
    shapeLayer.lineDashPattern =  [0.001,16]
    shapeLayer.lineDashPhase = 4
    view.layer.addSublayer(shapeLayer)
}

func drawLine() {
    let frm1: CGRect = img1.frame
    let frm2 : CGRect = img2.frame
    drawLineFromPoint(start: CGPoint(x: frm1.origin.x + 12, y: frm1.origin.y + 25), toPoint: CGPoint(x: frm1.origin.x + 12, y: frm2.origin.y), ofColor: UIColor.black, inView: self.view)
}


override func viewDidLoad() {
    super.viewDidLoad()
    drawLine()
}

here is image