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

 

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

 

//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:

 

Bgimageartifacts1

 

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 andATableViewController 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:

Bg-noartifact1

 

Adapted from the article by MATTJDRAKE on MARCH 19, 2009 (howtomakeiphoneapps.com)

 

Advertisements
This entry was posted in General and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s