Как создать пунктирный индикатор шага в swift 5 (iOS)

Question

У меня есть требование, как нарисовать пунктирный индикатор шага в Swift 5. Я искал много уроков по этому же вопросу, но не смог получить правильный результат. Мне нужен индикатор шага, который должен быть в вертикальном положении (сверху вниз). Я использовал следующий код, но он работает неправильно, когда я запускаю приложение в 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

здесь код работает отлично.

 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()
}

вот изображение

Answer 2

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);

Измените прямоугольные значения в соответствии с вашим представлением и lineDashPattern.

Надеюсь, что это сработает для вас.

Answer 3

взять UIView для пунктирной линии и использовать код ниже для строки.

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

Теперь используйте его, как показано ниже ..

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)

Answer 4

Для этого вы можете использовать модуль StepIndicator, вы можете найти пример по этой ссылке https://github.com/chenyun122/StepIndicator

Answer 5

Для этого пунктирного пути вы можете взять UILabel и установить текст как «......» с требуемым размером и цветом шрифта. Не нужно рисовать путь Безье. Просто используйте UILabel.