The background texture of a grouped UITableView will not scroll along with the table

Question

I am working on an application with a lot of UITableViews and I am trying to give them a textured background color. I need to use the Grouped style because I don’t want the section headers to float over the text fields when scrolling through the user.

The problem I am facing is that when I use the Grouped style, the background texture does not scroll with the table, it remains in place while the table scrolls over it. I feel this is a little weird, and I'd rather have a background scroll with a table, as is done in the Plain style. Unfortunately, because I can't have headline views floating on top of everything, this doesn't seem like an option.

Has anyone been able to do this?

Here is the code:

- (void)loadView { [super loadView]; self.view.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; self.tableView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"texturedPattern.png"]]; // this prevents the cells from replicating the background texture self.tableView.backgroundView = [[UIView alloc] initWithFrame:self.view.bounds]; self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone; } - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath { // disable the default grouped border since we're doing it manually with the textField cell.backgroundView = nil; cell.backgroundColor = [UIColor clearColor]; } 

And now my view of the table is as follows:

UPDATE

As suggested by Amit Vyawahare, I tried applying a background texture to the background of the headers and each cell. There are two problems that are much more obvious when you see her in motion, but I will do my best.

• Firstly, the background is always displayed. I removed the background color from the table to make it more obvious:

Wherever you see black, the background texture of the tableView will be visible, and it will not scroll using tableView. The Grouped tableView style inserts a 5-pixel border on each side of each cell and cannot be resized. Also, there is no footer under the personnel identifier section, and I even implemented -tableView:heightForFooterInSection: to return 0.0, but there is still a space there.

• Secondly, even if I could get rid of these spaces, the textures still do not line up. Again, this is hard to understand, so I uploaded a screenshot of the retina to make it a little easier:

This is most obvious above the “Password” section, you can see that the textures are not aligned properly, and it looks like a “fold” in the document. It would probably be great if that was what the client wanted. This is visible, but less obvious, at almost every edge of the second screen shot. This is due to the fact that the texture is actually quite large: 200x200 (400x400 @ 2x), and there are small color changes that are not noticeable if this mismatch does not occur.

Answer 1

First replace the UITableViewController with a UIViewController and add a UITableView to it. Set autoresizingMask to a flexible width / height. Now you have something that is equivalent to a UITableViewController, but with more control over the view hierarchy.

Then add a view below the table view (actually: add it first) that contains the background.

Finally, set the scroll delegate to your class and respond to the scroll events by updating the background view accordingly.