Question

I have a grouped UITableView. Now unlike the default table view header my header should be next to the individual cells:

Standard:

[Header Cell]
[Item 1]
[Item 2]

What I need

+-------+----------------+
|       |  Item 1a       |
|  h1   +----------------+
|       |  Item 1b       |
+ - - - +----------------+
|          Item 1c       |
+------------------------+
|       |  Item 2a       |
|  h2   +----------------+
|       |  Item 2b       |
+------------------------+
|       |  Item 3a       |
|  h3   +----------------+
|       |  -placeholder- |
+-------+----------------+

Some remarks:

• Group H1 has three items
• Group H2 has two items
• Group H3 has just one item (I have to insert a placeholder cell so that the header cell can have the full height of two item-cells
• When the user scrolls the list then the header should be pushed upwards that the two header-cells don’t overlap.

The challenge here is the height of the header cell:

• If I set the height to 0 and uncheck clip subviews then that header cell is shown but does not get pushed away at the correct position.
• If I set the height of the header cell to the visual height then there is an empty space of that height across the whole width of the table which I don’t want…

Update 1: I just realized that apple uses such a list for the search (grouped by messages, mails, contacts, calenders etc.). So my question basically is how can I tweak UITableView in order to behave like the grouped search results… 🙂

_{(source: mshcdn.com)}

Answer 1

Update: I created a project on github, which does exactly this. I have extracted all the relevant code for the behaviour into two classes (BBFloatingHeaderViewController & BBFloatingHeaderCell). There is also an example project. I hope this is useful for others 🙂

Here’s the project: besi/FloatingTableViewHeader

This is an excerpt from the readme:

Floating UITableView headers

These classes aim to copy the behaviour found in iOS built-in Spotlight search, where the search results are grouped by category and the icon of the respective category floats on the left side of the search results.

Setup

Check out the example project so see how to setup the classes.

1. Add the .m + .h files of BBFloatingHeaderViewController and BBFloatingHeaderCell to your project.
2. Create a TableView and set the Class of the ViewController to your subclass of BBFloatingHeaderViewController
3. Create the header cell in IB and set its class to your subclass of BBFloatingHeaderCell
4. Make sure that your floating header view is the topmost view in the BBFloatingHeaderCell‘s view hierarchy.

The result

Floating Headers http://i.minus.com/jyea3I5qbUdoQ.png