Trying to draw dashed border for UITableViewCell

Question

I'm trying to draw a dashed bottom border to UITableViewCells with the following code:

func addDashedBottomBorder(to cell: UITableViewCell) {
    let width = CGFloat(2.0)
    let dashedBorderLayer: CAShapeLayer = CAShapeLayer()
    let frameSize = cell.frame.size
    let shapeRect = CGRect(x: 0, y: frameSize.height, width: frameSize.width*2, height: 1) 

    dashedBorderLayer.bounds = shapeRect
    dashedBorderLayer.position = CGPoint(x: 0, y: frameSize.height)
    dashedBorderLayer.strokeColor = UIColor.lightGray.cgColor
    dashedBorderLayer.lineWidth = width
    dashedBorderLayer.lineDashPattern = [9, 6]
    dashedBorderLayer.path = UIBezierPath(roundedRect: shapeRect, cornerRadius: 5).cgPath

    cell.layer.addSublayer(dashedBorderLayer)
}

However, I'm getting a strange solid line behind my dashed line as can be seen here: https://i.stack.imgur.com/eM3Rs.jpg

I've already set tableView.separatorColor = UIColor.clear in viewDidLoad

Any ideas why I'm getting that solid line behind the dashed one?

score 3 · Accepted Answer · answered Oct 28 '16 at 06:21

Try this

func addDashedBottomBorder(to cell: UITableViewCell) {

    let color = UIColor.lightGray.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)
}

Output

Please tell, from where we should call this function. And what if path varies for each cell — krishan kumar, Jul 16 '20 at 16:03

score 2 · Answer 2 · answered Oct 28 '16 at 06:33

if you have write

tableView.separatorStyle = .None

Still, yo are getting a solid line below dassed pattern then 100% it is not tableview separator. It is something else

check your Table background colour, When you clear separator color, a small space remains between cell. If you cell background color different color from table background color, it visible like a separator.

score 1 · Answer 3 · edited Oct 28 '16 at 06:09

1

Objective-C

self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

In Swift

tableView.separatorStyle = .None

edited Oct 28 '16 at 06:09

Vinodh

5,262
4
38
68

answered Oct 28 '16 at 06:08

smoothdvd

2,389
4
20
25

it will not make any difference. The problem is with layer logic – Rajan Maheshwari Oct 28 '16 at 06:19

score 1 · Answer 4 · answered Oct 28 '16 at 06:13

The line you are showing with your donted line is default TableViewCell seperator, you can remove it directly from the interface builder instead of writing any code.

In interface builder select your TableView and in the Attributes Insepector Set Separator property to None.

Trying to draw dashed border for UITableViewCell

4 Answers4

Linked