UITableViewCells 上的虚线边框

Question

我正在尝试在 tableview 中的每个单元格上放置一个带有圆角半径的虚线边框。

我的代码：

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

    }

这也是一个动态高度的单元格。有时它会显示不属于同一部分的较大单元格的一部分。

Answer 1

不要在 UIViewController 类中的单元格中添加虚线边框。为 UITableViewCell 类创建一个子类并在其中添加一个虚线边框。然后覆盖layoutSublayers of layer方法并在其中更新 borderLayer 的框架。

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
    }
}

检查cellforrow方法中的部分并仅为特定部分出列此自定义类

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
        }
 }