匹配 '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
需要采取的步骤:
对于颜色,您想在视图中添加两个图层。最顶层采用 barTintColor
,不透明度为 85%。对于不透明版本,删除多余的图层并直接设置颜色。
要匹配边框,请使用不透明度为 30% 的黑色,确保颜色正确 space 并确保背景层不重叠,否则它们会弄乱你的边界。
如果您真的想匹配 UINavigationBar
的行为,请将您的背景视图向上拉伸,位于状态栏下方。
你可以在FilterBar on GitHub中看到我的实现。
我有一个设置为半透明的导航栏。我不想改变这一点。我在导航栏上设置了条形色调颜色,看起来很棒。但是我设置的颜色不是显示的 '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
需要采取的步骤:
对于颜色,您想在视图中添加两个图层。最顶层采用
barTintColor
,不透明度为 85%。对于不透明版本,删除多余的图层并直接设置颜色。要匹配边框,请使用不透明度为 30% 的黑色,确保颜色正确 space 并确保背景层不重叠,否则它们会弄乱你的边界。
如果您真的想匹配
UINavigationBar
的行为,请将您的背景视图向上拉伸,位于状态栏下方。
你可以在FilterBar on GitHub中看到我的实现。