Repeating background image in native iPhone app

Question

Short of putting a UIWebView as the back-most layer in my nib file, how can I add a repeating background image to an iPhone app (like the corduroy look in the background of a grouped UITableView)?

Do I need to create an image that's the size of the iPhone's screen and manually repeat it using copy and paste?

Answer 1

Apparently a UIColor is not necessarily a single color, but can be a pattern as well. Confusingly, this is not supported in Interface Builder.

Instead you set the backgroundColor of the view (say, in -viewDidLoad) with the convenience method +colorWithPatternImage: and pass it a UI Image. For Instance:

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed:@"gingham.png"]]; 
}

Of course, don't forget to add the image file to your application bundle.

There are also some built-in background pattern "colors":

• groupTableViewBackgroundColor
• viewFlipsideBackgroundColor

Because the are used globally across all iPhone apps, you incur the double-edged sword of an OS update updating the look and feel of your application (giving it a fresh new look that may or may not work right).

For instance:

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor groupTableViewBackgroundColor]; 
}

Answer 2

You should have a look at the QuartzDemo iPhone example code from Apple, specifically QuartzImageDrawing.m. Should use the following method call.

CGContextDrawTiledImage

Answer 3

You can even have an animated tiled background images that move. :D

Apps Amuck has a simple tutorial that show you how to do this on their site.

31 Days of iPhone Apps - Day 16: World Tour

Answer 4

You should use colorWithPatternImage