UITableView with side section header images

Question

The music app on the iPad has quite a lot of interesting custom UI features, one of which is the table view displayed when looking at the albums of a particular artist.

It has images along the side of each section, almost acting in a very similar fashion to section header views. If I scroll down, the top image stays there until the next image comes along to bump it off, and vice versa.

Initially it seems quite impossible without reimplementing the UITableView all over again, but I think it's semi-doable by simply subclassing a UITableView to draw these section images on the side, outside of the uitableview, whenever it calls layoutSubviews (i.e. whenever it scrolls). There are slight problems with this: because it draws outside of the UITableView, any autoresizing will probably throw the entire layout off. And I'm really just unsure about the feasibility of it all.

Any thoughts?

---

Edit: I just realized that my first idea wouldn't work in that any touches on the images side themselves wouldn't be tracked by the tableview, so you couldn't scroll if you touched there. I think the biggest issue here is figuring out how to propagate the touches so that touches are tracked across the entire view.

Answer 1

you could check what section you are in in the tableview (or the topmost etc) somehow, then simply have a UIView that gets updated whenever the section changes, my idea is a bit hard to explain, but it wouldn't have to do with redoing UITableView at all, just have another view beside the table view to do the images instead of trying to embed that functionality.

Another way to do this, is perhaps a bit more tricky but you could try to indent your cells so they dont start at the very left of the table view, make the tableview very wide and have a custom view in the section header that contains that image on its left and hopefully would do it correctly? good question and a fun one to play with.

Answer 2

After thinking about it randomly in the middle of the night, I finally figured out a real solution.

Embed the UITableview in a UIScrollView, and when the user scrolls the view, the touches go through through the parent scrollview, and not the tableview itself. Pretty much everything you need to do lies in the layoutSubviews method; since layoutSubviews of the scrollview is called whenever the user scrolls the view, just change the frame of the tableview to stay fixed onscreen, and change the tableview's contentOffset to match that of the scrollview.

Example code:

- (void) layoutSubviews{
    tableView.frame = CGRectMake(self.contentOffset.x, self.contentOffset.y, tableView.frame.size.width, tableView.frame.size.height);
    tableView.contentOffset = self.contentOffset;   
}

At this point, you can adjust the tableview to one side, and do whatever you want on the other.