UITableView with a Background that Scrolls with the Content

One limitation I’ve found in UITableView is that it’s difficult to have a pattern background that scrolls with the table’s content. For example, in your UIViewController subclass you might set the UITableView’s backgroundColor property to:

self.tableView.backgroundColor = [UIColor colorWithPatternImage: somePatternImage];

but the result would be that this background moves with the content, but it is tiled with the cell background. i.e. the pattern’s 0,0 coordinate is aligned with the cell background 0,0 coordinate. So unless your row heights are a multiple of the pattern background’s height, it will look wrong.

This may be undesirable depending on your needs.

So how does one get a background pattern scrolling with the content but allowing row heights to be independent of the pattern image’s dimensions? Well, the worst, non-flexible way would be to say ‘not possible’ and have your rowHeight be a multiple of the pattern image’s height. This basically sucks; what if your cells have dynamic heights (depending on their content)?

So, I wrote some code and made it easy to integrate and flexible:

SOPatternBGTableViewController on github

The idea is that you subclass this and provide it (before you call [super viewDidLoad] ) an image you want to use as your background (pattern image), and then tell it which UIScrollView (most likely UITableView) should be the controlling table. (The background has to scroll with the content, so which is the scrolling view with the content?)

Clone it on github and try out the demo project to see how it works.

Questions, Comments, Feedback is appreciated!

Happy Coding!

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 )

Connecting to %s