How to scroll the header along with the UITableView?

Question

I have a UITableView with a header. the problem I currently have is that the header doesn't scroll with the table. I need it to scroll off screen (above) when the user scrolls the table view up. the tableview scrolls but the header is locked at the top of the UIView.

thanks

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

    UIView *sectionHeader = [[UILabel alloc] initWithFrame:CGRectNull];
    sectionHeader.backgroundColor = [UIColor whiteColor];

    // add user profile image to _contentView
    UIImageView *userImageView;

    UIImage *userImage = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:userProfileImageUrl]]];

    userImageView=[[UIImageView alloc]initWithImage:userImage];
    userImageView.frame=CGRectMake(10,10,90,100);

   [sectionHeader addSubview:userImageView];

   // return userImageView;

    // user name lable
    CGRect userNameFrame = CGRectMake(110, 60, 100, 50 );
    UILabel* userNameLabel = [[UILabel alloc] initWithFrame: userNameFrame];
    [userNameLabel setText: firstName];
    [userNameLabel setTextColor: [UIColor blackColor]];
    [userNameLabel setBackgroundColor:[UIColor clearColor]];
    [userNameLabel setFont:[UIFont fontWithName:@"DIN-Regular" size:14]];

    [sectionHeader addSubview:userNameLabel];

    // user last name label
    CGRect userLastNameFrame = CGRectMake(110, 75, 100, 50 );
    UILabel* userLastNameLabel = [[UILabel alloc] initWithFrame: userLastNameFrame];
    [userLastNameLabel setText: lastName];
    [userLastNameLabel setTextColor: [UIColor blackColor]];
    [userLastNameLabel setBackgroundColor:[UIColor clearColor]];
    [userLastNameLabel setFont:[UIFont fontWithName:@"DIN-Regular" size:14]];

    [sectionHeader addSubview:userLastNameLabel];

    // user checkin view
    UIView *userCheckinView = [[UIView alloc] initWithFrame:CGRectMake(10, 120, 280, 25)];
    userCheckinView.backgroundColor = customColorGrey;
    [sectionHeader addSubview:userCheckinView];

    // check in label
    UILabel* userCheckInLabel = [[UILabel alloc] initWithFrame:CGRectMake(40, 2, 100, 20)];
    [userCheckInLabel setText: @"CHECK-IN"];
    userCheckInLabel.backgroundColor = customColorGrey;
    userCheckInLabel.textColor = customColorIt;
    [userCheckInLabel setFont:[UIFont fontWithName:@"DIN-Regular" size:12]];

    [userCheckinView addSubview:userCheckInLabel];

    // image
    UIImageView *checkinImg = [[UIImageView alloc]
                               initWithImage:[UIImage imageNamed:@"classifica_geotag_C.png"]];
    checkinImg.frame = CGRectMake(5, 0, 24, 24);
    [userCheckinView addSubview:checkinImg];

    // check in label
    UILabel* userCheckInCountLabel = [[UILabel alloc] initWithFrame:CGRectMake(250, 2, 20, 20)];
    [userCheckInCountLabel setText: [checkinCount stringValue]];
    userCheckInCountLabel.backgroundColor = customColorGrey;
    userCheckInCountLabel.textColor = customColorIt;
    [userCheckInCountLabel setFont:[UIFont fontWithName:@"DIN-Regular" size:12]];

    [userCheckinView addSubview:userCheckInCountLabel];

    // user like view
    UIView *userLikeView = [[UIView alloc] initWithFrame:CGRectMake(10, 150, 280, 25)];
    userLikeView.backgroundColor = customColorGrey;
    [sectionHeader addSubview:userLikeView];

    // like label
    UILabel* userLikeLabel = [[UILabel alloc] initWithFrame:CGRectMake(40, 2, 100, 20)];
    [userLikeLabel setText: @"LIKE"];
    userLikeLabel.backgroundColor = customColorGrey;
    userLikeLabel.textColor = customColorIt;
    [userLikeLabel setFont:[UIFont fontWithName:@"DIN-Regular" size:12]];

    [userLikeView addSubview:userLikeLabel];

    // image
    UIImageView *likeImg = [[UIImageView alloc]
                            initWithImage:[UIImage imageNamed:@"classifica_like_C.png"]];
    likeImg.frame = CGRectMake(5, 0, 24, 24);
    [userLikeView addSubview:likeImg];

    // user like label
    UILabel* userLikeCountLabel = [[UILabel alloc] initWithFrame:CGRectMake(250, 2, 20, 20)];
    [userLikeCountLabel setText: [likesCount stringValue]];
    userLikeCountLabel.backgroundColor = customColorGrey;
    userLikeCountLabel.textColor = customColorIt;
    [userLikeCountLabel setFont:[UIFont fontWithName:@"DIN-Regular" size:12]];

    [userLikeView addSubview:userLikeCountLabel];


    // la mia bacheca like view
    userLaMiaView = [[UIView alloc] initWithFrame:CGRectMake(10, 180, 300, 25)];
    userLaMiaView.backgroundColor = [UIColor clearColor];
    [sectionHeader addSubview:userLaMiaView];


    // like label
    UILabel* userLaMiaLabel = [[UILabel alloc] initWithFrame:CGRectMake(5, 0, 150, 20)];
    [userLaMiaLabel setText:NSLocalizedString(@"LA MIA BACHECA", nil)];

    userLaMiaLabel.backgroundColor = [UIColor clearColor];
    userLaMiaLabel.textColor = customColorGrey;
    [userLaMiaLabel setFont:[UIFont fontWithName:@"DIN-Bold" size:10]];

    [userLaMiaView addSubview:userLaMiaLabel];

    // grey line view below la mia label
    userGreyLineView = [[UIView alloc] initWithFrame:CGRectMake(10, 248, 280, 1.5)];
    userGreyLineView.backgroundColor = [UIColor whiteColor];
    [sectionHeader addSubview:userGreyLineView];


    return sectionHeader;
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    return 210;
}

changing `UITableViewStyle` to `UITableViewStyleGrouped` worked for me — Arnab, Apr 12 '17 at 08:55

score 74 · Answer 1 · edited May 23 '17 at 12:26

74

That behavior is only common when the UITableViewStyle property of the table is set to UITableViewStylePlain. If you have it set to UITableViewStyleGrouped, the headers will scroll up with the cells.

This answer is taken from this question.

This solution works regardless of the number of headers.

edited May 23 '17 at 12:26

Community

1
1

answered Aug 18 '15 at 16:47

Carl

2,896
2
32
50

3

`self.tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStyleGrouped]; // Get headers to scroll` – John Erck Jan 06 '16 at 16:01

Ilario · Accepted Answer · 2017-07-28T13:23:41.397

45

create sectionHeader view in a new method and then add to the end:

self.tableView.tableHeaderView = sectionHeader;

edited Jul 28 '17 at 13:23

answered Oct 28 '13 at 12:41

Ilario

5,979
2
32
46

19

changing `UITableViewStyle` to `UITableViewStyleGrouped` worked for me – Arnab Apr 12 '17 at 08:54
changing `UITableViewStyle` to `UITableViewStyleGrouped` might work but I dont think is the right approach, looks more like a patch. If in the future you have multiple sections and diff headers, that will break. – rgkobashi Mar 30 '22 at 09:02

score 21 · Answer 3 · answered Feb 02 '19 at 19:02

21

if you have dynamic header view or single view select table style

answered Feb 02 '19 at 19:02

Ketan Sodvadiya

464
5
11

Anjali Prasad · Answer 4 · 2019-01-02T08:30:44.557

12

Changing the UITableViewStyle from Plain to Grouped make the section header to scroll with the other cells.

edited Jan 02 '19 at 08:30

answered Mar 19 '18 at 08:42

Anjali Prasad

324
2
9

score 6 · Answer 5 · answered Jan 05 '17 at 07:53

If you write tableView.tableHeaderView = sectionHeader you will lose the actual table view header.
If you want to have table view header along with section headers you have to set UITableViewStyle property to UITableViewStyleGrouped.
Also if you want to calculate section header height automatically you can return UITableViewAutomaticDimension in heightForHeaderInSection method like this:

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return UITableViewAutomaticDimension;
}

score 4 · Answer 6 · answered Oct 28 '13 at 12:45

4

If you have a single header in the table then you can use tableHeaderView as below:

tableView.tableHeaderView = Header;

Or if you have multiple header in table than you need to use Group table instead of plain table.

Thanks

answered Oct 28 '13 at 12:45

Hindu

2,894
23
41

How to scroll the header along with the UITableView?

6 Answers6

Linked