Sweet grouped tables on the iPhone
Sweet grouped tables on the iPhone
I’m a big fan of using grouped table views whenever I need to display a bit of simple information in an app. I’ve used this in at least one of my apps off the top of my head, plus another that’s in the works. You can have a look at the screenshots attached to this post to see what i’m talking about. If you like the style and want to reproduce it in one of your apps, here’s how it’s done:
Concept
Here’s the gist of it: a textured background, with black ‘embossed’ group headers, dark transparent cells with black borders and white text. There’s probably cooler designs out there, but for a designed-by-the-programmer app it looks just fine :)
[[posterous-content:mogIwFnEnDIIAAuxxefg]]
Helper
I’ve got a ‘helpers’ class that I use for styling these grouped table views (and other stuff too), here’s the code you’ll need from it:
Using it
In your viewDidLoad, apply the style to the table view:
[Helpers styleTableView:vl.tableView];
The above removes the etched borders from the cells, makes the cell borders solid black, and sets the textured background using ‘backgroundView’ - it took me ages to realise that I had to use that instead of backgroundColor, so take note.
You’ll need to override the heightForHeaderInSection function:
-(CGFloat)tableView:(UITableView *)tableView
heightForHeaderInSection:(NSInteger)section {
return [Helpers styledTableHeaderHeight];
}
Before the cells are displayed, you must style them to override the default colours:
- (void)tableView:(UITableView *)tableView
willDisplayCell:(UITableViewCell *)cell
forRowAtIndexPath:(NSIndexPath *)indexPath {
[Helpers styleWillDisplayCell:cell];
}
To set the group headings, you must use the viewForHeaderInSection instead of titleForHeaderInSection, and use the helper to position a label inside a view:
-(UIView *)tableView:(UITableView *)tableView
viewForHeaderInSection:(NSInteger)section {
if (section==0)
return [Helpers styledTableHeader:@"Details"];
if (section==1)
return [Helpers styledTableHeader:@"Content"];
if (section==2)
return [Helpers styledTableHeader:@"Tweet"];
return nil;
}
And that’s it - you’ll have a nice, simple styled grouped table view that’ll hopefully make your app look a little less plain vanilla.
Thanks for reading! And if you want to get in touch, I'd love to hear from you: chris.hulbert at gmail.
Chris Hulbert
(Comp Sci, Hons - UTS)
Software Developer (Freelancer / Contractor) in Australia.
I have worked at places such as Google, Cochlear, Assembly Payments, News Corp, Fox Sports, NineMSN, FetchTV, Coles, Woolworths, Trust Bank, and Westpac, among others. If you're looking for help developing an iOS app, drop me a line!
Get in touch:
[email protected]
github.com/chrishulbert
linkedin
