Change view of section title after scrolling down

Question

I want to change the appearance of the section title when the user scrolls the page, something similar to this in the Music application (Pay attention to how the background color of the view has changed and got the lower border)

Is there a good way to track when a view is on top of a section or in a scroll position?

Update:

My only solution so far is to save an array of all views of the section header and change the view of the first visible section to scrollViewDidScroll: delegate method (getting the first index of the visible section using the tableView.indexPathsForVisibleRows array)

If someone could come up with an easier way, that would be great!

Answer 1

You can change the color (and whatever you want) as the section title in the scrollViewDidScroll method. This example dims the color of the floating header when the user scrolls down and stores this white value between 0.9 and 0.6. It also displays the lower border in the title if you scroll down more than 5 points.

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

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

There may be a simpler solution, but this will be one way to achieve what you want:

• tableHeader viewControllers (NB uitableviewController, viewController tableview , )

• View , .

• contentOffset tableView ( UIScrollView), .

, sectionHeaderView ( , , ., , , ). .