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

        }

enter image description here

Hey there are many questions posted here. Follow the link may help you https://stackoverflow.com/a/12092002/1897981 — Kamal Bhardwaj, Jan 21 '20 at 05:34

score 1 · Accepted Answer · answered Jan 21 '20 at 06:48

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

score 0 · Answer 2 · answered Jan 21 '20 at 05:18

0

For that dotted path you can take UILabel and set text as '......' with your required font size and color. No need to draw any Bezier path. Just use UILabel.

answered Jan 21 '20 at 05:18

shraddha11

783
4
17

But I want to display like that image which I have uploaded. – Anusha iworld Jan 21 '20 at 06:10

score 0 · Answer 3 · answered Jan 21 '20 at 06:02

take UIView for dashed line and use below code for line.

extension UIView {

func createDashedLine(from point1: CGPoint, to point2: CGPoint, color: UIColor, strokeLength: NSNumber, gapLength: NSNumber, width: CGFloat) {
    let shapeLayer = CAShapeLayer()

    shapeLayer.strokeColor = color.cgColor
    shapeLayer.lineWidth = width
    shapeLayer.lineDashPattern = [strokeLength, gapLength]

    let path = CGMutablePath()
    path.addLines(between: [point1, point2])
    shapeLayer.path = path
    layer.addSublayer(shapeLayer)
}}

Now use it like below..

let topPoint = CGPoint(x: vw.frame.midX, y: vw.bounds.minY)
    let bottomPoint = CGPoint(x: vw.frame.midX, y: vw.bounds.maxY)

vw.createDashedLine(from: topPoint, to: bottomPoint, color: .lightGray, strokeLength: 4, gapLength: 6, width: 2)

score 0 · Answer 4 · answered Jan 21 '20 at 06:47

0

You can use StepIndicator pod for that, you can find example from this link https://github.com/chenyun122/StepIndicator

answered Jan 21 '20 at 06:47

Chetan Hedamba

293
2
9

I have used that code only but I have done some customised. – Anusha iworld Jan 21 '20 at 09:06

score 0 · Answer 5 · answered Jan 21 '20 at 10:42

let rect = CGRect(origin: CGPoint(x: 0, y: 0), size: CGSize.init(width: 20, height: 40))
let layer = CAShapeLayer()
let path = UIBezierPath(roundedRect: rect, cornerRadius: 4)
layer.path = path.cgPath
layer.strokeColor = UIColor.gray.cgColor
layer.lineDashPattern = [3,3];
layer.backgroundColor = _CLEAR_COLOR.cgColor;
layer.fillColor = _CLEAR_COLOR.cgColor;
viewDottedLine.layer.addSublayer(layer);

Change rect values as per your view and lineDashPattern.

Hope that will work for you.

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

5 Answers5