After going through the first beta testing round for my EveryMarathon iPhone application, several of my friends mentioned that the race details screen was a little…boring. I had the standard UITableView with a grouped style, default background, default controls - pretty dull.

One of the easiest ways to brand an iPhone app is to change the background of a grouped table view to something a little more interesting - a pattern, or a 320x480 image. You end up losing the ability to use a regular UITableViewController - instead you have to use a UIViewController with a UITableView, and then set up the datasource and delegate yourself. Just set the background color of the UIView to your color or image, set the UITableView background color to clear, and then set the UITableView as a subView. For instance in loadView:

// Implement loadView to create a view hierarchy programmatically, without using a nib. 

- (void)loadView { 
    [super loadView]; 
    [self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"cloud.jpg"]]]; 
    self.tableView = [[[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStyleGrouped] autorelease]; 
    [self.tableView setBackgroundColor:[UIColor clearColor]]; 
    [self.tableView setDelegate:self]; [self.tableView setDataSource:self]; 
    [self.view addSubview:self.tableView]; 
}

With Three20, TTTableViewController isn’t a UITableViewController, so that helps - no major restructuring necessary. Instead all we need to do is override the tableView method on TTTableViewController. Here’s an example of what I did:

- (UITableView*)tableView { 
    if (nil == _tableView) { 
      _tableView = [[TTTableView alloc] initWithFrame:self.view.bounds style:_tableViewStyle]; _tableView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

      if (_tableViewStyle == UITableViewStyleGrouped) { 
        _tableView.backgroundColor = [UIColor clearColor]; 
        [self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"cloud.jpg"]]]; 
      } 
      
      [self.view addSubview:_tableView]; 
    } 
  return _tableView;
}

There might be a slightly better way of doing this with Three20 - in my case, all of my table controllers inherit from my own subclass of TTTableViewController, so it was easy to provide global behavior for my grouped table views.