My name is Jake Marsh.
I'm a developer, designer, and writer.

Subscribed via Push Notifications. You can also subscribe via RSS or Twitter.

Subscribe via RSS or Twitter.

Subscribe via Push Notifications, RSS or Twitter.

▸ Creating the iOS 5 UITableView Bevel Effect

Oh man, I wish I had found Tim Oliver's writeup about this sooner (includes diagrams and sample code).

I just wrote all of this code myself, and had to do all of my own research. Serves me right for not properly Googling.

Pro Tip: Google everything before you begin coding a solution for a problem you assume everyone in your field must have.

You see, in iOS 5, Apple refreshed the look of a standard UITableViewStyleGrouped style UITableView. (You know, the ones with the rounded corners).

No longer were they actually white (like 255, 255, 255 or #FFFFFF). They were now a refreshing shade of 255, 255, 255, 0.8. That's still pure white, but with an opacity of 80%. Also, they added a 1 point tall drop shadow, as well as a 1 point tall inner shadow to each UITableViewCell. They've also still got a 1 point border around them.

I actually think the new cells looks much better, but they definitely break any custom code anyone had written to make their own custom UI or buttons match UIKit's.

I can't tell you how often I need to replicate this look and feel. Glad someone put together a comprehensive article about the topic.

Pro Tip #2: This is a pretty small detail, and sure, most people probably won't even notice. However, in my own anecdotal side-by-side tests, I was able to get an Oh this looks much better! reaction out of people by simply making my custom drawn stuff correctly match the system drawn bits.

Vote on Hacker News