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

【问题标题】：Update app for iPhone x - without navigation bar为 iPhone x 更新应用程序 - 没有导航栏
【发布时间】：2018-03-14 07:45:58
【问题描述】：

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

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

在情节提要中，我使用了UIView，固定高度为64，标签以UIView为中心

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

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

请查看以下图片

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

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

【问题讨论】：

我看不出你的图片有什么问题，请发布一些你认为正确的设计。
@ovo:- 已编辑问题。
您之前是如何处理可调整大小的状态栏的（例如，在通话中）？
只是为了记录，正是出于这样的原因，坚持使用苹果给你的控制很重要。 iOS 7 也发生了同样的事情，苹果更改了 UI 以允许开发人员在状态栏下绘图。如果您坚持使用内置控件，Apple 会投入大量工作以使其与自动使用的新样式尽可能无缝。您的图像中没有什么是导航栏无法完成的
请参考我的回答Make custom navigationbar compatible for iPhoneX

标签： ios ios11 swift4 xcode9 iphone-x

【解决方案1】：

您需要的是安全边距。 iPhone X 上的苹果官方教程解释了关于它们的一切here in "Human Interface Guidelines iOS" 和 here in "Designing for iPhone X"。

【讨论】：

【解决方案2】：

1.将子视图添加到 ViewController

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

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

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

2。添加 ImageView 作为背景

获取显示背景图像的图像视图。这个 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 中它也使用安全区域。

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

【讨论】：