How could I add a shadow to a grouped UITableView (as seen in the official twitter app)?

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 off

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!