状态栏和导航栏在iPhoneX中无法正确显示

Question

我有＆＃39;关于＆＃39;控制器使用状态栏下方的导航栏。出于某种原因，我必须将View的背景颜色设置为导航栏的相同颜色，否则状态栏的背景将为白色。这个技巧在其他设备上运行正常，但在iPhoneX的横向视图中却没有。如下所示：

如果我将View的背景设置为白色，则会出现其他问题：

1）状态栏为白色。

2）横向视图上没有扩展导航栏

看起来这是一个问题，我在View中有导航栏作为如下所示的故事板结构：

但我似乎无法将导航栏移动到与View相同的级别。有什么想法吗？

Answer 1

您的UINavigationBar很可能固定在视图的safeAreas上。这里有几点需要考虑：

当前设置

目前，您的视图固定在其超级视图的安全区域内。在iPhone X上，即：

{纵向 中的
• UIEdgeInsets(top: 44, left: 0, bottom: 34, right: 0) 在横向
中
• UIEdgeInsets(top: 0, left: 44, bottom: 21, right: 44)

因此，这正是您的观点最终结束的地方：

safeAreaInsets.bottom中的值并不重要，因为navigationBar很可能不会扩展到其超级视图的底部。

固定到超级视图

好的，现在让我们将视图固定到其超视图的边缘而不是安全区域插图：

（对所有3个边缘执行此操作，必要时将常量调整为0）

这就是我们最终的结果：

看起来很适合风景，但是什么是肖像？注意条形按钮如何位于状态栏内。 好吧，布局系统正在完成你要告诉它的事情（如果一直都是这样，那么编写iOS将是轻而易举的事情：D）。它将视图固定在其超级视图的顶部，忽略任何layoutMargin或safeAreaInsets。但是对于UINavigationBar，这不是我们想要的。我们希望条形图的内容从任何safeAreaInset.top开始，以便它不会干扰状态栏，例如。

解决方案

解决方案是将顶部约束恢复为相对于safeArea＆＃39;。 navigationBar的内容现在看起来不错。为了向上扩展navigationBar的背景，您可以设置navigationBars委托（UINavigationBarDelegate）并提供以下实现：

func position(for bar: UIBarPositioning) -> UIBarPosition {
  return .topAttached
}

通过返回.topAttached，您可以告诉navigationBar在状态栏下方向上展开其背景（模糊视图）。

结果：

请注意，一般情况下，如果可能，最好使用UINavigationController。这整个布局舞蹈都是为您完成的，另外在一个视图中添加一个简单的UINavigationBar对于大型游戏也不会很好。他们需要一个navigationController来提供崩溃和扩展逻辑。

附录

关于这个主题的一些补充说明：

• 我们不需要在这里考虑左右安全区域。 UINavigationBar尊重这些并相应地插入其内容。对于垂直插图，它不会这样做，这就是为什么我们必须进行上述舞蹈。
• 如果仔细观察，即使是最后一张图片中的布局也不太对劲。大标题太靠近左边缘。要解决此问题，您必须在故事板中为导航栏勾选Preserve Superview Margins。同样，如果您只是首先使用UINavigationController，系统会为您处理所有这些事情。

Answer 2

您可以使用两个视图，一个用于状态栏，另一个用于导航栏和应用约束，如图所示，您的问题将得到解决。

Answer 3

isTranslucent默认设置为true。将其设置为false将使导航栏扩展到状态栏下方。

navigationBar.isTranslucent = false

Answer 4

看起来独立的导航栏只适用于这种情况。将其更改为导航项后修复了该问题。为了使它成为导航项目，我选择现有的控制器（带有导航栏的控制器）并通过“编辑器 - ＆gt;嵌入”将其嵌入到导航控制器中。

Answer 5

CodingMeSwiftly答案的初学者摘要和一些解释：

1. 在viewDidLoad方法或类似方法的ViewController类中，您必须分配一个委托（或在情节提要中进行委托）：

   navigationBar.delegate = self //其中NavigationBar是IBOutlet

2. 为您的ViewController类添加扩展名：

   扩展ViewController：UINavigationBarDelegate { 功能位置（用于栏：UIBarPositioning）-> UIBarPosition { 返回.topAttached } }

3. 检查故事板上的导航栏顶部约束是否为“安全区域”。顶部

对我有用。