Dashed border on UITableViewCells

Question

I'm trying to put a dashed border with corner radius on each cell in a tableview.

My code:

fileprivate func drawDashedBorder(_ indexPath: IndexPath, _ cell: OpenJobsCell) {
    //dashed border for drafts
    if jobObjects[indexPath.section].sectionName == "DRAFT" {
      if let theView = cell.containerView {
        let rect = theView.bounds
        let layer = CAShapeLayer.init()
        let path = UIBezierPath(roundedRect: rect, cornerRadius: 8)
        layer.path = path.cgPath
        layer.strokeColor = UIColor.lightGray.cgColor
        layer.lineDashPattern = [3,3]
        layer.backgroundColor = UIColor.clear.cgColor
        layer.fillColor = UIColor.clear.cgColor
        theView.layer.addSublayer(layer)

      }
    } else {
      cell.containerView.layer.borderColor = UIColor.lightGray.cgColor
      cell.containerView.layer.borderWidth = 0.5
      cell.containerView.layer.cornerRadius = 10
      cell.containerView.layer.masksToBounds = true
    }
  }


override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: OpenJobsCell.identifier, for: indexPath) as! OpenJobsCell

    let respondedJobs = jobObjects[indexPath.section].jobs?[indexPath.row]
    var respondedDate = Date()
    let draftJob = jobObjects[indexPath.section].jobs?[indexPath.row]
    var draftDate = Date()
    drawDashedBorder(indexPath, cell)
    setupAcceptButton(indexPath, cell)
    if jobObjects[indexPath.section].sectionName == "DRAFT" || jobObjects[indexPath.section].sectionName == "OPEN" {
      cell.biddersTableView.sectionFooterHeight = 0.0

      if let startDate = draftJob?.startDateAt {
        draftDate = startDate
      }
      cell.dayLbl.text = draftDate.dayMedium
      cell.monthLbl.text = draftDate.monthMedium
      cell.jobTitleLbl.text = draftJob?.name
      if let minPrice = draftJob?.priceMin {
        cell.priceLbl.text = String(describing: minPrice)
      }
    } else {
      if let startDate = respondedJobs?.startDateAt {
        respondedDate = startDate
      }
      if let bids = respondedJobs?.bid {
        print(bids.count)
        cell.bids = bids
      }
      cell.dayLbl.text = respondedDate.dayMedium
      cell.monthLbl.text = respondedDate.monthMedium
      cell.jobTitleLbl.text = respondedJobs?.name
      if let minPrice = respondedJobs?.priceMin {
        cell.priceLbl.text = String(describing: minPrice)
      }

    }

This is also a cell with dynamic height. Sometimes it shows in part of the bigger cells that doesn't fall in the same section.

Answer 1

Don't add a dashed border to the cell inside UIViewController class. Create a subclass for UITableViewCell class and add a dashed border in it. Then override layoutSublayers of layer method and update borderLayer's frame in it.

class MyCell: UITableViewCell {

    let borderLayer = CAShapeLayer()

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        commonInit()
    }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }
    func commonInit() {
        selectionStyle = .none

        layer.cornerRadius = 15.0
        layer.masksToBounds = true        
        borderLayer.strokeColor = UIColor.black.cgColor
        borderLayer.lineDashPattern = [4, 4]
        borderLayer.fillColor = nil
        self.layer.addSublayer(borderLayer)
    }
    override func layoutSublayers(of layer: CALayer) {
        super.layoutSublayers(of: layer)
        borderLayer.frame = self.bounds
        borderLayer.path = UIBezierPath(roundedRect: self.bounds, cornerRadius: 15).cgPath
    }
}

Check the section in cellforrow method and deque this custom class only for the particular section

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if [indexPath.section].sectionName == "DRAFT" {
            let cell = tableView.dequeueReusableCell(withIdentifier: "MyCell") as? MyCell
            return cell
        } else {
            //... Other type cells
        }
 }