If you're new here, you may want to subscribe to my RSS feed or follow me on Twitter. Thanks for visiting!
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!
Category: iPhone
Loading ...
Nice Helper Class, except the bottom background image doesn’t appear. numberOfRowsInSection is not getting called from within beautifyCell?
It may be obvious but I can’t see the problem.
Cheers
Rob
@Rob: Nice catch! Turns out it was getting an incorrect count of rows in beautifyCell, which was throwing everything off. I’ve updated the sample project with a fix. Thanks for letting me know!
Hello Ray,
Great tutorial as usual! I am looking to extend this a little bit to pull information from the selected cell. How would I get the text and image data based on the cell I have selected?
Thanks a bunch and keep up the good work…
@Ian: The trick is from BeautifulTableViewController’s point of view, it doesn’t know the type of UITableViewCell that the current row is using…
So – it depends on what you’re trying to do, but if you just want to see the text/image data, you could pass it in as a parameter to beautifyCell…
@Ray: Thanks for the reply!
I was actually able to gather information directly from the cell using a handy little function I found:
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
NSLog(@”TEXT: %@”, cell.textLabel.text);
}
I put that right inside the “FavoriteGamesTable.mm” file in case anyone else was curious.
Thanks!
P.S. Keep the tutorials coming, doing a great job.
@Ian: That works if you’re always using the default UITableViewCells, which have a built in textLabel.
However, often programmers use custom UITableViewCells, where the “title” for the row would be in a different UI element. Since BeautifulTableViewHelper is meant to be a generic reference, it would be safer not to make that assumption.
But for your own projects, if that assumption is safe to make then go for it! :]