Drawing outside the bounds of UITableViewCell

Question

I am trying to add a "post-it note"-like image to all the cells in my UITableView. This image needs to draw (partly) outside of the bounds of the UITableViewCell.

When setting clipToBounds to NO, the image is indeed drawn outside the cell's bounds. However, (quite logically) the image is drawn below the UITableView separator lines and section headers.

I guess I could try adding the images directly to the UITableView, on top of all other elements. However, it might become rather complex trying to figure out the exact location of each cell in the UITableView, as I am using section headers.

So, before embarking on that journey, I was wondering if there might be an easier solution.

Answer 1

You could try hiding the separator and then drawing your own separator behind the post-it in the UITableViewCell. That should do the trick.

Answer 2

I'd use an affine transform to move the post-it image to its intended location, and change the edge insets of the separator view so it isn't drawn over the image.

postItImage.transform = CGAffineTransform(translationX: 50, y: 20)
separatorInset = UIEdgeInsets(top: 0, left: 30, bottom: 0, right: 50)

It depends what your UI needs to look like. This would obviously change the separator insets for all cells, which may or may not be acceptable ;-)