匹配 'transparent' 导航栏的颜色

Matching the color of the 'transparent' navbar

我有一个设置为半透明的导航栏。我不想改变这一点。我在导航栏上设置了条形色调颜色,看起来很棒。但是我设置的颜色不是显示的 'true' 颜色,因为我将半透明设置为 'YES'。

我还有一个有背景的观点。我想将该视图的背景颜色设置为与导航栏相同的颜色。但是,将颜色设置为相同是行不通的。由于导航栏是半透明的。

我希望我的视图背景具有相同的半透明度,以便我的颜色匹配。

再次声明,我不想更改导航栏的半透明度或颜色。我想创建一个与导航栏具有相同颜色和半透明度的视图。然而,在 iOS 中,您只是将半透明设置为 'YES',我不确定真正设置的效果(即可能是什么 alpha)。有没有我可以应用到我的视图背景以匹配导航栏的公式?

我现在也在看同样的问题,我正在使用图层检查器查看导航栏。

事实证明,UINavigationBar 实际上有两个彩色图层。一种是根据你的颜色,一种是半透明near-white层。

看看这张截图:

有两层。

顶层(标记为 A)有我的颜色,在本例中,由 UIColor(red: 0.13, green: 0.20, blue: 0.62, alpha: 1.00) 定义的蓝色。该图层的不透明度设置为 .85。

在此之下,还有第二层,标记为 B,其中 near-white 的背景色定义为 UIColor(white: 0.97, alpha: 0.5)

我还没有弄清楚如何在我正在开发的 my library 中模仿它,但是这个屏幕截图给了我一些可以使用的东西。我也不确定如何模仿边界,但这应该是一个很好的起点。

编辑:正如我所说,这里有更多信息。

底部边框:

昨天我在这上面花了些时间,发现了一些有趣的事情: UINavigationBar 的底部边框实际上是 half-pixel 高 UIImageView。它没有图像,但具有定义为 UIColor(red: 0.0, green: 0.0, blue:0.0, alpha: 0.3).

的背景颜色

我不确定他们为什么使用空图像视图而不是 UIView,但我现在有了一个理论。当我在 FilterBar 视图上设置边框时,我注意到我的颜色以完全相同的方式定义,但与 UINavigationBar.

中的颜色不同。

首先,我意识到我在 FilterBar 本身上设置了边框和 near-white 颜色,而 barTintColor 在第二层。 near-white 渗入边界,所以我为白色添加了另一层。

我的边框仍然是错误的颜色。所以,我挖得更深。我开始将视图对象打印到调试器中,我注意到我的边框颜色是在 CGColorSpaceGray 颜色 space 中定义的,而 UIImageView 是在 CGColorSpaceRGB 中定义的。

为了解决这个问题,我手动创建了我需要的颜色space,然后是透明的黑色。在设备上,它运行完美,但在模拟器上它仍然有点偏差。

这是我在 Swift:

中用来制作那种颜色的东西
    let space : CGColorSpace = CGColorSpaceCreateDeviceRGB()
    let color : CGColor = CGColorCreate(space, [0.0, 0.0, 0.0, 0.3])

将图层的 borderColor 设置为 color 并将 borderWidth 设置为 0.5,我看到与本机导航栏几乎相同的视图。我认为这就是 UINavigationBar 使用 UIImageView 作为边框的原因。虽然我还没有测试过,但我怀疑它是为了颜色 space.

层数:

我之前注意到 UINavigationBar 由三层组成。好吧,实际上,它是由几层组成的私有 class _UINavigationBarBackground,只有当导航栏启用了半透明时,背景才会出现。

如果禁用半透明,UINavigationBar 会将颜色应用于自身并隐藏背景层级。我在 FilterBar.

中模仿了这种行为

总结:

总结一下,模仿 UINavigationBar 需要采取的步骤:

  1. 对于颜色,您想在视图中添加两个图层。最顶层采用 barTintColor,不透明度为 85%。对于不透明版本,删除多余的图层并直接设置颜色。

  2. 要匹配边框,请使用不透明度为 30% 的黑色,确保颜色正确 space 并确保背景层不重叠,否则它们会弄乱你的边界。

  3. 如果您真的想匹配 UINavigationBar 的行为,请将您的背景视图向上拉伸,位于状态栏下方。

你可以在FilterBar on GitHub中看到我的实现。