Trying to add dashed border separator in tableview

Question

Using this example I am trying to add a dashed border to my UITableView.

Trying to draw dashed border for UITableViewCell

But it does not work. It shows nothing.

func addDashedBottomBorder(to cell: UITableViewCell) {
    let color = UIColor.black.cgColor

    let shapeLayer:CAShapeLayer = CAShapeLayer()
    let frameSize = cell.frame.size
    let shapeRect = CGRect(x: 0, y: 0, width: frameSize.width, height: 0)

    shapeLayer.bounds = shapeRect
    shapeLayer.position = CGPoint(x: frameSize.width/2, y: frameSize.height)
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.strokeColor = color
    shapeLayer.lineWidth = 2.0
    shapeLayer.lineJoin = kCALineJoinRound
    shapeLayer.lineDashPattern = [9,6]
    shapeLayer.path = UIBezierPath(roundedRect: CGRect(x: 0, y: shapeRect.height, width: shapeRect.width, height: 0), cornerRadius: 0).cgPath

    cell.layer.addSublayer(shapeLayer)
}

I am using this method in cellForRowAt but it shows me nothing and in viewDidLoad, table.separatorStyle = .none.

isn't shapeLayer height always zero as shapeRect declared with zero height? — Kamran, May 13 '18 at 05:33

Ankit Jayaswal · Accepted Answer · 2018-05-13T09:15:51.753

0

From the below 2 lines of your code:

    shapeLayer.lineJoin = kCALineJoinRound
    shapeLayer.path = UIBezierPath(roundedRect: CGRect(x: 0, y: shapeRect.height, width: shapeRect.width, height: 0), cornerRadius: 0).cgPath

kCALineJoinRound is making upper and lower dash lines but they are overlapping due to the height of UIBezierPath is 0. So, Updated your code as:

    shapeLayer.path = UIBezierPath(roundedRect: CGRect(x: 0, y: shapeRect.height, width: shapeRect.width, height: 1), cornerRadius: 0).cgPath

It will hide the lower line and you will get the desired result.

Best Solution:

Rather than hiding lower dash line, you can correct it by providing just lineDashPhase to your CAShapeLayer, as:

    shapeLayer.lineJoin = kCALineJoinRound
    shapeLayer.lineDashPhase = 3.0 // Add "lineDashPhase" property to CAShapeLayer
    shapeLayer.lineDashPattern = [9,6]
    shapeLayer.path = UIBezierPath(roundedRect: CGRect(x: 0, y: shapeRect.height, width: shapeRect.width, height: 0), cornerRadius: 0).cgPath

Received line is:

edited May 13 '18 at 09:15

answered May 13 '18 at 07:21

Ankit Jayaswal

5,549
3
16
36

bro i just update the lines which u provide but still same its showing nothing – Jhony May 13 '18 at 08:36
Did you see a black line or no line at all? – Ankit Jayaswal May 13 '18 at 08:56
there is no line at line only blank space – Jhony May 13 '18 at 09:05
@Jhony, try adding `heightForRowAt indexPath: IndexPath` delegate method. – Ankit Jayaswal May 13 '18 at 09:17
heightForRowAt solve my problem finally Thank u so much – Jhony May 13 '18 at 10:33
bro it work perfectly but in iphone se i show just simple line why? – Jhony Jun 06 '18 at 06:13

Trying to add dashed border separator in tableview

1 Answers1