UITableViewCell drawRect底部边框在insertRow上消失

Question

我有一个自定义的UITableViewCell，我使用drawRect绘制一个简单的底部边框：

override func drawRect(rect: CGRect) {   
   let context = UIGraphicsGetCurrentContext()
   CGContextMoveToPoint(context, CGRectGetMinX(rect), CGRectGetMaxY(rect))
   CGContextAddLineToPoint(context, CGRectGetMaxX(rect), CGRectGetMaxY(rect))
   CGContextSetStrokeColorWithColor(context, UIColor(netHex: 0xEFEEF4).CGColor)
   CGContextSetLineWidth(context, 2)
   CGContextStrokePath(context)
}

这完美无缺。但是，当我插入带动画的行时，所有单元格的边框将消失，并在插入动画完成时再次出现：

tableView.insertRowsAtIndexPaths([NSIndexPath(forRow: cells.count - 1, inSection: 0)], withRowAnimation: UITableViewRowAnimation.Fade)

知道如何避免这种情况吗？

Answer 1

您可以在tablecell的 awakeFromNib 中尝试此代码，如果您只想使用CALayers，假设您的TableView覆盖设备的整个宽度。

override func awakeFromNib() {
    super.awakeFromNib()
    let borderLayer = CALayer()
    let lineHeight:CGFloat = 2
    borderLayer.frame = CGRect(x: 0, y: self.frame.height - lineHeight , width: UIScreen.mainScreen().bounds.width, height: lineHeight)
    borderLayer.backgroundColor = UIColor.redColor().CGColor
    self.layer.addSublayer(borderLayer)
}

您将获得输出：

还要使您的tableview分隔符颜色清除

self.tableView.separatorColor = UIColor.clearColor()

这样它就不会与你的图层重叠。
我可以观察到，无论何时插入新行，现在没有细胞边界消失。

<强>替代地
我们可以在单元格故事板中使用UIImageView并提供具有以下约束的颜色 添加UIImageView

向UIImageView添加约束

我们完成了！

还有一个备用解决方案可以使用 Bezier路径

实现此目标

 override func awakeFromNib() {
    super.awakeFromNib()
    let line = CAShapeLayer()
    let linePath = UIBezierPath()
    linePath.moveToPoint(CGPointMake(0, self.frame.height))
    linePath.addLineToPoint(CGPointMake(UIScreen.mainScreen().bounds.width, self.frame.height))
    line.lineWidth = 3.0
    line.path = linePath.CGPath
    line.strokeColor = UIColor.redColor().CGColor
    self.layer.addSublayer(line)
 }

这也产生相同的输出。

修改

如果我们没有为单元格使用故事板或笔尖并以编程方式创建单元格，那么我们可以执行以下解决方法：

在CustomTableViewCell类中创建属性

var borderLayer:CALayer!

现在在CustomTableViewCell类中有一个名为layoutSubviews的方法

override func layoutSubviews() {
    if(borderLayer != nil) {
        borderLayer.removeFromSuperlayer()
    }
    borderLayer = CALayer()
    let lineHeight:CGFloat = 2
    borderLayer.frame = CGRect(x: 0, y: self.frame.height - lineHeight , width: UIScreen.mainScreen().bounds.width, height: lineHeight)
    borderLayer.backgroundColor = UIColor.redColor().CGColor
    self.layer.addSublayer(borderLayer)
}

试试这个。

Answer 2

这不是直接的答案，只是我的建议如何在没有绘画的情况下实现相同的视觉效果。

参见示例代码和结果图像

@IBOutlet weak var button: UIButton!
override func viewDidLoad() {
    super.viewDidLoad()

    let layer = CALayer()
    let lineHeight:CGFloat = 2
    layer.frame = CGRect(x: 0, y: button.bounds.height - lineHeight , width: button.bounds.width, height: lineHeight)
    layer.backgroundColor = UIColor(colorLiteralRed: 0xEF/255.0, green: 0xEE/255.0, blue: 0xF4/255.0, alpha: 1).CGColor
    button.layer.addSublayer(layer)
}

IB中配置的按钮和背景视图颜色。