Table View Helper Class for iOS

Ray Wenderlich
Beautiful Table View Demo Screenshot

Beautiful Table View Demo Screenshot

A while back, Matt Gallagher from Cocoa with Love wrote an excellent post on customizing UITableView drawing.

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:

@interface FavoriteGamesTable : BeautifulTableViewController {
    // Your implementation

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 Wenderlich

Ray is part of a great team - the 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.

User 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.


    But I want the same functionality using programmatically. If any cell get updated I want to move that uitableviewcell up or down accordingly and with animation programmatically as I described above.

    I've seen this application in "Shopping List App" for iphone and here is the link:

    I know for re-ordering uitableviewcell we've to implement some delegate methods like e.g.

    Code: Select all
    - (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath
    - (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath

    but these are get called when we re-order using "re-order control".

    Any help will be appreciated.
  • 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.


    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:

    deleteRowsAtIndexPaths:withRowAnimation: - delete the row, with animation
    insertRowsAtIndexPaths:withRowAnimation: - insert the row, with animation

    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.
  • thank you for sharing.
    This site is so great~~~~!!!!
    Hope more article about the UI things.

Other Items of Interest Weekly

Sign up to receive the latest tutorials from each week, and receive a free epic-length tutorial as a bonus!

Advertise with Us!

Unity Starter Kit!

We are considering writing a new starter kit on making a game in C# with Unity.

Would this be something you'd be interested in, and if so which option would you prefer?

    Loading ... Loading ...

Our Books

Our Team

Video Team

... 12 total!

Swift Team

... 13 total!

iOS Team

... 52 total!

Android Team

... 9 total!

OS X Team

... 11 total!

Sprite Kit Team

... 10 total!

Unity Team

... 9 total!

Articles Team

... 11 total!