Resize UITableView Header AND containing UITextView (iOS7 + AutoLayout)

Question

I've been struggling with this now for a little while, and I want to make sure I'm doing this the right way. For reference, I am using AutoLayout with Storyboards, and it's an iOS7-only app.

I have a UITableView with a header-view, and the UI for the HeaderView is hooked up in the storyboard. I've left the header in the storyboard, and it contains a few elements, one of which is a non-scrollable UITextView.

Here is a screenshot of how it basically looks in the storyboard:

I darkened the header-view's background to a darker grey so it stands out.

The UITextView's text can be dynamic, so its height needs to change depending on the size of the text. But the tricky part is that the table's header-view needs to adjust its height as well, depending on this text's size. I've tried a few different things with constraints, but it's not really working correctly (unless I disable AutoLayout and re-size things programatically, which I really would like to avoid).

I want this to be as clean as possible with as little code as necessary, of course. I am not tied to using the table-view header, although it works well with my needs, since I want it and its containing textview to scroll with the actual details below. But that all being said, if there is a more simple approach to accomplishing this (ie with a uilabel), I will gladly change the underlying structure.

Any thoughts as to an approach? Not looking for someone to hold my hand through an answer; just looking mainly for some good starting points if possible. Thanks in advance!

Answer 1

Some time ago I found new solution, maybe it needs tweaking for animations and is experimental, but, for some range of cases it's fine, so give it a try:

1. Add a headerView to a UITableView.
2. Add a subview to headerView, let's call it wrapper.
3. Make wrapper's height be adjusted with it's subviews (via Auto Layout).
4. When autolayout had finished layout, set headerView's height to wrapper's height. (see -updateTableViewHeaderViewHeight )
5. Re-set headerView. (see -resetTableViewHeaderView )

Here's some code:

- (void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];

    [self updateTableViewHeaderViewHeight];
}

/**
 tableView's tableViewHeaderView contains wrapper view, which height is evaluated
 with Auto Layout. Here I use evaluated height and update tableView's
 tableViewHeaderView's frame.

 New height for tableViewHeaderView is applied not without magic, that's why 
 I call -resetTableViewHeaderView.
 And again, this doesn't work due to some internals of UITableView, 
 so -resetTableViewHeaderView call is scheduled in the main run loop.
*/
- (void)updateTableViewHeaderViewHeight
{
    // get height of the wrapper and apply it to a header
    CGRect Frame = self.tableView.tableHeaderView.frame;
    Frame.size.height = self.tableHeaderViewWrapper.frame.size.height;
    self.tableView.tableHeaderView.frame = Frame;

    // this magic applies the above changes
    // note, that if you won't schedule this call to the next run loop iteration
    // you'll get and error
    // so, I guess that's not a clean solution and could be wrapped in @try@catch block
    [self performSelector:@selector(resetTableViewHeaderView) withObject:self afterDelay:0];
}

// yeah, guess there's something special in the setter
- (void)resetTableViewHeaderView
{
    // whew, this could be animated!
    [UIView beginAnimations:@"tableHeaderView" context:nil];

        self.tableView.tableHeaderView = self.tableView.tableHeaderView;

    [UIView commitAnimations];
}

All this works seamlessly after the initial autolayout pass. Later, if you change wrapper's contents so that it gains different height, it wont work for some reason (guess laying out UILabel requires several autolayout passes or something). I solved this with scheduling setNeedsLayout for the ViewController's view in the next run loop iteration.

I've created sample project for that: TableHeaderView+Autolayout .

Answer 2

I would suggest setting the height programatically. You can calculate the hight of the textview with boundingRectWithSize:options:context

Then you just set the frame of the tableViewHeader.

Answer 3

As said above, in UITableView the height for the header is not controlled by auto layout but by

-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section

Footer height is set by

-(CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section

And finally cell height is set by

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

The tableview loads the cells from storyboards, XIB files or code. It uses the above methods to set the size of the frame for the headers, footers and cells, and sizes their views to fit in that space.

It's important to understand that auto layout will not change those sizes, it only handles the rules used to layout the views inside their containers.

If your cells/headers/footers are using static sizes, then it's very easy. You just lock the heights of all your subviews, set up your cell to be the same size you return in heightFor... and everything looks how it should.

Dynamic cells/headers/footers take a bit more work.

Essentially you're asked to tell the tableview the size of your cell/header/footer BEFORE you have actually made it and sized out all the subviews.

You can quickly test this out by setting a breakpoint at the cellForRowAtIndexPath and the heightForRowAtIndexPath methods, the height is called first.

For dynamic tableviewcell heights, a common trick is to create a single cell in viewDidLoad and save it for calculating the heights. Then when you reach heightForRowAtIndexPath or heightForHeaderInSection use the pre made cell to put in the values you will be using in the final cell, for UILabels use sizeWithFont (pre iOS 7) or boundingRectWithSize (iOS 7.0+), and sizeThatFits for UITextViews. (For anybody reading this in the future, check that those methods have not been replaced by something newer)

So get the text you want into the dummy cell, get the heights of the labels and textviews, add the spaces between them and return the final size when you're done.

Then in cellForRowAtIndexPath or headerForSection redo the setting of values but on the actual cell that will show.

If your height calculations match your auto layout settings, then everything will fit perfectly in the space that's made for it.

If you want to change the height of a cell or header after it's already drawn, then you'll want to update the tableview by doing something like:

[self.tableView beginUpdates];
// change the data that will cause cell height to be different in heightForCellAtIndexPath or which will change a header or footer height calculation
[self.tableView endUpdates];

This will cause the tableview to check the sizes it has and only update the cells or header/footer if changed.

Answer 4

A table view header view is given to a table view via the tableView:viewForHeaderInSection: delegate method.

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    // create your header view here (read the docs on this method, there are some specific requirements)...

}

I don't know if it's possible to design the header view in storyboard; I guess you'd have to use an individual XIB file or do so programmatically.

In other words, I think you're headed towards creating constraints in code if you need to provide table view header views.

On the other hand, maybe you don't really need a table view header view. Maybe, what you're after is just a subview above the table view that doesn't move when the user scrolls the table. To do that, you need to re-work your view hierarchy in IB. Right now your so-called header view is inside the table view. You don't want that.

Or, since it looks like you're using static cells, you could make the top static cell take on the appearance of your so-called header view.