Make a navigation bar (UINavigationBar) as pursued as WeChat

UINavigationBar is a hurdle that every iOS engineer will encounter. The maddening thing is whether it can smoothly transition to the target state with page switching. If you want to do this well, you don't need advanced algorithms, you don't need deep underlying principles, you just need a persistent heart.

introduce

Let's see how WeChat smoothly switches the state of the navigation bar

Navigation bar of my page and favorite page have different barStyle and background color

When swiping right back to my page from Favorites , the background of the NavigationBar is divided into two black and white segments, and the elements on the bar switch smoothly, just like when there is only one background color.

Carefully observe, the background color of the navigation bar of my page and the collection page is different, but both have a frosted glass effect

When the Favorites page is slid up to a certain extent, a shadowImage will appear in the navigation bar. At this time, if you swipe back to the right, the navigation bar still retains the shadowImage on the Favorites page, but my page does not have this line.

I have to say, the details are well done

Next, let's look at a counter-example. This is the effect of the Nuggets app collection page. When swiping right to return to the previous page, the response of the navigation bar is really abrupt and sharp.

In particular, I give the example of Nuggets purely because Nuggets are one of my frequently used apps.

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

shadows hidden

The following shows the hidden and present of smooth switching shadowImage

Navigation bar with and without

The following shows the smooth switching between the presence and absence of the navigation bar, which is different setNavigationBarHidden:animated:from the

Navigation bar background transparent and dark

Is this effect better than the Nuggets?

Navigation bar background is different

Look at the effect below, whether the performance of the background of the navigation bar is the same as that of WeChat

Usage

The above effects are the result of three classes working together, a total of about 400 lines of code

HBDNavigationBar inherits UINavigationBar

HBDNavigationController inherits UINavigationController and uses HBDNavigationBar internally

UIViewController(HBD) is a category with some configurable properties

@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;  // 当前页面是否响应右滑返回，默认是 YES

It's really simple to use

// HBDNavigationController 只有在创建 UINavigationController 时使用到
// HBDNavigationBar 只有在使用 storyboard 时才有机会登场
DemoViewController *vc = [[DemoViewController alloc] init];
self.window.rootViewController = [[HBDNavigationController alloc] initWithRootViewController:vc];

You can configure the desired effect by classification in viewDidLoad

@implementation DemoViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 隐藏导航栏，就这样，不需要调用 setNavigationBarHidden:animated:
// 也不需要担心其它页面会受到影响
self.hbd_barHidden = YES; 
}
@end

Notes and Restrictions

hbd_barHiddenIt doesn't really hide the navigation bar, just make it transparent. Of course, events can be penetrated. It is precisely because the navigation bar is not really hidden that it can switch smoothly and gracefully between the presence and absence of the navigation bar.

Only supports hbd_barTintColorsetting , and does not support setting the background image, that is, calling setBackgroundImage:forBarMetrics:is invalid

If a frosted glass effect is required, hbd_barTintColorthe should have transparency, and the specific value varies according to the color value. Don't use hbd_barAlphato adjust the frosted glass effect, it is used to dynamically control the transparency and darkness of the background of the navigation bar, just like the effect of the Nuggets collection page.

isTranslucentThe value is always YES, and you should not change it, which means that the controller's view is always under the navigation bar

Support setting other navigation bar related properties through [UINavigationBar appearance]

GitHub

HBDNavigationBar