在iOS中随机添加文本到表格视图单元格底部的虚线边框

Question

我正在使用以下代码向表视图单元格添加一个虚线的自定义底部边框。现在它与内容随机重叠。有时，边框不会显示。

class AppTableCell: UITableViewCell {
    var shapeLayer: CAShapeLayer?
    var isBorderAdded = false

    func isBottomBorderAdded() -> Bool {
        return isBorderAdded
    }

    func getBottomBorderShapeLayer() -> CAShapeLayer {
        return self.shapeLayer!
    }

    func setBottomBorderShapedLayer(_ layer: CAShapeLayer) {
        self.shapeLayer = layer
    }
}

来自上述类的扩展表格视图单元格，并在func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell方法中调用了以下函数。

func addDashedBottomBorder(to cell: AppTableCell) {
    let color = UIColor.init(red: 191/255, green: 191/255, blue: 191/255, alpha: 1.0).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 = CAShapeLayerLineJoin.round
    shapeLayer.lineDashPhase = 3.0
    shapeLayer.lineDashPattern = [9,6]
    shapeLayer.path = UIBezierPath(roundedRect: CGRect(x: 0, y: shapeRect.height, width: shapeRect.width, height: 0), cornerRadius: 0).cgPath
    if (cell.isBorderAdded) {
        cell.shapeLayer!.removeFromSuperlayer()
    }
    cell.shapeLayer = shapeLayer
    cell.isBorderAdded = true
    cell.layer.addSublayer(shapeLayer)
}

如何正确显示每个单元格末尾的虚线底边框？

Answer 1

您要在单元格层中添加一个具有固定位置的子层：

shapeLayer.position = CGPoint(x: frameSize.width/2, y: frameSize.height)
[...]
cell.layer.addSublayer(shapeLayer)

因此它不会粘在您的单元格的底部。

您可以在每次更改单元格的高度时更新该层的位置，但是从性能和简单性的角度来看，我的建议是使用自动布局。

在单元格底部添加一个子视图，添加约束使其粘住，并在内部dashedLayer仅添加一次（例如，在awakeFromNib中，如果它是在IB中设计的）。