The UINavigationBar is a hurdle every iOS engineer has to deal with, and the frustrating part of it is the smooth transition to the destination state as the page changes. If you want to do this well, you don’t need a profound algorithm, you don’t need a profound underlying principle, you only need a persistent heart.

introduce

Let’s see how wechat smoothly switches the status of the navigation bar

The navigation bar of my page and Favorites page has different barStyle and background color

When you swipe right back to my page from Favorites, the NavigationBar’s background is split into black and white, and the elements on the bar switch smoothly, just as they would with a single background color.

Look carefully, I page and favorites page navigation bar background color is not the same, but both have frosted glass effect

When the “favorites” page slides up to a certain extent, the “shadowImage” will appear in the navigation bar. At this time, if you swipe right and return, the “shadowImage” will still remain in the navigation bar on the “favorites” page, but there is no such line on my page

I have to say, great detail

Let’s take a look at a counter-example. This is the effect of the gold Digging app’s favorites page. When you swipe right to return to the previous page, the navigation bar is very abrupt and sharp.

In particular, I chose nuggets as an example purely because nuggets are one of my commonly used apps

The smooth transition of the navigation bar can be divided into the following cases

Shadows fade and show

The following shows the hidden and present of the smooth switching shadowImage

Navigation bar yes and no

Show the navigation bar under the smooth switching between with and without, and call the setNavigationBarHidden: animated: the effect of different oh

Navigation bar background transparent and dark

This effect is not better than the Nuggets

The background of navigation bar is different

Look at the following effect, the performance of the navigation bar background is not the same as wechat

Usage

These effects are the result of three classes working together, totaling about 400 lines of code

HBDNavigationBar inheritance UINavigationBar

The HBDNavigationController inherits the UINavigationController and uses the HBDNavigationBar internally

UIViewController(HBD) is a class that has configurable properties in it

@property (nonatomic, assign) UIBarStyle hbd_barStyle; @property (nonatomic, strong) UIColor *hbd_barTintColor; @property (nonatomic, assign) float hbd_barAlpha; @property (nonatomic, assign) BOOL hbd_barHidden; @property (nonatomic, assign, readonly) float hbd_barShadowAlpha; @property (nonatomic, assign) BOOL hbd_barShadowHidden; @property (nonatomic, assign) BOOL hbd_backInteractive; // Whether the current page responds to the right swipe. The default is YESCopy the code

It’s actually quite simple to use

// HBDNavigationController is only available when creating UINavigationController. // HBDNavigationBar is only available when using storyboards DemoViewController *vc = [[DemoViewController alloc] init]; self.window.rootViewController = [[HBDNavigationController alloc] initWithRootViewController:vc];Copy the code

You can configure the desired effect by category in viewDidLoad

@implementation DemoViewController - (void)viewDidLoad { [super viewDidLoad]; / / hide the navigation bar, just like that, don't need to call setNavigationBarHidden: animated: / / don't need to worry about other pages will also be affected self. Hbd_barHidden = YES; } @endCopy the code

If you’re using the storyboard, in addition to setting the HBDNavigationController, don’t forget to set the HBDNavigationBar as well

Precautions and limitations

Hbd_barHidden doesn’t actually hide the navigation bar, it just makes it transparent. Of course, events are penetrable, and because it doesn’t hide the navigation bar, it’s possible to switch smoothly and elegantly from one navigation bar to another

Only supported by hbd_barTintColor set the background color, does not support setting the background image, that is to say, call setBackgroundImage: forBarMetrics: is invalid

If a frosted glass effect is required, the value set to hbd_barTintColor should have transparency, depending on the color value. Do not adjust the frosted glass effect with hbd_barAlpha, it is used to dynamically control the opacity and darkness of the navigation background, like the effect on the gold nuggets page.

IsTranslucent’s value is always YES, and you should not change it, which means that the Controller’s View is always under the navigation bar

Support for setting the remaining navigation-bar related properties through [UINavigationBar appearance]

Thank you

When perfect navigation related functions, see a lot more than ten projects, one of the biggest help to me was YPNavigationBarTransition, it for me to solve how to smooth switching between different background provides valuable reference.

Requirements

iOS 8+

Installation

HBDNavigationBar is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'HBDNavigationBar'Copy the code

License

HBDNavigationBar is available under the MIT license. See the LICENSE file for more info.