user2588945
user2588945

Reputation: 1681

How to scroll the header along with the UITableView?

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;
}

Upvotes: 47

Views: 60692

Answers (6)

Ketan Sodvadiya
Ketan Sodvadiya

Reputation: 514

if you have dynamic header view or single view select table style select table view style as <code>group</code> table

Upvotes: 22

Anjali Prasad
Anjali Prasad

Reputation: 324

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

Upvotes: 12

Ilario
Ilario

Reputation: 6079

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

self.tableView.tableHeaderView = sectionHeader;

Upvotes: 45

Rendel
Rendel

Reputation: 1824

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;
}

Upvotes: 6

Carl
Carl

Reputation: 2934

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.

Upvotes: 75

Hindu
Hindu

Reputation: 2924

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

Upvotes: 4

Related Questions