TONavigationBar

TONavigationBar is an open-source subclass of UINavigationBar that adds the ability to set the background content of the navigation bar to transparent, and then gradually bring it back in as the user scrolls through the page.

Apple uses this effect in their 'modern' style iOS apps (Music, TV, App Store) for any content deemed 'notable'. Unfortunately, while it seems like a trivial thing to be able to do, none of the APIs necessary to reconfigure a UINavigationBar to be transparent in that way exist. TONavigationBar internally re-implements a variety of the UINavigationBar functionality in order to make this possible.

Features

Fully integrates into UINavigationController.
Participates in UINavigationController's 'swipe-to-go-back' gesture.
Supports light and dark themed apps.
Features an animation to restore to the normal UINavigationBar appearance.
A target UIScrollView may be specified in order to avoid having to manually pass information to the bar.
Library also features TOHeaderImageView, a header view that may be used as the banner in scroll views.

System Requirements

iOS 11.0 or above

Installation

As a CocoaPods Dependency

Objective-C

Add the following to your Podfile:

pod 'TONavigationBar'

Manual Installation

All of the necessary source files are in the TONavigationBar, folder. Simply copy that folder to your Xcode project and import all of the files in it.

Examples

TONavigationBar has been designed to be as hands-off as possible. It integrates with UINavigationController and only needs to be interacted with when changing the visibility of the background content.

Basic Implementation

Integrating with `UINavigationController`

#import "TONavigationBar.h"

UINavigationController *navigationController = [[UINavigationController alloc] initWithNavigationBarClass:[TONavigationBar class] toolbarClass:nil];

Showing and Hiding the Background Content

#import "TONavigationBar.h"

@implementation MyViewController // A child of the `UINavigationController` stack

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    [self.navigationController.to_navigationBar setBackgroundHidden:YES animated:animated forViewController:self];
    [self.navigationController.to_navigationBar setTargetScrollView:self.tableView minimumOffset:200.0f]; // 200.0f is the height of the header view
}

@end

Creating and Configuring a Header View

#import "TOHeaderImageView.h"

@interface MyTableViewController () <UIScrollViewDelegate>

@property (nonatomic, strong) TOHeaderImageView *headerView;

@end

@implementation MyTableViewController

- (void)viewDidLoad {
    [super viewDidLoad];
	
    self.headerView = [[TOHeaderImageView alloc] initWithImage:[UIImage imageNamed:@"MyPicture.jpg"] height:200.0f];
    self.headerView.shadowHidden = NO;
    self.tableView.tableHeaderView = self.headerView;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    self.headerView.scrollOffset = scrollView.contentOffset.y;
}

@end

Architecture of `TONavigationBar`

In order to modify UINavigationBar to the same style Apple uses, a few things need to happen:

The background view, including the separator line need to be removed.
The title label in the center needs to be removed.
The tint color needs to be set to white (To make the buttons white).
The bar style needs to be set to UIBarStyleBlack (Which makes UINavigationController change the status bar style to white.)

Changing the tint color and bar style are trivial, however there are no public APIs provided by Apple to easily control the alpha of just the background views, or the title label.

The way TONavigationBar solves this is as follows:

The official background views are removed by using [UINavigationBar setBackgroundImage:[[UIImage alloc] init] and then a wholly custom set are put in their place. This also means transitioning it back while scrolling is possible.
The title label is controlled by manually traversing UINavigationBar's internal views, finding the right one, and then overriding its presentation by Apple's code.

Is this App Store safe?

Yes. It should be. The only slightly dubious thing this view does is that it traverses some internal Apple views to find the title label. However no private APIs are called in the process, so that should be no problem.

That being said, internal view traversal is always a terrible way to go, and this library MAY break in future versions of iOS without maintenance. Thankfully, it's set up so if it does break, the absolute worst thing that can happen is that the title label will always be visible.

Credits

TONavigationBar was originally created by Tim Oliver as a component for iComics, a comic reader app for iOS.

Firewatch Wallpaper by Campo Santo and is used for illustrative purposes. Firewatch is available on Steam.

iOS Device mockups used in the screenshot created by Pixeden.

License

TONavigationBar is licensed under the MIT License, please see the LICENSE file.

azoff15/TONavigationBar