Tableview에서 BezierPath를 사용하여 타임 라인보기 만들기

Question

5 행이있는 TableView에서 이정표를 그리기 위해 셀에 "O"라는 레이블을 추가했습니다. 행 높이가 44이고이 점들을 연결하려고합니다. Something like this 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() 
} 

디버그 출력

dotframetosuperview (560.0, 20.0, 20.0, 20.0) 
move to point---> 20.0 
add line to point---> (290.0, 44.0) 
dotframetosuperview (560.0, 64.0, 20.0, 20.0) 
move to point---> 44.0 
add line to point---> (290.0, 88.0) 
dotframetosuperview (560.0, 108.0, 20.0, 20.0) 
move to point---> 88.0 
add line to point---> (290.0, 132.0) 
dotframetosuperview (560.0, 152.0, 20.0, 20.0) 
move to point---> 132.0 
add line to point---> (290.0, 176.0) 
dotframetosuperview (560.0, 196.0, 20.0, 20.0) 
move to point---> 176.0 
add line to point---> (290.0, 220.0) 

내가이

같은 뭔가가 필요

원하는 결과를 얻을 수 없습니다. 여기에 뭔가 빠졌습니까? 당신은 UILabel .Instead이 원하고 점선 패턴으로 라인을 만들 만들 필요가없는

Answer 1

:

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

} 

출력 :

편집 : 영업 이익은 타임 라인 원에 원하는 때문에 세포의 중심에서 나타난다.

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 결과로 구성되어야한다