Swift-适用于iOS 11大标题的自定义导航栏图像🎨

标准的iOS组件可能会很无聊……幸运的是，有了Swift，自定义随处可见！ 本文将演示如何在导航栏中使用自定义图像，同时仍保留导航控制器中提供的所有功能。 🚀

TL; DR ：使用少量代码清除导航控制器提供的默认导航栏图像，并将其约束在视图的顶部，前导和尾随锚点上，以将其放置在适当的位置（请确保不要约束到安全区域） 。

您可能需要手动创建可能是您要记住的自定义导航栏标题。 有很多方法可以做到这一点，但最简单的方法就是使用Sketch。 使用矢量工具，我能够在几分钟内创建出我想要的设计。 这里的尺寸并不重要，因为Sketch默认具有出色的导出预设（iOS预设提供标准的Xcode要求的@ 2x和@ 3x大小）。

假设您已经在导航控制器中嵌入了视图控制器，则下一步是从提供的默认标题图像中剥离导航栏。 这相当简单，可以用几行代码来完成。 这是我用来执行此操作的功能； 请注意-我将其用作重用的struct ，但这是可选的。

既然导航栏已经清晰了，我们就可以提供自己的图像了。 出于本文的目的，我将使用界面生成器来完成此操作。 这就像将UIImageView拖到视图控制器上，提供适当的图像并设置约束一样简单。

为了设置约束以使iPhone X不会裁剪图像，我们需要约束imageView的顶部锚点以view的顶部锚点（而不是安全区域）。 在我的情况下，将约束设置为0在边缘沿边缘留一个小间隙，因此值-2应该可以解决该问题。

当然，高度限制将根据所使用的图像而变化。 并且，由于我的图像较暗，因此我还将大标题文本的颜色设置为白色，并将状态栏设置为.lightContent 。

此时，自定义标头应按预期工作

您可能会注意到标题图像在iPhone X上看起来不错，但在其他任何设备上看起来都太大了。 这是因为view的顶部锚点和X上的view的顶部安全区域锚点之间存在间隙。幸运的是，可以通过IBOutlet引用轻松地调整图像的高度，以参考图像视图的高度约束。 完整的设备尺寸可在此处找到。 将此代码放在同一区域，我们清除导航栏默认图像：

您可能还会注意到，将设备旋转到横向时，标题图像的高度过高。 这可以通过视图控制器中提供的willTransform(to:with)方法轻松处理。

我没有在示例中包含它，但这也可以在导航栏中添加栏按钮项。 而已！ 您的自定义导航栏图像现在应该可以正常工作work

随时在Twitter和Github上关注我，以获得更多类似this‍👨🏻的内容