为iPhone X创建自定义导航栏和标签栏
当苹果在iPhone X发布期间推出所有全新的边缘到边缘显示时，所有开发人员都可以预见，导航栏和标签栏将是此边缘到边缘显示中受影响最大的UI组件。 实际上，Apple已更新了iOS（iOS11），使其能够基于不同的iPhone模型自动呈现本机UINavigationBar和UITabBar 。 但是，为了创建自定义导航栏或标签栏，我们将必须手动处理这些差异。 在本文中，我将向您展示如何创建具有自定义背景图像的导航栏和标签栏，以适应iPhone X边缘到边缘的屏幕尺寸。
如果您不熟悉iOS11上引入的“ 安全区域布局指南 ”，建议您先阅读以下文章，然后再继续。
为iPhone X调整Apps UI时如何解决最常见的界面问题
只需在界面上进行一些简单的调整即可更新您现有的iOS应用程序以支持iPhone X边缘到边缘屏幕。
自定义导航栏
在安全区域中添加子视图
首先，将一个子视图（绿色视图）添加到视图控制器中。 为了演示，将按钮和标签添加到子视图中。 该子视图将成为我们的自定义导航栏。 让我们相应地设置自动布局。
-
NavBar.Height= 44 -
NavBar.Top=Safe Area.Top -
NavBar.Leading=Safe Area.Leading -
NavBar.Trailing=Safe Area.Trailing
请注意，我们设置的所有约束都在自定义导航栏和安全区域布局指南之间。 这是为了确保自定义导航栏中的所有UI元素始终位于安全区域内。
将图像视图添加为背景
我们需要的下一步是显示背景图像的图像视图。 在设置自动布局之前，请确保将图像视图放置在自定义导航栏的后面。
-
Image View.Top=Superview.Top -
Image View.Leading=Superview.Leading -
Image View.Trailing=Superview.Trailing -
Image View.Bottom=NavBar.Bottom
请注意，顶部，顶部和尾部约束全部在图像视图和其超级视图之间。 这是为了确保背景图像以纵向和横向都延伸到屏幕边缘。
对于底部约束，我们将其设置在NavBar.Bottom和Image View.Bottom之间。 这样做的目的是确保图像视图将覆盖整个自定义导航栏。
最终修饰
在此阶段，所有基本组件均已正确配置，但是仍然需要进行一些最终的修改。
- 将自定义导航栏（绿色视图）的背景色设置为“ clear colou r”。
- 将所需的背景图像设置为图像视图的图像。 确保内容模式为“ 纵横比填充 ”，并且选中“ 裁剪到边界 ”。
恭喜!! 您已经成功创建了带有自定义背景图片的导航栏，该图片支持iPhone X边缘到边缘的屏幕尺寸。
调整导航栏高度
通过使用如上所述的自动布局配置，实际上非常容易调整导航栏的高度。 只需调整自定义导航栏高度约束的常量值，背景图像就会自动调整其高度以填满整个导航栏。
自定义标签栏
通过应用我们在创建自定义导航栏时使用的技巧和概念，创建自定义标签栏的解决方案实际上非常简单。 我将它留给您解决！ 💪
但是，如果您难以解决问题，请随时下载示例项目，其中包括针对自定义导航栏和自定义选项卡栏的解决方案。
这是最终产品…
