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)

iOS Developer in Sydney.

I have worked at places such as Google, News Corp, Fox Sports, NineMSN, FetchTV, Woolworths, and Westpac, among others. If you're looking for a good iOS developer, drop me a line!

Get in touch:
chris.hulbert@gmail.com
github.com/chrishulbert
linkedin
my resume



 Subscribe via RSS