Hello,
so i had an idea on how to design a table view for an app… that i would like to implement now, but i cannot seem to find a way to do it, maybe someone could help me =)
What i basically want is what you can see in the picture.
Is there a way to do something like that?
Hi,
I just made a test project showing how you can do it using storyboard.
The background of the header are drawn using CoreGraphics but you can use image if you need to.
Thank you so much =) that helps me a lot!
1 More Question tho… i was planning to make those Sections “borderless” kinda like an overlay over but between 2 tableview cells. Thats my main issue! Is this even possible?
I’m glad to know it helps 
When you say borderless, you mean the same header view without the dark border, or with a alpha transparency on the exterior side of your header ?
Nice job micazeve. My input is watch out for transparency. It looks like your section headers occupy the full height of their space, while revynd’s sketch shows them appearing to overlap the cells, which would require some transparency. Transparency in a table view can really slow down the scrolling in a tableview, and you should always check with Instruments using the Core Animation preset.
Yeah that is exactly what i meant, they should overlap with the cells. Like a normal Table, but you put those sections on TOP of the cells.
So its simple transparancy? Wouldn’t you then still see the grey borders of the cells under the headers? I tried to sketch it more precisely, its hard to explain kinda =)
@aeberbach : Thanks for pointing out that too much transparency can ruin the scrolling experience, and must be used carefully in a UITableView. To reduce its impact it’s possible to avoid using it easily : for example instead of using transparent background for label, set a background color equal to the superview background color (when it’s possible of course).
@revynd : If you want to overlap both the cell above and below the header, instead of drawing it like in my test sample, add a subview to the contentView of your cell, and set its height and origin so it go outside the contentView:
Be sure to uncheck the Clip Subviews in interface builder for both the contentView and the HeaderCell in order to add it render properly. Run your project and you will see the subviews of the header cell overlaps the cell : first step to success !
Create a custom UIView subclass for this contentView subview, and customize as you need to draw the separator.
I personnel used the previous drawRect: method so the looks is the same :
But there are some drawbacks :
First, as you can see in the screenshots, the first section is not properly rendered, which can be easily understood : every section overlaps both on cells above and below, but there is no cell above. You can’t just fix it on heightForHeaderInSection since the custom subview is Y centered : the only way to have it fully visible it so set the header height at least to the custom subview height, but thus you lose the overlap for the below cell. Hopefully, this can be easily fixed using a new header section class which represents the first section, and set the constraints so the custom subview overlaps only the below cell.
Secondly, if you scroll, you find the same issue as for the first section when the other sections reach the top of you tableview. But here, you can’t fix it easily 
And third issue, when you scroll, you have no way to determine which section will go above/below the other during the section transition animation. Because this sentence was hard to write and probably hard to understand, let’s show it with a video ^^
You have to take into accounts these drawbacks and find what you need in your app. Maybe there are some easy way to fix these issues, but they didn’t come to my mind right now.
I hope I this post helped you a little, even if I say basically that what you try to achieve is difficult 
wow, thank you so much @micazeve that is very helpful, ill try to figure it out somehow, if i find a cool solution for the problems ill post it =)
and thanks to @aeberbach for pointing out the transparency issue
cheers =)
