How to add gradient at bottom of UITableViewCell as Tweetie app does

Question

Does anybody know how:

1. add small gradient to bottom of each UITableViewCell to visually highlight separation between cells
2. and at the same time make each second cell in table a bit darker then the each first row.

A great example of that stuff is Tweetie app. When you tap on your twitter account name you'll see table view with twitts. Even rows are bit lighter and each row has tiny dark gradient at the bottom, that visually separates rows. Looks pretty good.

Could anybody give me a clues how to do that?

Answer 1

I'm not sure if this is what you want, as I don't use Tweetie (though been meaning to check it out), but Cocoa With Love has a good discussion of the new CAGradientLayer available in 3.0. And an older one that relies on custom background images behind the cells.

Answer 2

I haven't looked at Tweetie. You can add a UIImageView to your cells above other items, with a gradient image and an alpha of 50% or less. With the right gradient and alpha, that will make the top and bottom of each cell look different - sort of like each cell is curved.

If you want every other cell to look different, then in cellForRowAtIndexPath, add a differently colored gradient to the UIImageView above, for odd cells vs even cells. Or change the background UIColor for the cell.

Answer 3

I think the whole cell is custom UITableViewCell. You can check this link on how to do it: http://pragmaticstudio.com/screencasts/5-custom-table-cells-in-interface-builder