In the article, Matt shows how you can style UITableViews quite easily by setting the backgroundView and selectedBackgroundView to UIImageViews containing custom background images for each cell. The only trick to it is to make sure that you choose the proper image based on whether you’re the top row, bottom row, middle row, or only row in the table.

Anyway, I’ve found the techniques he mentions in the article pretty useful in a number of projects, so I wrote Beautiful Table View helper class so I could get the functionality easily whenever I want to include a table view controller. I thought I’d post the code here in case anyone else might find it useful: here’s a sample project.

To “beautify” your table view controller, all you have to do is derive your view controller from BeautifulTableViewController like so:

Then implement numberOfSectionsInTableView, numberOfRowsInSection, and cellForRowAtIndexPath like you normally would. The only other thing you have to do is insert the following line before you return from cellForRowAtIndexPath:

[super beautifyCell:cell atIndexPath:indexPath];

And make sure to call [super viewDidLoad] in your viewDidLoad method. And that’s it! So feel free to use the Beautiful Table View Helper (and even the art, drawn by my talented wife!) in your projects if you find it useful. And thanks again to Matt for letting me know about this method!

Ray is part of a great team - the raywenderlich.com team, a group of over 100 developers and editors from across the world. He and the rest of the team are passionate both about making apps and teaching others the techniques to make them.

When Ray’s not programming, he’s probably playing video games, role playing games, or board games.

To join the discussion, enable your javascript or head over to the forum over here

User Comments

4 Comments

hi ray

nice tutorial on UITableView customization. I want to do more with UITableViewCell re-ordering. I want to re-order UITableViewCell just like we use Re-ordering using "Re-ordering Control" by enabling [self setEditing:]. And we see other cell order themselves accordingly with animation as we move one cell using Re-order control. From Apple documentation.

Hi Umar, I see what you want to do - bring the user's last-edited list item to the top, makes sense in a shopping list. But I don't think there is a completely easy way to do what you want. There is a fairly easy one though.

reloadSections:withRowAnimation:

If your data is updated and then you call this method for the affected section the usual cellForRowAtIndexPath: methods are called to get the cells. By returning the same cells in a different row order you would get the rearrangement you want. The animation argument specifies direction - for example slide out to the right, slide in from the right.

Or you might want more fine-grained control over the look and sequence of the operation - maybe your user can combine rows... how about a list where they have 1 litre of milk and they add another row with 1 litre of milk - you could present an action sheet noting that the item is already on the list and asking if they want to add the quantity or they forgot they already added it - then you would lose two rows and ad one with the combined quantity. You could delete the two rows individually and insert one row using:

Of course the first method would do this too but what if you want the animation to give clues about what is happening?

UITableViewRowAnimation has a lot of flexibility so you can make the transition appear as if the same row is being shuffled behind the table and inserted again. For example UITableViewRowAnimationTop slides the deleted row out of view upwards - then UITableViewRowAnimationBottom slides the new row in at the top of the table simultaneously pushing the rest of the table down to make room. Or you could slide the deleted row out to the left and then in from the right if you wanted to cue the idea of a new row replacing one or more old ones.

There are also methods to reload/delete/insert entire sections.

If you wanted a bunch of deletions/insertions to be animated simultaneously you would group them using the beginUpdates method prior to performing the actual operations and see the animation when you call endUpdate.

@Ray: Nicely presented tutorial. According my knowledge in viewDidLoad we need to call [super viewDidLoad]; first then we need to call our custom implementation. I found that in your code, You always calling at the end of the block. Correct me if I wrong.