UITableViewCells上的虚线边框

时间:2019-04-05 06:38:55

标签: ios swift uitableview

enter image description here

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

我的代码:

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

    }

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

enter image description here

1 个答案:

答案 0 :(得分:3)

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

enter image description here

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