How to make UITable header stick to the top of the screen when using Storyboards?

Question

I've made header using this post: Table Header Views in StoryBoards

But i am unable to make header stick (fix) to the top of the screen while scrolling.

How can that be achieved?

P.S. Table style is plain, and when i tired to overload viewForHeaderInSection and returned outlet for header view, it just got worse.

Thanks in advance!

Solution 1

I was able to do it (at least in iOS 6) like this, don't know why this thing works:)

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {

    if(self.headerManualView == nil) {
        //allocate the view if it doesn't exist yet
        headerManualView  = [[UIView alloc] init];

        //create the button
        UITextField *txtField = [[UITextField alloc] initWithFrame:CGRectMake(10, 3, 250, 44)];

        //the button should be as big as a table view cell
        txtField.borderStyle = UITextBorderStyleRoundedRect;

        //set action of the button
        //[txtField addTarget:self action:@selector(removeAction:) forControlEvents:UIControlEventTouchUpInside];

        //add the button to the view
        [headerManualView addSubview:txtField];
    }

    //return the view for the footer
    return headerManualView;
}

Solution 2

Here's the code which I believe makes the header view stick to the table top (that is not it's default behavior):

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGRect rect = self.tableHeaderView.frame;
    rect.origin.y = MIN(0, self.tableView.contentOffset.y);
    self.tableHeaderView.frame = rect;
}

An alternative is to have header view for the first section. You can't use any subview at viewForHeaderInSection, you have to return there the view which is not yet at views hierarchy. The advantage of the method is that the section header view is designed to be at the table top, the drawback is that you might want to have headers for sections in the feature, it will break the solution.

Solution 3

I think it's better for you to use a UIViewController, instead of a UITableViewController in the storyboard, to achieve this. Just put a header in the top of the view, in the storyboard, and put a UITableView under the header.

Comments

[Egor]

I can resort to it, but it's strange, that usual header does stick to the top, and the one added using drag-drop in storyboard does not.

[Egor]

i've tried your code - looks like it doesn't work for me (i've put MAX instead of MIN BTW). Strange.

[A-Live]

@Egor the tableView header view does not stick to the top regardless of the way you set it. And I don't think the viewController class makes any difference. If you put the view above the tableView, it doesn't have bounce scrolling effect which is not nice.

[Egor]

strange, because it sticked when i used tableView viewForHeaderInSection:(NSInteger)section for this purpose - using this as an example blog.blackwhale.at/?p=104

[A-Live]

@Egor, interesting, it seems not to work indeed for iOs 6, but it works with iOs 5 (and you are right, MAX should be used for your needs). Will try to find a better solution.

[Egor]

i've resorted to simple way, will post it tomorrow

[A-Live]

@Egor viewForHeaderInSection and headerView are used to set different views, you can have both.

[João Nunes]

I added this code in method layoutSubviews of a subclass of the tableview and it works fine!

[Chlebta]

@A-Live An alternative is to have header view for the first section... If I got multiple section and I want only the FirstSection header be sticky always, even when section is changed, will this work ?

[A-Live]

@Chlebta I don't believe it will work unless you manually set the first header view position same as at the solution above, but that is not a good idea since a table view expects section headers to be reusable and your app's stability will too much depend on the implementation and setup of the UITableView.

[Chlebta]

@A-Live, I'm working on animation like in product details fancy app I think they have used scrollview that contain UIView for image, UIView for title and UITableView for details can you check it and tell me if what I'm thinking of is right ?

[A-Live]

@Chlebta yes I can check the app out if it is free and is translated to English, could you add an iTunes store link ?

[Chlebta]

@A-Live Yeah sure : itunes.apple.com/en/app/fancy/id407324335?mt=8 also could you tell me how they maked UINavigationbar change opacity degree ?

[A-Live]

@Chlebta I think you are right, at the details screen they are tracking the scroll view (or table view) offset and changing the image view or navigation bar appearance according to the offset value. There's a lot of answered questions regarding styling of the navigation item (both for the color and title offset), please search for them. I think they are also using custom transitions to make it all work together, the nav bar seems to be cross fading which is a standard behavior. Try to play around and if you have a particular problem please create a separate question with all the details.