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

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

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 添加约束

我们完成了！

还有一个alternate解决方案可以使用Bezier Paths

实现这一目标

 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 中配置的按钮和背景视图颜色。