Search code examples
objective-cuitableviewuicollectionviewuser-experience

Implement "sticky" section headers when scrolling in iOS


This implementation is similar to a normal UITableView, but with one caveat that drasticly changes the complexity of the work in my opinion. The ask is that all section headers will be visible at all times, no matter how long the table is.

Explaining the exact UX is a little difficult, but if you follow the link below there is an interactive example of exactly what I would like to accomplish in native iOS:

http://slinky.iclanzan.com/

It is my understanding that utilizing the normal UITableView will not be enough to satisfy this case. Aside from using a mashup of multiple TableViews, ScrollViews, and/or CollectionViews, I was wondering if anyone knew of some existing libraries that already perform this implementation?

Or if anyone has any high level suggestions on how to accomplish this with custom code that would be appreciated as well (Not looking for someone to write this all out for me, just an idea would suffice).


Solution

  • Found a solution after working with some teammates on a POC. I'll at a high level explain the implementation.

    We know that a tableview's header and footer will remain static while we scroll. Since we want our sections headers to "stick" to the bottom and top of the tableview, we mimic this by dynamically adding any section header views that would have been hidden to the tableview's own header or footer.

    We do this by maintaining an array of section header views, and calculating in layoutSubviews when we need to change the tableview's header and footer.