auto hiding and showing UINavigationBar like Instagram iOS app

Question

I have this snippet of code:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    UINavigationBar *navbar =self.navigationController.navigationBar;
    UIView *tableView = self.view;
    CGRect navBarFrame = self.navigationController.navigationBar.frame;

    CGRect tableFrame = self.view.frame;

    //changing the origin.y based on the current scroll view.
    //Adding +20 for the Status Bar since the offset is tied into that.

    navBarFrame.origin.y = MIN(0, MAX(-44, (scrollView.contentOffset.y * -1)))  +20 ;
    tableFrame.origin.y = navBarFrame.origin.y + navBarFrame.size.height;

    navbar.frame = navBarFrame;
    tableView.frame = tableFrame;

}

this gives the desired effect of hiding my navigation bar, but the navigation will only re-appear if you scroll to the top of the scrollview (y offset = 0). how can I recreate Instagram's behaviour where the navbar reappears whenever you scroll up?

score 2 · Accepted Answer · answered Jan 06 '16 at 15:50

I've scrapped the manual frame code for this more intuitive code:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    if (lastContentOffset > scrollView.contentOffset.y) {
        if (downwards) {
            downwards = NO;
            scrollDistance = 0;
        } else {
            scrollDistance++;
        }
    }
    else if (lastContentOffset < scrollView.contentOffset.y) {
        if (!downwards) {
            downwards = YES;
            scrollDistance = 0;
        } else {
            scrollDistance++;
        }
    }
    lastContentOffset = scrollView.contentOffset.y;
    CGFloat threshold = 10;
    if (downwards && !self.navigationController.navigationBarHidden && scrollDistance > threshold) {
        [self.navigationController setNavigationBarHidden:YES animated:YES];
    } else if (!downwards && self.navigationController.navigationBarHidden && scrollDistance > threshold) {
        [self.navigationController setNavigationBarHidden:NO animated:YES];
    }

}

This also adds a 10px threshold so that it only reacts to a meaningful scroll up or down

This looks much better than what you had posted in the question, good work! — MSU_Bulldog, Jan 06 '16 at 16:30

score 1 · Answer 2 · edited May 23 '17 at 10:34

1

Use this link to detect scroll direction: Detect Scroll Direction

I don't really understand what you are doing with your code that you posted. Are you creating a new navigation bar each time or hiding and showing the same one?

Anyways, once you detect scroll direction, just show the navigation bar when ScrollDirection = ScrollDirectionUp.

Something like:

if (ScrollDirection == ScrollDirectionUp) {
    self.navigationController.navigationBar.hidden = NO;
}

edited May 23 '17 at 10:34

Community

1
1

answered Jan 06 '16 at 15:24

MSU_Bulldog

3,465
5
34
73

you were right, I ended up messing up my views (I'm using autolayout so the manual frame code didn't work well) - I've added my solution – Halpo Jan 06 '16 at 15:44

auto hiding and showing UINavigationBar like Instagram iOS app

2 Answers2