Ios 在Tableview中使用BezierPath创建时间轴视图

我试图在TableView中画一个里程碑，有5行，我在单元格中添加了一个标签“O”，这里的行高是44，我试图连接这些点 像这样的 O-----O-----O-----O-----O垂直，但我无法找出此处缺少的内容，请参考以下代码

 class StopslistTableViewCell:UITableViewCell{

@IBOutlet weak var milestoneLbl: UILabel!

override func draw(_ rect: CGRect) {

    let scrrenX = UIScreen.main.bounds.width - 30

    let frametosuperview = milestoneLbl.convert(milestoneLbl!.frame, to: self.superview)

    print("dotframetosuperview",frametosuperview)

    //print(CGPoint(x: scrrenX, y: previousposY + rect.size.height))

    //frametosuperview.origin.y > 40 ? frametosuperview.origin.y - 20 : frametosuperview.origin.y

    let path = UIBezierPath()
    path.move(to: CGPoint(x: scrrenX, y:frametosuperview.origin.y < 30 ? frametosuperview.origin.y : frametosuperview.origin.y - frametosuperview.height))

    print("move to point--->",frametosuperview.origin.y < 30 ? frametosuperview.origin.y : frametosuperview.origin.y - frametosuperview.height)

    path.addLine(to: CGPoint(x: scrrenX, y: frametosuperview.origin.y < 30 ? frametosuperview.height + 24 : (frametosuperview.origin.y + 24)))
    print("add line to point--->",CGPoint(x: scrrenX, y: frametosuperview.origin.y < 30 ? frametosuperview.height + 24 : (frametosuperview.origin.y + 24)))

    path.lineWidth = 5

    UIColor.red.setStroke()
    path.stroke()

    setNeedsDisplay()
}

我需要这样的东西

---

我无法获得所需的结果，我是否遗漏了一些内容？

您不需要创建

UILabel

。而是创建一个带虚线图案的圆和线，如下所示：

let offSet:CGFloat = 20.0
let circleRadius:CGFloat = 5.0

override func draw(_ rect: CGRect) {

    //creating a circle
    let circlePath = UIBezierPath(arcCenter: CGPoint(x: offSet,y: circleRadius), radius: CGFloat(circleRadius), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true)
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = circlePath.cgPath
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.strokeColor = UIColor.black.cgColor
    shapeLayer.lineWidth = 2.0
    circlePath.stroke()

    //creating a line with dashed pattern
    let  dashPath = UIBezierPath()
    let  startPoint = CGPoint(x:offSet  ,y:circleRadius * 2)
    dashPath.move(to: startPoint)

    let  endPoint = CGPoint(x:offSet,y:
        self.bounds.maxY)
    dashPath.addLine(to: endPoint)

    let  dashes: [ CGFloat ] = [4, 1] //line with dash pattern of 4 thick and i unit space
    dashPath.setLineDash(dashes, count: dashes.count, phase: 0)
    dashPath.lineWidth = 2.0
    dashPath.lineCapStyle = .butt
    UIColor.black.set()
    dashPath.stroke()

}

输出：

编辑：因为OP希望时间线圆圈从单元格的中心出现

var allRows = Int()
var currentIndexPath = IndexPath()
let offSet:CGFloat = 20.0
let circleRadius:CGFloat = 5.0


override func draw(_ rect: CGRect) {

    //creating a circle
    let circlePath = UIBezierPath(arcCenter: CGPoint(x: offSet,y: self.bounds.midY), radius: CGFloat(circleRadius), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true)
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = circlePath.cgPath
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.strokeColor = UIColor.black.cgColor
    shapeLayer.lineWidth = 2.0
    circlePath.stroke()

    //creating a line with dashed pattern
    let  dashPath = UIBezierPath()
    var startPoint = CGPoint()

    if currentIndexPath.row  == 0{

        startPoint = CGPoint(x:offSet  ,y:self.bounds.midY)
    }else{

        startPoint = CGPoint(x:offSet  ,y:0)
    }
    dashPath.move(to: startPoint)

    var endPoint = CGPoint()

    if currentIndexPath.row == allRows-1{

        endPoint = CGPoint(x:offSet,y:
            self.bounds.midY)
    }else{

        endPoint = CGPoint(x:offSet,y:
            self.bounds.maxY)

    }
    dashPath.addLine(to: endPoint)

    let  dashes: [ CGFloat ] = [4, 1] //line with dash pattern of 4 thick and i unit space
    dashPath.setLineDash(dashes, count: dashes.count, phase: 0)
    dashPath.lineWidth = 2.0
    dashPath.lineCapStyle = .butt
    UIColor.black.set()
    dashPath.stroke()
}

您的

cellForRowAt indexPath

应配置为

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        .......
        cell.allRows = totalNumberOfRows
        cell.currentIndexPath = indexPath
        return cell


    }

这将导致以下O/p：

---

您不需要创建

UILabel

。而是创建一个带虚线图案的圆和线，如下所示：

let offSet:CGFloat = 20.0
let circleRadius:CGFloat = 5.0

override func draw(_ rect: CGRect) {

    //creating a circle
    let circlePath = UIBezierPath(arcCenter: CGPoint(x: offSet,y: circleRadius), radius: CGFloat(circleRadius), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true)
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = circlePath.cgPath
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.strokeColor = UIColor.black.cgColor
    shapeLayer.lineWidth = 2.0
    circlePath.stroke()

    //creating a line with dashed pattern
    let  dashPath = UIBezierPath()
    let  startPoint = CGPoint(x:offSet  ,y:circleRadius * 2)
    dashPath.move(to: startPoint)

    let  endPoint = CGPoint(x:offSet,y:
        self.bounds.maxY)
    dashPath.addLine(to: endPoint)

    let  dashes: [ CGFloat ] = [4, 1] //line with dash pattern of 4 thick and i unit space
    dashPath.setLineDash(dashes, count: dashes.count, phase: 0)
    dashPath.lineWidth = 2.0
    dashPath.lineCapStyle = .butt
    UIColor.black.set()
    dashPath.stroke()

}

输出：

编辑：因为OP希望时间线圆圈从单元格的中心出现

var allRows = Int()
var currentIndexPath = IndexPath()
let offSet:CGFloat = 20.0
let circleRadius:CGFloat = 5.0


override func draw(_ rect: CGRect) {

    //creating a circle
    let circlePath = UIBezierPath(arcCenter: CGPoint(x: offSet,y: self.bounds.midY), radius: CGFloat(circleRadius), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true)
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = circlePath.cgPath
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.strokeColor = UIColor.black.cgColor
    shapeLayer.lineWidth = 2.0
    circlePath.stroke()

    //creating a line with dashed pattern
    let  dashPath = UIBezierPath()
    var startPoint = CGPoint()

    if currentIndexPath.row  == 0{

        startPoint = CGPoint(x:offSet  ,y:self.bounds.midY)
    }else{

        startPoint = CGPoint(x:offSet  ,y:0)
    }
    dashPath.move(to: startPoint)

    var endPoint = CGPoint()

    if currentIndexPath.row == allRows-1{

        endPoint = CGPoint(x:offSet,y:
            self.bounds.midY)
    }else{

        endPoint = CGPoint(x:offSet,y:
            self.bounds.maxY)

    }
    dashPath.addLine(to: endPoint)

    let  dashes: [ CGFloat ] = [4, 1] //line with dash pattern of 4 thick and i unit space
    dashPath.setLineDash(dashes, count: dashes.count, phase: 0)
    dashPath.lineWidth = 2.0
    dashPath.lineCapStyle = .butt
    UIColor.black.set()
    dashPath.stroke()
}

您的

cellForRowAt indexPath

应配置为

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        .......
        cell.allRows = totalNumberOfRows
        cell.currentIndexPath = indexPath
        return cell


    }

这将导致以下O/p：

---

请发布更多信息。“我无法获得预期结果”的问题是什么？预期输出，实际输出…如果需要更多信息，请复制tableviewcell中的代码，在xib中获取tableview，拖动单元格，在其上放置标签，将标签附加到里程碑并运行。请发布更多信息。“我无法获得预期结果”的问题是什么？预期输出，实际输出…如果您想要更多信息，请复制tableviewcell中的代码，在xib中获取tableview，拖动一个单元格，在其上放置标签，将标签附加到milestone并运行。它确实回答了问题，但我对该问题的意图是，“为什么该代码不像我预期的那样绘制x，y跳线似乎是正确的”，我还使用了标签，这样我就不必每次移动圆的位置时都重置圆的框架milestone@iSwift你正在构建的解决方案只是一个黑客，用一个圆形的UILabel和一条虚线..所以，我想我应该发布一个更好的答案，以正确的方式来做。假设我想把圆圈放在中间，但是直线的起点应该是从第一个圆心到最后一个圆center@iSwift请澄清清楚..可能是一个截图..最好是发布一个新问题。如果没有，请自己尝试。我会在我有空时编辑。它确实回答了问题，但我想问这个问题，“为什么这个代码没有像我预期的那样绘制，因为x，y跳线似乎是正确的，我还使用了标签，这样我就不必每次移动圆的位置时都重置圆的帧milestone@iSwift你正在构建的解决方案只是一个黑客，用一个圆形的UILabel和一条虚线..所以，我想我应该发布一个更好的答案，以正确的方式来做。假设我想把圆圈放在中间，但是直线的起点应该是从第一个圆心到最后一个圆center@iSwift请澄清清楚。可能是截图。最好发布一个新问题。如果不是，请自己尝试。我会在有空时编辑。