Question

I have a standard grouped table view. I would like to add a shadow around it (i.e. around the edge of each tableview section) – if you are not sure what I mean, then see the official twitter app (below) for an example. It’s pretty subtle, but it’s definitely a shadow as opposed to a border.

How can I achieve this effect?

Save for using images with built in shadows as each cell’s background – which won’t allow animated cell resizing like I need – I haven’t figured out a way.

Answer 1

I needed this effect in one of my own applications the other day. It’s actually very easy to achieve by just using the CALayer shadow properties in combination with a CALayer mask. I’ve put together a simple example project at Github:

https://github.com/schluete/GroupedTableViewWithShadows

The effect is implemented in the UITableViewCell category UITableViewCell+CellShadows.m.

The first step is to create a shadow rectangle. Enlarge the rectangle depending on the cell’s position in the section (top, middle, bottom) to prevent the rounded corners from being visible in the wrong corners (lines 18-23). Then add the shadow to the background view of the cell (lines 35-41).

Now there’s a nice shadow effect, but the shadow of the first cell “bleeds” into the second cell. To prevent the bleeding just add a layer mask to cut off all the unnecessary parts of the shadow (lines 25-32 and 43-46). That’s it, we’ve got our shadow!