How To Add A Nice Background Image To Your Grouped Table View

Matthew Campbell, March 19th, 2009

Are you tired of your table views having the standard, boring, gray and white striped background?

Adding a nice image or pattern to your table views is one way of putting a little extra gloss to your UI. This is important, because gloss sells… However, if you have tried to do this yourself you already know that simply inserting an image into your table view will produce ugly artifacts.

THE WRONG WAY

Here is the obvious way to add a background image to a table view:

//This method produces odd artifacts in the background image:
ATableViewController *yourTableViewController = 
    [[ATableViewController alloc] 
    initWithStyle:UITableViewStyleGrouped];
yourTableViewController.view.backgroundColor = 
    [UIColor 
    colorWithPatternImage:[UIImage imageNamed:@"TableViewBackground.png"]];
[window 
    addSubview:yourTableViewController.view];
[window makeKeyAndVisible];

And here is what my Tasting Notes background looks like when I simply add an image to the table view’s backgroundColor property:

This is not what you want in high quality apps that you are trying to sell to people. Especially if your image is more complex than the background I have here.

THE RIGHT WAY

What you need to do is create a view with your background image and add that view to your app’s window. Then you must set the table view’s background color to “clearColor”.

Here is how you would do that from the app delegate:


UIView *backgroundView = 
    [[UIView alloc] 
    initWithFrame: window.frame];
backgroundView.backgroundColor = 
    [UIColor 
        colorWithPatternImage:
            [UIImage imageNamed:@"TableViewBackground.png"]];
[window addSubview:backgroundView];
[backgroundView release];

yourTableViewController = 
    [[ATableViewController alloc] 
    initWithStyle:UITableViewStyleGrouped];
yourTableViewController.view.backgroundColor = 
    [UIColor clearColor];
[window addSubview:yourTableViewController.view];
[window makeKeyAndVisible];

yourTableViewController is declared at the top level of the app delegate and ATableViewController is a subclass of UITableViewController that simply displays the rows and sections in the example.

Using the code above produces this cleaner image in the background:

Much nicer, eh? Special thanks to @McCarron for suggesting this solution earlier this year!

So, let me how this works in the comments below!

Comments

If you are creating your tableView in IB, this is also very simple to do. Create an outlet to the tableView in your .h file: IBOutlet UITableView *tableView; Then connect the File's Owner to the tableView in IB. Then set the tableView's background to be transparent in viewDidLoad of your .m file: tableView.backgroundColor = [UIColor clearColor]; Then you can just add an image to the back layer of your IB file. mike62, April 30, 2009