Show and hide Navigation bar on tableView Scrolling

Question

Show and hide navigationbar while tableview scrolling,initially navigationbar is hidden.Tableview contains only one section header, when we scroll upwards the section header reaches to top but as we scroll slightly downwards status bar and navigationbar are shown animatedly pulling section header down but as the section header scrolls down navigationbar and statusbar hides.I want to achieve this scenario. I'm trying to achieve this but as navigation bar is hidden initially and bring navigation bar creates a jerking effect and same when hiding the navigationbar. Please help me out in this.

Please post some code and pictures of what you are trying to accomplish. If the motion is jerky, you can try to animate the transition with animateWithDuration on the view. — rvijay007, Jun 12 '14 at 05:45

score 2 · Answer 1 · edited May 23 '17 at 12:22

2

You are describing a solution similar to what Facebook, Instagram and Chrome has, with an exception that you say that Navigation Bar should be initially hidden.

This thread has a couple of solutions for Facebook style Navigation Bar and even a link to a control. It still might be what you're after.

edited May 23 '17 at 12:22

Community

1
1

answered Jun 12 '14 at 22:02

Andris Zalitis

2,369
18
18

Thanks for your links. If you had played with Google+ iPhone app, the profile section of any public user, this is excatly what i want. – user1068810 Jun 13 '14 at 06:53
I see. Google+ has a lot going on - parallax header photo; a bar with tab sections sticking to the top and then a navbar which appears only if you scroll down when the bar with tab sections is on the top. I think the navbar itself is similar to GTScrollNavigationBar (component in the link) – Andris Zalitis Jun 13 '14 at 07:50
Exactly the navigation bar, which appears if you scroll down and if the section header starts moving the navigation bar hides. – user1068810 Jun 13 '14 at 08:17
But if initially the navigation bar is hidden and if we show navigation bar opaque , it will decrease the height of the view and creating a jerk on showing and hiding. – user1068810 Jun 13 '14 at 08:21
As I see it - the scrollview content in Google+ goes under the navigation bar, therefore the height of the scrollview isn't changed when the navbar shows or hides. – Andris Zalitis Jun 13 '14 at 09:05

Rivera · Answer 2 · 2014-06-18T01:54:01.283

I think the jerking could be due to the table view bouncing after scrolling to the top or bottom.

You should have a threshold to pass before hiding/showing the bar.

Some sample code from here:

- (void)viewDidLoad
{
    [super viewDidLoad];

    // ...

    // Register for KVO
    if (_hidesBarsOnScroll)
    {
        [_scrollView addObserver:self
                      forKeyPath:@"contentOffset"
                         options:NSKeyValueObservingOptionOld
                         context:nil];
    }
}

- (void)observeValueForKeyPath:(NSString *)keyPath
                      ofObject:(id)object
                        change:(NSDictionary *)change
                       context:(void *)context
{
    CGPoint oldOffset = [(NSValue *)change[NSKeyValueChangeOldKey] CGPointValue];

    if (!_hidesBarsOnScroll || _scrollView.contentOffset.y == oldOffset.y)
        return;

    // Show on scroll up
    if (_barsHidden &&
        _scrollView.contentOffset.y < oldOffset.y &&
        _scrollView.contentOffset.y + _scrollView.bounds.size.height < _scrollView.contentSize.height) // Skip on bottom
    {
        [self.navigationController setNavigationBarHidden:NO
                                                 animated:YES];
        [self.tabBarController setTabBarHidden:NO
                                      animated:YES];
        _barsHidden = NO;
    }

    // Hide on scroll down
    if (!_barsHidden &&
        _scrollView.contentOffset.y > 0 && // Skip on top
        _scrollView.contentOffset.y > oldOffset.y)
    {
        [self.navigationController setNavigationBarHidden:YES
                                                 animated:YES];
        [self.tabBarController setTabBarHidden:YES
                                      animated:YES];
        _barsHidden = YES;
    }
}

As for how Google+ seems to work to me, I don't think that is a section header but cell content that is moved out of the table view to the controller's view when you scroll down.

controller > view > tableView > cell > contentView > sectionHeaderLikeView

When you scroll (using a delegate or KVO) turns into:

controller > view > tableView > cell > contentView
                  > sectionHeaderLikeView

Showing and hiding the bars adjusts the controller's view and keeps sectionHeaderLikeView in place.

Hi thanks for the answer,can you see google+ and visit anybody's profile page and scroll it up and down the same scenario i wanted. — user1068810, Jun 17 '14 at 18:20
#Rivera, I'm stuck in this scenario can you provide me some helping code, my navigation bar would be hidden initially. It would be a great help. — user1068810, Jun 21 '14 at 11:47

Show and hide Navigation bar on tableView Scrolling

2 Answers2