Change section header view after scrolling down - ios

Question

I want to modify the section header view when user scrolls down, something similar to this in Music app
(Notics how the view background color has changed and got a bottom border)
Is there a good way to track when the view is on top of the section or in scrolling position?
Update:
My only solution so far is to keep an array of all the section header views and change the view of the first visible section in scrollViewDidScroll: delegate method (getting the first visible section index using tableView.indexPathsForVisibleRows array)
If anyone can come up with a simpler way, that would be great!

Answer 1

You can modify the color (and whatever else you want) of the section header view in the scrollViewDidScroll method. This example darkens the color of the floating header view as the user scrolls down, and keeps that color's white value between 0.9 and 0.6. It also unhides a bottom border line in the header view if you scroll down by more than 5 points.
The .m file for RDHeaderView:
- (id)init{
self = [super init];
if (self) {
UIView *line = [[UIView alloc] init];
[line setTranslatesAutoresizingMaskIntoConstraints:NO];
line.backgroundColor = [UIColor darkGrayColor];
[self addSubview:line];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"|[line]|" options:0 metrics:nil views:#{#"line":line}]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:[line]|" options:0 metrics:nil views:#{#"line":line}]];
[line addConstraint:[NSLayoutConstraint constraintWithItem:line attribute:NSLayoutAttributeHeight relatedBy:0 toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:1]];
self.bottomLine = line;
self.bottomLine.hidden = YES;
}
return self;
}
The relevant methods in the table view controller:
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
RDHeaderView *header = [[RDHeaderView alloc] init];
header.contentView.backgroundColor = [UIColor colorWithWhite:0.9 alpha:1];
return header;
}
-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
NSInteger topSection = [[self.tableView indexPathsForVisibleRows].firstObject section];
NSInteger sectionYOffset = [self.tableView rectForHeaderInSection:topSection].origin.y;
RDHeaderView *pinnedHeader = (RDHeaderView *)[self.tableView headerViewForSection:topSection];
pinnedHeader.bottomLine.hidden = ((scrollView.contentOffset.y - sectionYOffset) > 5)? NO: YES;
CGFloat colorOffset = fmaxf(0.6, 0.9 - (scrollView.contentOffset.y - sectionYOffset)/1000.0);
if (colorOffset > 0.9) colorOffset = 0.9;
pinnedHeader.contentView.backgroundColor = [UIColor colorWithWhite:colorOffset alpha:1];
}
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
return 80;
}

Answer 2

Maybe a simpler solution exists, but this woud be one way of achieving what you want:
remove the tableHeader, and add it as a separate subview to your viewControllers view (N.B. do not use a uitableviewController, as that viewController has the tableview as its view, and you don't want that)
move the tableView down so that it fits right under that former-tableheader view
compute and set the contentOffset of the tableView (it is a UIScrollView) so that the cells don't seem to jump to a new position.
Also, you could try the return a sectionHeaderView (which scrolls along with the tableView down, but not up, see for example in you contacts list how this works). Play around with that view being a cell or a section header.