UITableView headers on the left side of sections (like Spotlight)

Question

Been searching for this for quite a while, and I still haven't found a way to do it. I'd like to reproduce the section headers of the iPhone's Spotlight into a UITableView.

"Regular" table view headers stay visible at the top of a section when you scroll, as we all know. But there is one kind of header that I've never seen elsewhere than in the Spotlight page of Springboard: there, the headers span the whole height of the section and are not stuck on the top of the section, but on the left side.

How the heck is that achieved?

Answer 1

Good question. I made a little experiment. It almost looks like the view from spotlight. But it's lacking one import feature. The lower "image" doesn't push the upper image to the top if they collide.

I doubt that there is a built in solution without the use of private frameworks.

---

I achieved this:

As you can see the two header images at the top overlap. They don't push each other like normal headers to. And I had to deactivate the cell separators. If I would use them they would appear at the whole cell. So you have to draw them yourself. Not a big deal.

But I have no idea how I could fix the overlapping.

Here is the code that made this happen:

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    return 1;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    UIView *contentView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.tableView.bounds.size.width, 44)];
    contentView.backgroundColor = [UIColor lightGrayColor];

    UIImageView *imageView = [[[UIImageView alloc] initWithFrame:CGRectMake(5, 5, 34, 34)] autorelease];
    imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d", section]];;

    [contentView addSubview:imageView];
    return [contentView autorelease];
}