为iPhone X创建自定义导航栏和标签栏

当苹果在iPhone X发布期间推出所有全新的边缘到边缘显示时,所有开发人员都可以预见,导航栏和标签栏将是此边缘到边缘显示中受影响最大的UI组件。 实际上,Apple已更新了iOS(iOS11),使其能够基于不同的iPhone模型自动呈现本机UINavigationBarUITabBar 。 但是,为了创建自定义导航栏或标签栏,我们将必须手动处理这些差异。 在本文中,我将向您展示如何创建具有自定义背景图像的导航栏和标签栏,以适应iPhone X边缘到边缘的屏幕尺寸。

如果您不熟悉iOS11上引入的“ 安全区域布局指南 ”,建议您先阅读以下文章,然后再继续。

为iPhone X调整Apps UI时如何解决最常见的界面问题
只需在界面上进行一些简单的调整即可更新您现有的iOS应用程序以支持iPhone X边缘到边缘屏幕。

自定义导航栏

在安全区域中添加子视图

首先,将一个子视图(绿色视图)添加到视图控制器中。 为了演示,将按钮和标签添加到子视图中。 该子视图将成为我们的自定义导航栏。 让我们相应地设置自动布局。

  1. NavBar.Height = 44
  2. NavBar.Top = Safe Area.Top
  3. NavBar.Leading = Safe Area.Leading
  4. NavBar.Trailing = Safe Area.Trailing

请注意,我们设置的所有约束都在自定义导航栏和安全区域布局指南之间。 这是为了确保自定义导航栏中的所有UI元素始终位于安全区域内。

将图像视图添加为背景

我们需要的下一步是显示背景图像的图像视图。 在设置自动布局之前,请确保将图像视图放置在自定义导航栏的后面。

  1. Image View.Top = Superview.Top
  2. Image View.Leading = Superview.Leading
  3. Image View.Trailing = Superview.Trailing
  4. Image View.Bottom = NavBar.Bottom

请注意,顶部,顶部和尾部约束全部在图像视图和其超级视图之间。 这是为了确保背景图像以纵向和横向都延伸到屏幕边缘。

对于底部约束,我们将其设置在NavBar.BottomImage View.Bottom之间。 这样做的目的是确保图像视图将覆盖整个自定义导航栏。

最终修饰

在此阶段,所有基本组件均已正确配置,但是仍然需要进行一些最终的修改。

  • 将自定义导航栏(绿色视图)的背景色设置为“ clear colou r”。
  • 将所需的背景图像设置为图像视图的图像。 确保内容模式为“ 纵横比填充 ”,并且选中“ 裁剪到边界 ”。

恭喜!! 您已经成功创建了带有自定义背景图片的导航栏,该图片支持iPhone X边缘到边缘的屏幕尺寸。

调整导航栏高度

通过使用如上所述的自动布局配置,实际上非常容易调整导航栏的高度。 只需调整自定义导航栏高度约束的常量值,背景图像就会自动调整其高度以填满整个导航栏。

自定义标签栏

通过应用我们在创建自定义导航栏时使用的技巧和概念,创建自定义标签栏的解决方案实际上非常简单。 我将它留给您解决! 💪

但是,如果您难以解决问题,请随时下载示例项目,其中包括针对自定义导航栏和自定义选项卡栏的解决方案。

这是最终产品…