匹配“透明”导航栏

Question

我有一个设置为半透明的导航栏。我不想改变这个。我在导航栏上设置了条形色调，看起来很棒。然而，我设置的颜色不是显示的“真实”颜色，因为我将半透明设置为“是”。

我有另一个有背景的视图。我想将该视图的背景颜色设置为与导航栏相同的颜色。但是设置颜色相同的jsut不起作用。由于导航栏是半透明的。

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

再次声明我不想更改导航栏的半透明度或颜色。我想创建一个与导航栏具有相同颜色和半透明度的视图。但是在iOS中你只是将半透明设置为'YES'，我不确定真正设置的效果（即可能是alpha）。是否有一个公式我可以应用于我的视图背景以匹配导航栏？

Answer 1

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

事实证明，UINavigationBar实际上有两个彩色层。其中一个是基于你的颜色，一个是半透明的近白色层。

看一下这个截图：

有两层。

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

在其下方，有第二层，标记为B，近白色，背景颜色定义为UIColor(white: 0.97, alpha: 0.5)。

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

编辑：正如我所说，这里有更多信息。

底边：

我昨天花了一些时间在这上面，我找到了一些有趣的东西：UINavigationBar的下边框实际上是半像素高UIImageView。它没有图像，但它的背景颜色定义为UIColor(red: 0.0, green: 0.0, blue:0.0, alpha: 0.3)。

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

首先，我意识到我在FilterBar本身设置了边框和近白色，而barTintColor则在第二层。近白色正在流入边境，所以我为白色添加了另一层。

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

为了解决这个问题，我手动创建了我需要的色彩空间，然后是透明的黑色。在设备上，它工作得很好，但在模拟器上它仍然有点偏。

这是我在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作为边框的原因。虽然我尚未对其进行测试，但我怀疑它是否适用于色彩空间。

<强>层：

我之前注意到UINavigationBar由三层组成。嗯，实际上，它是由多个图层组成的私人课程_UINavigationBarBackground，只有在导航栏启用了半透明的情况下才会出现该背景。

如果禁用半透明，UINavigationBar会将颜色应用于自身并隐藏背景层次结构。我在FilterBar中模仿了这种行为。

<强>要点：

总而言之，您需要采取的步骤来模仿UINavigationBar：

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

2. 要匹配边框，请使用30％不透明度的黑色，确保您拥有正确的色彩空间，并确保您的背景图层不会重叠，否则它们会混乱你的边界。

3. 如果您确实想要匹配UINavigationBar的行为，请在状态栏下方向上拉伸背景视图。

您可以在FilterBar on GitHub中看到我的实施。