UITableViewCell drawRect bottom border disappears on insertRow - ios

Question

I have a custom UITableViewCell where I use drawRect to paint a simple bottom border:
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)
}
This works perfectly. However when I insert a row with animation the borders of ALL cells disappear and appear again when insert animation finishes:
tableView.insertRowsAtIndexPaths([NSIndexPath(forRow: cells.count - 1, inSection: 0)], withRowAnimation: UITableViewRowAnimation.Fade)
Any idea how to avoid this?

Answer 1

Well You can try this code in tablecell's awakeFromNib if you only want to use CALayers assuming that your TableView is covering the full width of the device.
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)
}
and you will get the output as:
Also make your tableview separator color to clear
self.tableView.separatorColor = UIColor.clearColor()
So that it doesn't gets overlapped with your layer.
What I can observe that now no borders of cells disappears ever whenever a new row is inserted.
Alternatively
We can just use a UIImageView in the cell storyboard and provide a color with the following constraints.
Adding UIImageView
Adding Constraints to UIImageView
And we are done!
There is one more alternate solution to achieve this using 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)
}
This also yields the same output.
EDIT:
If we are not using storyboards or nibs for the cell and creating the cell programatically, then we can do a workaround like this:
Create a property in your CustomTableViewCell class
var borderLayer:CALayer!
Now there is a method called layoutSubviews in CustomTableViewCell class
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)
}
Try this out.

Answer 2

It's not direct answer, just my suggestion how to achieve equal visual result without drawing.
See example code and result image
#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)
}
Button and background view colors configured in IB.