Animating UINavigationBar in iOS 7 (like Safari)

Question

When scrolling content in Safari, the title bar animates to a smaller version of its self. What is the best way to implement this?

Currently, I am changing the size of the frame like so:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //
    //  Table view
    //
    CGFloat currentPosition = scrollView.contentOffset.y - CGRectGetHeight(self.tableView.tableHeaderView.frame) + CGRectGetHeight(self.navigationController.navigationBar.frame) + CGRectGetHeight([[UIApplication sharedApplication] statusBarFrame]);

    if ([scrollView isKindOfClass:[HeadlinesHeadlinesTableView class]]) {
        ScrollDirection scrollDirection;

        if (self.lastContentOffset > scrollView.contentOffset.y) {
            scrollDirection = ScrollDirectionDown;
        } else if (self.lastContentOffset < scrollView.contentOffset.y) {
            scrollDirection = ScrollDirectionUp;
        }

        self.lastContentOffset = scrollView.contentOffset.y;

        CGRect frame = self.navigationController.navigationBar.frame;
        CGFloat minimumFrameHeight = 30.0f;
        CGFloat maximumFrameHeight = 44.0f;

        CGFloat titleSize = [[self.navigationController.navigationBar.titleTextAttributes objectForKey:NSFontAttributeName] pointSize];
        CGFloat minimumTitleHeight = 22.0f;
        CGFloat maximumTitleHeight = 30.0f;

        if (currentPosition > 0 && CGRectGetHeight(frame) >= minimumFrameHeight && CGRectGetHeight(frame) <= maximumFrameHeight) {
            switch (scrollDirection) {
                case ScrollDirectionUp:
                    frame.size.height--;
                    titleSize--;
                    break;

                case ScrollDirectionDown:
                    frame.size.height++;
                    titleSize++;
                    break;

                default:
                    break;
            }

            if (CGRectGetHeight(frame) <= minimumFrameHeight) {
                frame.size.height = minimumFrameHeight;
            }

            if (CGRectGetHeight(frame) >= maximumFrameHeight) {
                frame.size.height = maximumFrameHeight;
            }

            if (titleSize <= minimumTitleHeight) {
                titleSize = minimumTitleHeight;
            }

            if (titleSize >= maximumTitleHeight) {
                titleSize = maximumTitleHeight;
            }
        }

        [self.navigationController.navigationBar setFrame:frame];
        [self.navigationController.navigationBar setTitleTextAttributes: @{ NSFontAttributeName : [UIFont fontWithName:@"Canterbury-Regular" size:titleSize] }];
    }
}

Naturally, this way is not smooth and a lot of code, not to mention the fact that I need to fade out bar button items as well.

Thanks in advance!

Condiment

A different approach could be instead of uibarbuttonitem's use uibuttons added to the navbar and then just mess with the alpha e.g. button.alpha = 0.0f; something like that.. hope that guides you in the right direction :) – Placidia

See also: #19819665 – Coahuila

Answer 1

Take a look at AMScrollingNavbar, it already has fading support. You can try to change font size of NavigationBar to make the title smaller.

Crystlecs