Show and hide Navigation bar on tableView Scrolling

objective-c uitableview ios7 uinavigationbar

11,466

Solution 1

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.

Solution 2

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.

11,466

Author by

user1068810

Updated on June 04, 2022

Comments

user1068810 almost 2 years

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.
user1068810 almost 10 years

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.
Andris Zalitis almost 10 years

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)
user1068810 almost 10 years

Exactly the navigation bar, which appears if you scroll down and if the section header starts moving the navigation bar hides.
user1068810 almost 10 years

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.
Andris Zalitis almost 10 years

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.
user1068810 almost 10 years

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 almost 10 years

#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.