为 iPhone x 更新应用程序 - 没有导航栏

Question

在我的一个应用程序中，我没有为 header 使用导航栏。我用的是UIView，高度是64。

我只是尝试在 xCode 9 中设计一个屏幕应用程序以支持 iPhone x。

在情节提要中，我使用了固定高度为 64 的 UIView，以及位于 UIView

中心的标签

在 iPhone 8 和 iPhone 8+ 中一切正常，但在 iPhone x 中，设计看起来不太好。

固定视图在 iPhone x.

中看起来很小

请检查以下图片

因为我已经开始为 iPhone x 开发其他应用程序，导航栏在 iPhone x 中变大（大约 145 px）。

如何在 iPhonex 中管理没有导航栏的设计？

Answer 1

你需要的是安全边际。 iPhone X 上的官方 Apple 教程在“人机界面指南”中解释了有关它们的一切 iOS" 和 here in "Designing for iPhone X".

Answer 2

1.添加子视图到 ViewController

让我们开始在视图控制器中添加一个子视图。这个子视图将是我们的自定义导航栏。让我们相应地设置自动布局。在自定义导航栏上设置自动布局约束

NavBar.Height = 44
NavBar.Top = Safe Area.Top
NavBar.Leading = Safe Area.Leading
NavBar.Trailing = Safe Area.Trailing

约束在自定义导航栏和安全区域之间

2。添加 ImageView 作为背景

获取显示背景图像的图像视图。这个图像视图应该在我们的导航栏自定义视图后面在图像视图上设置自动布局约束

Image View.Top = Superview.Top
Image View.Leading = Superview.Leading
Image View.Trailing = Superview.Trailing
Image View.Bottom = NavBar.Bottom (For this drag from imageview to customview and choose last baseline constraint)

前导和尾随约束都在图像视图和它的父视图之间。对于底部约束，我们将其设置在 NavBar.Bottom 和 Image View.Bottom 之间。这样做的目的是确保图像视图将覆盖整个自定义导航栏。

3。最后一步

一个。设置自定义视图的清晰颜色 B. 在 imageview 上设置图片 C. 确保imageview的content mode是“Aspect Fill”并且勾选了“Clip to Bounds”

4.单元测试 在从 iPhone 5 到 iPhone X 的所有设备中进行测试。在所有设备中，期望 iPhone X 我们的自定义图像视图是 64 像素，并且在 iPhone X 中它也使用安全区域。

与默认导航栏的行为方式相同。

为 iPhone x 更新应用程序 - 没有导航栏

Update app for iPhone x - without navigation bar

ios

ios11

swift4

xcode9

iphone-x