CODEWITHSUNDEEP
objective-cuitableviewios7uinavigationbar
user1068810
user1068810

Reputation: 397

Show and hide Navigation bar on tableView Scrolling

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.

Upvotes: 3

Views: 11662

Answers (2)

E. Rivera
E. Rivera

Reputation: 10938

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.

Upvotes: 2

Andris Zalitis
Andris Zalitis

Reputation: 2384

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.

Upvotes: 2

Related Questions