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.

Millesimal

I don't think you will find a solution for this. If you want to draw above the separator, you can just hide the separator, and draw a line to simulate it. But the issue here is that the cells have a certain hierarchy that they are added as subviews. Cell above another cell, will just hide the view that you drew outside the cell using clips to bound. – Psia

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.

Ratal

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 ;-)

Wharve