Xcode 13.0版本中使用storyboard时导航栏无法到达屏幕顶部如何解决

问题根因 #

Xcode 13默认适配iOS 15及以上系统的新导航栏外观APIUINavigationBarAppearance，旧版本storyboard的导航栏配置会和新API默认逻辑冲突，才会出现导航栏无法延伸到屏幕顶部的异常。

解决方法 #

Storyboard配置方案（无需写代码） #

• 选中你项目中对应的导航控制器的Navigation Bar组件，打开右侧属性检查器面板
• 找到Appearance配置项，将默认仅勾选的Standard改为同时勾选Standard和Scroll Edge
• 检查Translucent选项是否处于勾选状态，只有开启半透明属性，导航栏才会默认延伸到状态栏区域
• 切换到当前内容页的约束配置，确认页面根视图的顶部约束是绑定到Superview.top，而非Safe Area.top，绑定到安全区顶部会直接导致导航栏无法延伸到状态栏区域

全局代码配置方案（如果storyboard配置不生效可使用） #

将以下代码添加到AppDelegate的application:didFinishLaunchingWithOptions:方法中即可全局生效：

if #available(iOS 15.0, *) {
    let navBarAppearance = UINavigationBarAppearance()
    // 导航栏背景使用默认样式，需要自定义背景色可替换为下面的注释代码
    navBarAppearance.configureWithDefaultBackground()
    // navBarAppearance.backgroundColor = .systemBlue
    UINavigationBar.appearance().standardAppearance = navBarAppearance
    UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance
}

如果使用Objective-C，对应代码如下：

if (@available(iOS 15.0, *)) {
    UINavigationBarAppearance *navBarAppearance = [[UINavigationBarAppearance alloc] init];
    [navBarAppearance configureWithDefaultBackground];
    // navBarAppearance.backgroundColor = [UIColor systemBlueColor];
    [UINavigationBar appearance].standardAppearance = navBarAppearance;
    [UINavigationBar appearance].scrollEdgeAppearance = navBarAppearance;
}

其他检查项 #

• 确认你当前页面没有修改edgesForExtendedLayout属性，该属性默认值为UIRectEdgeAll，如果被修改为UIRectEdgeNone或者UIRectEdgeBottom也会导致导航栏无法延伸到顶部
• 如果你的页面有手动隐藏/显示导航栏的逻辑，需要在显示导航栏后同步刷新外观配置，避免出现样式异常

相关storyboard界面截图：

内容的提问来源于stack exchange，提问作者Ethan Brimhall