如何在 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

对于该虚线路径，您可以采用 UILabel 并将文本设置为“......”，并使用所需的字体大小和颜色。无需绘制任何贝塞尔路径。只需使用 UILabel。

Answer 2

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)

Answer 3

您可以为此使用 StepIndicator pod，您可以从中找到示例 link https://github.com/chenyun122/StepIndicator

Answer 4

这里的代码运行良好。

 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 5

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 更改矩形值。

希望对你有用。

如何在 swift 5(iOS) 中创建虚线步进指示器

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

ios

uibezierpath

swift