3

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

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

在情节提要中，我使用UIView了 64 个固定高度，以及一个居中的标签UIView

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

固定视图在iPhone x中看起来很小。

请检查以下图片

iPhone X iPhone 8

当我开始为 iPhone x 开发其他应用程序时，导航栏在 iPhone x 中变得更大（大约 145 像素）。

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

4

2 回答 2

1

您需要的是安全边际。关于 iPhone X 的 Apple 官方教程在“iOS 人机界面指南”和“为 iPhone X 设计”中解释了有关它们的所有内容。

于 2017-10-03T07:34:14.020 回答
-1

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. 最后一步

A. 设置自定义视图的清晰颜色 B. 在 imageview 上设置图像 C. 确保 imageview 的内容模式为“Aspect Fill”并选中“Clip to Bounds”。

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

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

于 2017-12-11T11:23:09.677 回答