Table Header Views in StoryBoards

ios uitableview xcode4 storyboard

96,087

Solution 1

It looks like one simply drags a control to the top of the table view. I didn't expect it to be that easy.

Before Drop

After Drop

Solution 2

You can do this easily by dragging your UIView/UIImageView just below the UITableView in the document outline (instead of the layout).

If you try to drag in the layout instead of document outline the UITableViewCell will jump to the top handling which is frustrating!

96,087

Tyler DeWitt

Dabbler in a lot of technologies. Big fan of Ruby on Rails. Geek who loves new toys. Yes, that is a real cheetah on a leash.

Updated on July 24, 2022

Comments

Tyler DeWitt almost 2 years

Is there a way to insert a Table Header View (tableHeaderView) in StoryBoard (like we used to do in Interface Builder)?
ozz over 12 years

I was surprised to find that this is how it's done. I noticed in my implementation that for this to work correctly I had to delete my heightForHeaderInSection:(NSInteger)section code otherwise I'd end up with extra space above the header view itself. Also, in order for this header to "stick" at the top of the table view, I had to implement viewForHeaderInSection:(NSInteger)section and return this view.
Accatyyc over 11 years

This only seems to work if you have at least one prototype cell in the table.
ryanrhee over 11 years

@cdo, can you elaborate on how you were able to get the header to "stick" at the top of the table view? I tried blindly implementing viewForHeaderInSection: and I got an error saying "Unable to simultaneously satisfy constraints". (See my question here: stackoverflow.com/questions/14554051/…)
Dave Ross about 11 years

Thanks, I couldn't do that until I knew that it would work, precision drag required. I'd tried to do that multiple times...
MiQUEL almost 11 years

I couldn't imagine it was so simple! Many thanks! It also works as a footer, so it's perfect if you're interested in writing some totals
klefevre almost 11 years

Has anyone find a way to resize the UIView (and so affecting the size of the "header" size). When I resize the UIView, the tableview section doesn't move, and when I resize the heightForHeaderInSection, it's the UIView doesn't move...
ArpitM almost 11 years

@kl94 last time I needed to do that I found that I had to to do something similar to this.
Daniel Schneller almost 11 years

You can use the outline on the left to do the dragging, which is easier to do than trying to hit the exact spot above the first prototype cell, if you want to set the table header view. I noticed – maybe an Xcode bug (5.0) - that this would only work when I had moved the view out of the regular hierarchy first; I dragged it all the way to the bottom of the outline for that scene. Then, in a 2nd step, I could move it onto the table view.
Alex B over 10 years

@huhitschris This only worked for me in Xcode 5 if (1) I implemented viewForHeaderInSection returning this extra view (and heightForHeaderInSection), and also drag the view out of table view (where first responder et al are located, otherwise I get extra space on top of the table equaling this view's height.
User16119012 over 10 years

It is not fixed at the top for me. Is it sticking to top for you?
Adam Johns about 10 years

@huhitschris how did you get it to stick? I returned this view in viewForHeaderInSection, but mine still doesn't stick. I made this view a property connected to storyboard and returned that in the method. Is that how you did it?
Adam Johns about 10 years

I got it to stick to the top after following Alex B's instructions. I made a post here: stackoverflow.com/a/23717919/1438339
Drux about 10 years

In Xcode 5.1.1, this seems to work e.g. for UILabel, UISearchBar, and UIImageView, but not for UISegmentedControl. Or am I mistaken?
Ricardo almost 10 years

@MrRogers Is it possible to have a variable height header when using the storyboard trick?
AsifHabib over 9 years

I added the View in UITableview in same way, it is appearing at bottom, any workarround
Ans almost 9 years

I like the (some) ease storyborad offers, but sometimes storyboard based projects become too messy when your scope and domain is big. Specially for iPad apps. Moreover in my experience the storyboard expert resources are less 1/3 of traditional xib resources. So at time when your meain developers are not available (due to any reason), the maintenance of the application becomes little hectic. I may be wrong but just sharing my own experience.
dwbrito almost 9 years

It's funny that some views (like UITextField) can't be dropped there. UIImageView works though.
Sushil Sharma over 8 years

@MrRogers Is there any way to make headerView stick to top ? I added headerView using above method.
ArpitM over 8 years

@user6April off the top of my head you could either not put it in the table or if you only have one section you could add it as a section header instead of the table header.
R. Rincón about 4 years

The question is about the table header view, not section header views.
fullmoon about 4 years

@R. Rincón, Where did I mention a section header? The section in the methods are necessary from the framework. Every TableView has at least one section if you don't know that. Just pass section 0 If you don't have sections.
R. Rincón about 4 years

This code returns audioView for every section as the section header. If someone implements this, tableView.tableHeaderView will be nil. If they have 5 sections, they'll have five section headers. If they already have section headers and want to add a table header view, this answer does not help them. This doesn't answer the question, which specifically mentions tableHeaderView.
fullmoon about 4 years

You can specify the the header view for each section with some logic inside the method. TableViews built with sections in mind. You always have sections, if you don't, then that would be section 0. There is no method to specify header view without specifying a section.
R. Rincón about 4 years

developer.apple.com/documentation/uikit/uitableview/…
fullmoon about 4 years

That's what drag and drop does, it calls this method from storyboard. It didn't size well in different screen sizes, that's why I used the method with sections.
R. Rincón about 4 years

"Use this property to specify a header view for your entire table. The header view is the first item to appear in the table's view's scrolling content, and it is separate from the header views you add to individual sections. The default value of this property is nil. When assigning a view to this property, set the height of that view to a nonzero value. The table view respects only the height of your view's frame rectangle; it adjusts the width of your header view automatically to match the table view's width." Your response does not answer the question, which is about this property.
R. Rincón about 4 years

The question is about how to insert a table header view into a Storyboard. Instead, you described a way to add a view to a Storyboard and use it as a section header.
fullmoon about 4 years

dude, the accepted answer didn't size well on different screen sizes. Test it your self and let me know. Use Xcode 11. I've put a working guaranteed solution to size the header as you wish by using the height method. The accepted answer is no longer working. This is the nature of software development, things change.
fullmoon about 4 years

Or maybe a bug in Xcode 11, someone needs to file a bug report so they fix it.